/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* general stuff */

img {
    width: 100%;
}

/* desktop stuff */

#container { 

    /* be responsive untill 1400px */
    max-width: 1440px;
    /* be center */
    margin:auto;
    background-color: #fff9e672;

}

#logo{
    width: 18.680555555555556%;
    padding-left: 5%;
}

.navbar {
    display: none;
  }

nav{
    width: 56.875%;
    display:flex;
    justify-content: space-around;

    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#008A6C;
    font-size: 35px;
}


#header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#hero{
    width: 100%;
}

#welcome{
    display: flex;
    justify-content: space-around;
}

#pastery{
    width: 40.833333333333333%;
}

#welcomeparagraph{
    width: 39.791666666666667% ;
}

#welcomeparagraph h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#FF5959;
    font-size: 60px;
    text-align: end;
    padding-right: 35%;
    padding-top: 15%;
}

#welcomeparagraph p{
    color: #FF70FE;
    text-align: center;
    font-family: MADE Mountain;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 5%;
}

#hours{
    display: flex;
    justify-content: space-around;
}

#hoursparagraph{
    width: 31.805555555555556%;
}

#hoursparagraph h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#5251F7;
    font-size: 60px;
    padding-left: 35%;
    padding-top: 25%;
}

#hoursparagraph p{
    color: #FF5959;
text-align: center;
font-family: MADE Mountain;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-top: 5%;
}

body{
    background:url(background.png);
    background-size: 100%;
}

#lovestatue{
    width: 50.870763888888889%;
}

#location{
    display: flex;
    justify-content:space-around;
    
}

#beanimage{
    width: 43.888888888888889%;
    margin-top: -30vw;
}

#locationparagraph{
    width: 39.861111111111111%;
}

#locationparagraph p{
    color: #008A6C;
text-align: center;
font-family: MADE Mountain;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#menu{
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

#menuimage{
    width:56.319444444444444%;
    
}

#menuparagraph{
    width:45.347222222222222%;
   padding: 5%;
}

#menuparagraph h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#F878F8;
    font-size: 55px;
    padding-top: 10%;
    padding-left: 15%;
    
}

#menuparagraph p{
    color: #5251F7;
    text-align: center;
    font-family: MADE Mountain;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 5%;
    padding-right: 5%;
}

#menubutton{
    width: 30.097222222222222%;
    padding-left: 32%;
    padding-top: 5%;
}

#artstudio{
    display: flex;
    justify-content: space-around;
}

#artstudio h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#FF5959;
    font-size: 60px;
}

#pottery{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 4%;
}

#potterycup{
    width: 80.254583333333333%;
    padding-left:5%;
}

#pottery p{
    color: #F878F8;
    font-family: MADE Mountain;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width:65.138888888888889%;
    padding-left:200px;
    text-align: center;
    margin-left: -5vw;
}

#potterytitle{
    width: 15.319375%;
    padding-top: 5%;
    padding-left: 30%;
    margin-bottom: -4vw;
}

#sketchbooktitle{
    width: 18.319375%;
    padding-left: 50%;
    margin-bottom: -2vw;
}

#sketchbookclub{
    display:flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 4%;
}

#sketchbookimage{
    width:80.172708333333333%; 
    padding-right: 10%;
}

#sketchbookclub p{
    color: #FF5959;
    font-family: MADE Mountain;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width:70.138888888888889%;
    padding-left: 20%;
    text-align: center;
}

#paintingtitle{
    width: 15.319375%;
    padding-left:35%;
    padding-top: 2%;
    margin-bottom: -5vw;
}

#painting{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 4%;
}

#paintingimage{
    width: 60.395277777777778% ;
    padding-left: 5%;
}

#paintingparagraph p{
    color: #5251F7;
    font-family: MADE Mountain;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

#paintingparagraph p{
    width: 60.833333333333333%;
    margin-left: 15vw;
}

#followus{
    width:24.861111111111111% ;
    text-align: center;
    padding-left: 37%;
}

#followus h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#F878F8;
    font-size: 60px;
    padding-top: 10%;
}

#socialmediacolumns{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.col{
    width: 31.828703703703704%;
    padding: 2px; 
   
}

#instagram{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#instagram h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#FF5959;
    font-size: 60px;
    padding-bottom: 10%;
}

#menuheader h2{
    font-family: MADE Mountain;
    font-weight: 700;
    font-style: normal;
    color:#F878F8;
    font-size: 60px;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
}

#mobilemenu{
    display: none;
}

#aboutushero{
    margin-top: -5vw;
}

#aboutusparagraph h2{
    width: 100%;
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#FF5959;
    font-size: 60px;
    padding-bottom: 20px;
    text-align: center;
}

#aboutusparagraph p{
    width: 90%;
    text-align: center;
    margin-left: 5vw;

    font-family: MADE Mountain;
    font-weight: 700;
    font-style: normal;
    color:#5251F7;
    font-size: 24px;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
    padding-bottom: 10%;
}

#artstudiohero{
    margin-top: -5vw;
}

.column {
    float: left;
    width: 33.33%;
  }

  .middle {
    width: 50%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .column {
    float: left;
    width: 33.33%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  #artparagraph h2{
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
    color:#5251F7;
    font-size: 60px;
    text-align: center;
  }

  .menu {
    display: flex;
    padding: 3%;

  }
  .columnleft{
    width: 33.333333333333333%;
    padding-bottom: 10%;
}

.columnmiddle{
    width: 33.333333333333333%;
    padding-bottom: 10%;
}

.columnright{
    width: 33.333333333333333%;
    padding-top: 10%;
}
  #artparagraph p{
    color: #008A6C;
    text-align: center;
    font-family: MADE Mountain;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 10%;
    width: 60%;
    margin-left: 20vw;
    padding-top: 3%;
  }
  #sandwiches{
    color: #008A6C;
    text-align: center;
    font-size: 50px;
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  #panini,#pesto,#delight,#melt,#wrap{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 18px;
    padding-left:5%;
    padding-right:5%;
    padding-top: 5%;
  }

  #paninip,#pestop,#delightp,#meltp,#wrapp{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 15px;
    padding-left:5%;
    padding-right:5%;
    padding-bottom: 3%;
  }

  #paniniprice,#pestoprice,#delightprice,#meltprice,#wrapprice{
    text-align:start;
    font-family: MADE Mountain;
    color:#FF5959;
    font-size: 13px;
    padding-left: 5%;
  }

  #expresso,#lattes,#coldbrew{
    text-align: center;
    font-size: 50px;
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  #expresso{
    color:#FF5959;;
  }

  #lattes{
    color:#F878F8;
  }

  #coldbrew{
    color:#008A6C;
  }
  
 #morningmist,#expressostarry,#picasso,#leonardo,#goldleaflatte,#popart,#escher,#flowerbrew{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 18px;
    padding-left:5%;
    padding-right:5%;
    padding-top: 5%;
 }

 #morningp,#starryep,#picassop,#leonardop,#goldleafp,#popartp,#escherp,#flowerbrewp{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 15px;
    padding-left:5%;
    padding-right:5%;
    padding-bottom: 3%;
 }

 #morningprice,#expressostarryprice,#picassoprice,#leonardoprice,#goldleafprice,#popartprice,#escherprice,#flowerbrewprice{
    text-align:start;
    font-family: MADE Mountain;
    color:#FF5959;
    font-size: 13px;
    padding-left: 5%;
 }

 #pastries{
    color: #5251F7;
    text-align: center;
    font-size: 50px;
    font-family: "duffy-script", sans-serif;
    font-weight: 700;
    font-style: normal;
 }

 #starrycroissant,#fruittart,#eclair,#ccake,#macarons{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 18px;
    padding-left:5%;
    padding-right:5%;
    padding-top: 5%;
 }

 #starrycp,#fruittartp,#eclairp,#cakep,#macaronsp{
    color: #5251F7;
    text-align:start;
    font-family: MADE Mountain;
    font-size: 15px;
    padding-left:5%;
    padding-right:5%;
    padding-bottom: 3%;
 }

 #starrycprice,#fruittartprice,#eclairprice,#cakeprice,#macaronsprice{
    text-align:start;
    font-family: MADE Mountain;
    color:#FF5959;
    font-size: 13px;
    padding-left: 5%;
 }

 #turkeysandwich{
    width: 60%;
 }

 #pestosandwich{
    width: 80%;
    margin-left: 5%;
 }

 #pastry2{
    width: 60%;
    margin-left: 40%;
 }

 #cake{
    width: 70%;
    margin-left: 15%;
 }

 #lavender{
    width: 40%;
    margin-left:60% ;
    margin-top:-25%;
 }

 #morningmist{
    margin-top: 5%;
 }
 
 #morningp{
    margin-right: 40%;
 }

 #cubecoffee{
    width: 40%;
    margin-top: -25%;
    padding-bottom: 5%;
 }
 #pastry2{
    margin-top: -10vw;
 }

 #picasso{
    margin-left: 40%;
 }

 #picassop{
    margin-left: 40%;
 }

 #picassoprice{
    margin-left: 40%;
 }
 #gold{
    width: 40%;
    margin-top: -20%;
    padding-bottom: 5%;
 }

 #goldleaflatte{
    margin-left: 40%;
 }

 #goldleafp{
    margin-left: 40%;
 }

 #goldleafprice{
    margin-left: 40%;
 }

 #flower{
    width: 40%;
    margin-left: 55%;
    margin-top:-30%;
 }

 #popart{
    margin-top: 10%;
 }
 #popartp{
    width: 45%;
 }



/* tablet */

@media screen and (max-width:744px)
{
    nav{
        width: 56.875%;
        font-size: 30px;
        text-align: center;
        margin-bottom: -5vw;
    }  

    #logo{
        width: 20.564516129032258%;
    }

    #pastry{
        width: 50%;
    }

    #welcomeparagraph h2{
        font-size: 50px;
        padding-left: 20%;
        padding-top: 5%;
    }

    #welcomeparagraph p{
        font-size: 15px;
        width:90.236559139784946%;
        padding-top: 2%;
        padding-bottom: 10%;
    }

    #hoursparagraph p{
        width: 100%;
        font-size: 17px ;

    }

    #hoursparagraph h2{
        padding-left: 30%;
        font-size: 50px;
    }

    #locationparagraph p{
        width: 100% ;
        font-size: 20px ;
        margin-right: 5%;
       
    }

    #lovestatue{
        width: 56.18239247311828%;
    }

    #beanimage{
        width: 56.18239247311828%;
        margin-top: -20vw;
    }

    #menu{
        padding-top: 5%;
        padding-bottom: 5%;
    }
    #menuimage{
        width:56.317204301075269% ;
        margin-left: -10vw;
    }

    #menuparagraph p{
        font-size: 16px;
        width: 100%;
        margin-left: -4vw;
    }

    #menuparagraph h2{
        padding: 0%;
        width: 110%;
        font-size: 50px;
        margin-left: -5vw;
    }

    #menubutton{
        width: 40.629032258064516%;
        margin-left: 0vw;
        padding-left: 0%;
        margin-left: 10vw;
    }

    #artstudio{
        width: 100%;
        font-size:50px;
        padding-bottom: 5%;
    }

    #potterycup{
        width: 150%;
        padding-left:2%;
    }

    #potteryparagraph p{
        width:80.403225806451613%;
        font-size: 16px ;
        margin-left: -20vw;
    }

    #potterytitle{
        padding-top: 5%;
        padding-left: 30%;
        width: 15.985483870967742%;
        margin-bottom: -5vw;
    }

    #sketchbookparagraph p{
        width: 85.258064516129032%;
        font-size: 16px;
        margin-left: -20%;
    }

    #sketchbookimage{
        width: 150%;
        margin-left: -5vw;
        padding-right: 0%;
    
    }

    #sketchbooktitle{
        width:18.985483870967742%;
        margin-bottom: -5vw;
    }

    #sketchbookclub{
        padding-left: 2%;
        padding-right: 2%;
    }

    #paintingimage{
        width: 110%;
        margin-left: -3vw;
    }

    #paintingparagraph p{
        width:95%;
        font-size: 16px ;
        margin-left: 2vw;
    }

    #paintingtitle{
        width:15.985483870967742%;
        margin-bottom: -7vw;
    }

    #followus h2{
        width: 90%;
        margin-left: 2vw;
        font-size: 40px;
    }

    .col{
        width: 100%;
        padding: 0%;
    }

    #insta h2{
        font-size: 40px;
    }

    #menuimage2{
        width: 100%;
        margin-left: 0vw;
    }

    #menuheader h2{
        font-size: 40px;
    }

    #aboutusparagraph h2{
        width: 100%;
        font-family: "duffy-script", sans-serif;
        color:#FF5959;
        font-size: 40px;
        padding-bottom: 20px;
        text-align: center;
    }
    
    #aboutusparagraph p{
        width: 90%;
        text-align: center;
        margin-left: 5vw;
    
        font-family: MADE Mountain;
        color:#5251F7;
        font-size: 15px;
        padding-top: 20px;
        padding-bottom: 40px;
        text-align: center;
        padding-bottom: 5%;
    }

    #artparagraph h2{
        font-size:40px;
    }
    
    #artparagraph p{
        font-size:15px ;
        width: 80%;
        margin-left: 10%;
       
    }

    #sandwiches{
        font-size: 30px;
    }

    #panini,#pesto,#delight,#melt,#wrap{
        font-size: 15px;
    }

    #paninip,#pestop,#delightp,#meltp,#wrapp{
        font-size: 12px;
      }

    #paniniprice,#pestoprice,#delightprice,#meltprice,#wrapprice{
        font-size: 10px;
    }

    #expresso,#lattes,#coldbrew{
        font-size:30px ;
    }

    #morningmist,#expressostarry,#picasso,#leonardo,#goldleaflatte,#popart,#escher,#flowerbrew{
        font-size: 15px;
    }

    #morningp,#starryep,#picassop,#leonardop,#goldleafp,#popartp,#escherp,#flowerbrewp{
        font-size:12px ;
    }

    #morningprice,#expressostarryprice,#picassoprice,#leonardoprice,#goldleafprice,#popartprice,#escherprice,#flowerbrewprice{
        font-size: 10px;
    }

    #pastries{
        font-size: 30px;
    }

    #starrycroissant,#fruittart,#eclair,#ccake,#macarons{
        font-size: 15px;
    }

    #starrycp,#fruittartp,#eclairp,#cakep,#macaronsp{
        font-size: 12px;
    }

    #starrycprice,#fruittartprice,#eclairprice,#cakeprice,#macaronsprice{
        font-size: 10px;
    }

    #lavender{
        margin-top:-30%;
    }

    #cubecoffee{
        margin-top: -35%;
    }

    #gold{
        margin-top: -35%;
     }

     #flower{
        margin-top:-20%;
     }

     #popart{
        margin-top: 3%;
     }

}

/* mobile */

@media screen and (max-width:430px)
{
    nav {
        display:none;
      }
      .navbar {
        display: block;
      }

      #pastery{
        display: none;
      }

      #logo{
        width: 25.348837209302326%;
        padding-left: 40%;
    }

    #welcome{
        width: 100%;
    }

    #welcomeparagraph{
        width: 90%;
    }

    #welcomeparagraph p{
        font-size: 12px;
        width: 93.488372093023256%;
        padding-left: 5%;
    }

    #welcomeparagraph h2{
     margin-left: 14vw;
     font-size: 40px;
    }

    #hours{
        width: 100%;
    }

    #hoursparagraph p{
        font-size: 15px ;
        margin-top: 3vw;
        margin-left: -2vw;
        width: 180%;
    }

    #hoursparagraph h2{
        font-size: 40px;
        margin-top: 70vw;
        margin-left: 7vw;
        width: 100%;
    }

    #location{
        width: 100%;
    }

    #locationparagraph p{
        width: 200% ;
        font-size: 15px ;
        margin-top: 5vw;
        margin-left: -23vw;
    }

    #lovestatue{
        width: 90%;
        margin-right: -25vw;
        margin-left: -100vw;
        margin-top: -5vw;
    }
    
    #beanimage{
        width: 90%;
        margin-top: 15vw;
        margin-left: -15vw;
        margin-right: -100vw;
    }

    #menu{
        width: 95%;
    }

    #menuimage{
        width:90% ;
        margin-left: -5vw;
        margin-top: -40vw;
        margin-right: -100vw;
    }

    #menuparagraph p{
        font-size: 12px;
        width: 175%;
        margin-left: -18vw;
    }

    #menuparagraph h2{
        width:650% ;
        font-size:30px;
        margin-top: 100vw;
        margin-left: -5vw;
        margin-bottom: 3vw;

    }

    #menubutton{
        width: 70%;
        margin-top: 5vw;
        margin-left: 7vw;
    }
    
    #artstudio{
        width: 100%;
    }

    #artstudio h2{
        width: 100%;
        font-size: 40px;
        padding-left: 10%;
    }

    #pottery{
        width: 100%;
    }

    #potterycup{
        width:100% ;
        margin-top: -90vw;
        margin-left: 20vw;
        margin-right: -300vw;
    }

    #potterytitle{
        width:25.462790697674419%;
        margin-top: 55vw;
        margin-left: 9vw;

    }

    #potteryparagraph p{
        width: 25.790697674418605%;
        font-size: 12px ;
        margin-left: 188vw;
        margin-top: 8vw;
    }

    #sketchbookclub{
        width:100%;
    }
    #sketchbooktitle{
        width:30.462790697674419%;
        margin-left: -15vw;
        margin-top: 60vw;
    }

    #sketchbookparagraph{
        width: 100%;
        font-size: 12px ;
        margin-left:-75vw ;
        margin-top: 10vw;
    }

    #sketchbookimage{
        width: 55%;
        margin-top: -120vw;
        margin-left: -250vw;
        margin-right: -60vw;
    }

    #painting{
        width: 100%;
    }

    #paintingtitle{
        width:25.462790697674419% ;
        margin-top: 55vw;
        margin-left: 5vw;
    }

    #paintingimage{
        width: 100%;
        margin-right: -220vw;
        margin-left: 15vw;
        margin-top: -85vw;
    }

    #paintingparagraph p{
        width: 30%;
        font-size: 13px;
        margin-left: 160vw;
        margin-top: 10vw;
    }

    #followus{
        width: 100%;
    }

    #followustext h2{
        width:50%;
        font-size: 40px;
        margin-left: -12vw;

    }

    #instagram{
        width: 100%;
    }

    #insta h2{
        font-size: 40px;
    }

    #menuheader h2{
    font-size: 40px;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
    }

    #aboutusparagraph h2{
        width: 100%;
        font-family: "duffy-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color:#FF5959;
        font-size: 30px;
        padding-bottom: 20px;
        text-align: center;
    }
    
    #aboutusparagraph p{
        width: 90%;
        text-align: center;
        margin-left: 5vw;
    
        font-family: MADE Mountain;
        font-weight: 700;
        font-style: normal;
        color:#5251F7;
        font-size: 15px;
        padding-top: 20px;
        padding-bottom: 40px;
        text-align: center;
        padding-bottom: 10%;
    }

    #artparagraph h2{
        font-size: 30px;
    }
   
    #artparagraph p{
        font-size: 13px ;
        width: 90%;
        margin-left: 5%;
    }

    .menu{
        display: flex;
        flex-wrap: wrap;
    }

    .columnleft{
        width: 100%;
        padding-bottom: 10%;
    }

    .columnmiddle{
        width: 100%;
        padding-bottom: 10%;
    }

    .columnright{
        width: 100%;
        padding-top: 10%;
    }

    #sandwiches{
        font-size: 40px;
    }

    #panini,#pesto,#delight,#melt,#wrap{
        font-size: 20px;
    }

    #paninip,#pestop,#delightp,#meltp,#wrapp{
        font-size: 15px;
      }

    #paniniprice,#pestoprice,#delightprice,#meltprice,#wrapprice{
        font-size: 13px;
    }

    #expresso,#lattes,#coldbrew{
        font-size:40px ;
    }

    #morningmist,#expressostarry,#picasso,#leonardo,#goldleaflatte,#popart,#escher,#flowerbrew{
        font-size: 20px;
    }

    #morningp,#starryep,#picassop,#leonardop,#goldleafp,#popartp,#escherp,#flowerbrewp{
        font-size:15px ;
    }

    #morningprice,#expressostarryprice,#picassoprice,#leonardoprice,#goldleafprice,#popartprice,#escherprice,#flowerbrewprice{
        font-size: 13px;
    }

    #pastries{
        font-size: 40px;
    }

    #starrycroissant,#fruittart,#eclair,#ccake,#macarons{
        font-size: 20px;
    }

    #starrycp,#fruittartp,#eclairp,#cakep,#macaronsp{
        font-size: 15px;
    }

    #starrycprice,#fruittartprice,#eclairprice,#cakeprice,#macaronsprice{
        font-size: 13px;
    }

    #cubecoffee{
        margin-top: -30%;
    }

    #gold{
        margin-top: -30%;
     }




    .navbar {
        width: 100%;
      }
      
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0px;
      }
      
      .navbar .menu-items {
        display: flex;
      }
      
      .navbar .nav-container li {
        list-style: none;
      }
      
      .navbar .nav-container a {
        text-decoration: none;
        font-weight: 500;
        font-size: 1.2rem;
        padding: 0.7rem;

        font-family: "duffy-script", sans-serif;
        font-weight: 700;
        font-style: normal;
        color:#fff6d8;
        font-size: 35px;
      }
      
      .navbar .nav-container a:hover{
          font-weight: bolder;
      }
      
      .nav-container {
        display: block;
        position: relative;
        height: 0px;
      }
      
      .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 30%;
        margin-left:90%;
        margin-top:5vw;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
      }
      
      .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 30%;
        margin-left:90%;
        margin-top:5vw;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .nav-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #008A6C;
      }
      
      .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
      }
      
      .navbar .menu-items {
        padding-top: 120px;
        background-color: #5151f7d2;
        height: 100vh;
        width: 100%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 50px;
        transition: transform 0.5s ease-in-out;
        text-align: center;
      }
      
      .navbar .menu-items li {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
      }
   
      .nav-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .logo{
        display: none;
      }

}