@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique&display=swap');
*{
    box-sizing: border-box;
}
/* Light Mode (default) */
:root {
  --background-color: #C1D6EE
  --text-color: #000000;
}

a:link 
{
color:black;
}
a:visited
{
    color:rgb(53, 169, 207)
}
 a:active
 {
    color:white
 }
body
{
     font-family: "Funnel Display", sans-serif;
  font-weight: 350;
  font-style: normal;
  margin:0;
background-color: #FFF8EE;
}

.logo 
{ 
 background-image: url(/p1/images/moonbrew.svg);
display: block !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;  
  background-size: contain !important ;
width: min(1600px,120vw) ;
aspect-ratio: 16/3;

}



.main-header 
{
    background-color:#C1D6EE;
    padding-right: 0%;
    width: 100%;

}

.header-content
{

    display: flex;
  flex-direction: column;     
  align-items: center;         
  justify-content: center;    
  text-align: center;        
  padding: 2% 0;               

}

.theme-toggle
{
  position:relative;
  display: grid;
  max-width: fit-content;
  min-width: fit-content;
}

.nav-list
{
    background-color: #FFD3B3;
     font-family: "Funnel Display", sans-serif;
     font-size:12pt;
    display:flex;
    align-content: center;
    padding-left: 5%;
    padding-top:.3em;
    padding-bottom:.5em;
    grid-template-columns: 2fr 2fr 2fr;
    gap:25%;
    
}


.menu-container 
{

padding-left: 3%;
padding-top: 1em;
Padding-bottom:10%;
grid-row: auto;
}

.menu-item
{
background-color: white;
border-radius: 12%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align:center;
gap:20px;
width:350px;
height: 350px;
background-size: 30%; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5)

}

#coffee 
{
.menu-item:nth-child(1)
{background-image: url(../images/houseblend.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 30%;}

.menu-item:nth-child(2)
{background-image: url(../images/ethiopian.jpeg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 50%;}

.menu-item:nth-child(3)
{background-image: url(../images/midnight.jpeg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 25%;
background-size: 25%;}

.menu-item:nth-child(4)
{background-image: url(../images/vanilla.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 35%;}

.menu-item:nth-child(5)
{background-image: url(../images/caramel.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 40%;}

.menu-item:nth-child(6)
{background-image: url(../images/coldbrew.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 30%;}
}

#tea
{.menu-item:nth-child(1)
{background-image: url(../images/earlgray.jpeg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 45%;}

.menu-item:nth-child(2)
{background-image: url(../images/chamomile.jpeg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 45%;}

.menu-item:nth-child(3)
{background-image: url(../images/matcha.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 30%;}

.menu-item:nth-child(4)
{background-image: url(../images/tumericlatte.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 30%;}
}

#pastries
{
.menu-item:nth-child(1)
{background-image: url(../images/croissant.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 45%;}

.menu-item:nth-child(2)
{background-image: url(../images/muffin.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 35%;}

.menu-item:nth-child(3)
{background-image: url(../images/toast.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 45%;}

.menu-item:nth-child(4)
{background-image: url(../images/cookie.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 35%;} 
}

#specials
{
.special-item:nth-child(1)
{background-image: url(../images/pumpkin.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 40%;}

.special-item:nth-child(2)
{background-image: url(../images/scone.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 50%;}

}
 .menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 2rem;                             
  justify-items: stretch;                
  align-items: start;                   
  width: 100%;        
}




.main-footer 
{
    
    display:flex;
    padding-left: 2%;
    background-color: #C1D6EE;
}

.item-name
{
    padding-top:1%;
}

.item-description
{
    font-size: 12pt;
  position:static;
  margin-top: 30%;
  padding-left: 10%;
  padding-right:10%
}

.item-prices
{
    text-align:center;
    text-wrap:balance;
 margin-bottom: 0%;
}

.price
{
font-size: 14pt;
}

.original-price
{
    text-decoration: line-through;
    text-wrap:balance;
}


.specials-container
{


 display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 1em;                             
  justify-items: stretch;                
  align-items: start;                   
  width: 100%;     

}




.special-item
{

background-color: white;
border-radius: 12%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align:center;
margin-bottom:2%;
margin: 1em ;
gap:10px;
width:350px;
height: 350px;
background-image: url(/p1/links/Frame\ 16.png);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 20%;
background-size: 30%; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5)

}
/* fixes */
.main-header .header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-header .logo {
  margin: 0;            
  padding: 0;
  font-size: 0;         
  line-height: 0;
}


/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.dark-mode
 {
  background-color: #331F01;
color: #FFF8EE;
}
body.dark-mode .logo
{
    background-image: url(/images/moonbrew.svg);
    width: 68%;
 aspect-ratio: 285 / 70;
} 
body.dark-mode header {
    background-color: #301f07;
    color: #f0f0f0;

  }
 body.dark-mode .nav-list {
    background-color: #804D00;
    color: #f0f0f0;
 }
 body.dark-mode a 
{
color:white;
}
body.dark-mode a :visited
{
    color:White
}
 body.dark-mode a :active
 {
    color:black
 }

 body.dark-mode .menu-item
 {
    background-color:black;
 }
 
 body.dark-mode .special-item
 {
 background-color: black;
 }

 body.dark-mode .main-footer
 {
    background-color:#301e03;
 }
}'








/* Styles specifically for screens up to 480px wide (e.g., smartphones) */
    @media only screen and (max-width: 480px) {
        h1 {
            font-size: 20px;
        }

        nav ul li {
            display: block; /* Stack navigation items */
            margin-bottom: 3px;
        }
        .main-header 
{
    background-color:#FFD79B;
    padding-right: 0%;
    width: 100%;
}

.header-content
{
 display: flex;
  flex-direction: column;  
  align-items: center;       
  justify-content: center;    
  text-align: center;         
  padding: 3% 0;             

}

.theme-toggle
{
  position:relative;
  display: grid;
  max-width: fit-content;
  min-width: fit-content;
}

.nav-list
{
    background-color: #BEA78C;
     font-family: "Funnel Display", sans-serif;
     font-size:12pt;
    display:flex;
    align-content:left;
    padding-left: 3%;
    padding-top:.3em;
    padding-bottom:.5em;
    list-style: none;
    grid-template-columns: 10fr 2fr 2fr;
    gap:10%;
}


.menu-container 
{

padding-top: .001%;
Padding-bottom:6%;
}

.menu-item
{
background-color: white;
border-radius: 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align:center;
gap:1%;
width:110%;
height:100%;
}

.menu-grid {
    flex-wrap: wrap;
    justify-content: center;
  }


#coffee 
{
.menu-item:nth-child(1)
{background-image: url(/p1/links/House\ Blend.png);
background-repeat: no-repeat;
background-position-y: 11%;
background-position-x: 8%;
background-size: 14%;}

.menu-item:nth-child(2)
{background-image: url(/p1/links/Ethiopian\ Sunrise.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(3)
{background-image: url(/p1/links/Midnight\ Express.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(4)
{background-image: url(/p1/links/Vanilla\ Bean\ Latte.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(5)
{background-image: url(/p1/links/Caramel\ Macchiato.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(6)
{background-image: url(/p1/links/Cold\ Brew.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}
}

#tea
{.menu-item:nth-child(1)
{background-image: url(/p1/links/Earl\ Grey.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(2)
{background-image: url(/p1/links/Chamomile.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(3)
{background-image: url(/p1/links/Matcha.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(4)
{background-image: url(/p1/links/Tumeric\ Latte.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y:11%;
background-size: 14%;}
}

#pastries
{
.menu-item:nth-child(1)
{background-image: url(/p1/links/Croissant.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y:11%;
background-size: 14%;}

.menu-item:nth-child(2)
{background-image: url(/p1/links/Muffin.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(3)
{background-image: url(/p1/links/Toast.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.menu-item:nth-child(4)
{background-image: url(/p1/links/Cookie.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;} 
}

#specials
{
.special-item:nth-child(1)
{background-image: url(/p1/links/Pumpkin.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.special-item:nth-child(2)
{background-image: url(/p1/links/Scone.png);
background-repeat: no-repeat;
background-position-x: 8%;
background-position-y: 11%;
background-size: 14%;}

.item-name
{
 background-position-x: center;
background-position-y: center;
}
}


.menu-grid
{
padding-top:10%;
padding-right:10%;
max-width: 700px;
margin: 1em;
display: grid;
grid-template-columns: repeat(1, 10fr);
grid-auto-columns: 100px;
grid-gap: 20px;

}



.main-footer 
{

    display:flex;
    padding-left: 2%;
    background-color: #f1d8a3;
    
}

.item-name
{
    padding-top:4%;


   
}

.item-description
{
      font-size: 10pt;
  position:relative;
  margin-top: 5%;
  margin-bottom:2%;
  
  padding-left: 10%;
  padding-right:10%
}

.item-prices
{
    text-align:center;
    text-wrap:balance;
    margin-bottom:2%;
 
}

.price
{
font-size: 10pt;
margin-bottom:10%;
}

.original-price
{
    text-decoration: line-through;
    text-wrap:balance;
    margin-bottom: 10%;
}


.special-item
{

border-radius: 12%;


justify-content: space-around;
text-align:center;
gap:1%;
width:88%;
height:50%;
}




    }