@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: #FFD79B;
  --text-color: #000000;
}

a:link 
{
color:black;
}
a:visited
{
    color:black
}
 a:active
 {
    color:white
 }
body
{
     font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin:0;
background-color: #FFF8EE;
}

.logo 
{ 
 background-image: url(/p1/links/moonbeamlogo.svg);
 background-repeat: no-repeat;
 margin: 0;

 text-indent: -1000px;
 width: 30%;
 aspect-ratio: 285 / 70;
 background-size: contain;
}




.main-header 
{
    background-color:#FFD79B;
    width: 100%;
}

.header-content
{
display:flex;
    flex-flow: column wrap;
    align-content: left;
    padding-left: 3%;
    padding-top:3%;

}

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

.nav-list
{
    background-color: #D0B07F;
     font-family: "Zen Kaku Gothic Antique", 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-left: 3%;
padding-top: .001%;
Padding-bottom:6%;
grid-row: auto;
}

.menu-item
{
background-color: white;
border-radius: 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align:center;
gap:20px;
width:300px;
height: 300px;



}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

}



.main-footer 
{
    display:flex;
    Text-align:left;
    padding-left: 2%;
    background-color: #FFD79B;
    flex-direction: column;
}

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

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

.item-prices
{
    text-align:center;
    text-wrap:balance;
 
}

.price
{
font-size: 12pt;
}

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


.specials-container
{

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

}

.special-item
{

background-color: white;
border-radius: 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align:center;
margin-bottom:2%;
margin-top:1.5%;
gap:20px;
width:300px;
height: 300px;
background-image: url(/p1/links/Frame\ 16.png);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
background-size: 30%;

}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.dark-mode
 {
  background-color: #331F01;
color: #FFF8EE;
}
body.dark-mode .logo
{
    background-image: url(/p1/links/Moonbeam\ Dark-Mode.svg);
    width: 30%;
 aspect-ratio: 285 / 70;
} 
body.dark-mode header {
    background-color: #5A3600;
    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:#5A3600;
 }
}




/* 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;
        }
      .logo
      {
width: 70%;
      } 
      body.dark-mode .logo
{
    
    width: 70%;
 aspect-ratio: 285 / 70;
} 
       
        .main-header 
{
    background-color:#FFD79B;
    padding-right: 0%;
    width: 100%;
}

.header-content
{
display:flex;
    flex-flow: column wrap;
    align-content: left;
    padding-left: 3%;
    padding-top:3%;

}

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

.nav-list
{
    background-color: #D0B07F;
     font-family: "Zen Kaku Gothic Antique", 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%;


}

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

.menu-item:nth-child(2)
{background-image: url(/p1/links/Ethiopian\ Sunrise.png);
background-repeat: no-repeat;
background-position-x: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: 5%;
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: #FFD79B;
}

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


   
}

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

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

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

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


.special-item
{

border-radius: 5%;


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


}}