html {
   --mint:#67d4cf;
   --strongMint:#488F8C;
   --cherry:#B40301;
   --darkChoco:#450c21;
   --matchaLatte:#D9FFD2;
   --icepop:#F6FFEA;
   --honey:#FFDE96;
   --berry:#2C365E;
   background-image:url('./images/diner/checker1.png');
   background-color:var(--mint);
}

.strokeMe {
    font-size: 8vw;
    color: var(--darkChoco);
    text-shadow: 
        -2px -2px 0 var(--icepop), 
        2px -2px 0 var(--icepop),
        -2px 2px 0 var(--icepop), 
        2px 2px 0 var(--icepop);
}

body > div {
    margin: 8% 15% 0 15%;
    width:70%;
    padding:3vw;
}

.mainDiv {
    margin-top:20%;
    height: 59vw;
    background-color: var(--matchaLatte);
    border: 3px var(--darkChoco) solid;
    border-radius: 15px;
    z-index: 0;
}
.mainHeader{
    margin-top:-8%;
    width:auto;
    margin-left:40%;
    padding:0 5vw;
 
    
}
.mainContent {
    width: 70%;
    margin: 10% 0 0 30%;
}








.tabHolder {
    margin: -1vw auto;
    width: 84%;
    text-align:center;
}
.tabulate {
    width: 12vw;
    height: auto;
    background-color: var(--matchaLatte);
    border: 3px var(--darkChoco) solid;

    border-radius: 15px;
    float: right;
    padding: 0.5vw 1vw;
    margin-left: 1vw;
    z-index: -1;
}



/*old code*/

.blogLabel {
    background-image: url('./images/diner/checker2.png');
    background-size: 47px;
    background-repeat:repeat-x;
    height: 64px;
    width: 150%;
    margin:1vw 0 0 20.2vw;
}
.blog {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 50vw;
    margin-top: 10%;
    background-color: var(--matchaLatte);
    border: 3px var(--darkChoco) solid;
    border-radius: 15px;
}

.blog > ul {
    list-style-type: none;
    width:200%;
    height:30vw;
}
 .blog > ul > li {
    float: left;
    margin-left: 3vw;
}
.card {
    padding: 10px;
    width: 30vw;
    height: 30vw;
    background-color: var(--icepop);
    box-shadow: 10px 5px 5px var(--mint);
}

.card:hover {
        box-shadow: 12px 12px 2px 1px var(--mint);
        transform: rotate(-2deg);
    }