:root{
    --pr-color:#287e00;
    --sec-color:#c30000;
    --backgr-color:#272525;
    --text-size: 1.5rem;
}

body{
    background-image: url(https://static.vecteezy.com/system/resources/thumbnails/000/682/280/small/red-green-christmas-themed-gradient-wavy-wallpaper.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.name{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 90px;
    text-shadow: 
    -1px -1px 0 white,
    -1px 1px 0 white;    
}

.img{
    width: 500px;
    padding: 20px;
    border: 5px solid black;
    border-radius: 20px;
}

.nav{
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    position:fixed;
    right:0;
}

.nav a{
    margin: 10px;
    padding: 10px;
    text-decoration: none;
    color: white;
    display: inline-block;
    
    
}

.nav a:hover{
    background-color: green;
    
}

.cite{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 40px;
     text-shadow: 
    -1px -1px 0 rgb(173, 0, 0),
    -1px 1px 0 rgb(40, 150, 0); 
    text-align: center;
}

.welcome{
    font-size: 45px;
    text-shadow: 
    -1px -1px 0 rgb(255, 183, 0),
    -1px 1px 0 rgb(7, 149, 0);
}

.question{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(255, 255, 255),
    1px -1px 0 white;
    border: 5px outset #ff0000;
    border-radius: 20px;
    padding: 2px;
}

.menu{
    font-size: 50px;
     text-shadow: 
    -1px -1px 0 rgb(173, 0, 0),
    -1px 1px 0 rgb(40, 150, 0);
    text-align: center; 
}

.barbacoa{
    font-size: 40px;
    color: var(--sec-color);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.enchilada{
    font-size: 40px;
    color: rgb(255, 60, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.cochinitapibil{
    font-size: 40px;
    color: rgb(255, 208, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.guacamole{
    font-size: 40px;
    color: rgb(48, 204, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.burritos{
    font-size: 40px;
    color: rgb(0, 208, 255);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.chilesnogada{
    font-size: 40px;
    color: rgb(75, 0, 204);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.coposduas{
    font-size: 40px;
    color: #9200f4;
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.coco{
    font-size: 40px;
    color: #f836ff;
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.milo{
    font-size: 40px;
    color: #ff00c8;
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}
article{
    font-size: 18px;
    padding: 3px;
}

.price{
     font-size: 30px;
    color: rgb(204, 187, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.money{
     font-size: 25px;
    color: rgb(0, 0, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
}

.footer{
    font-size: 20px;
    color: rgb(0, 0, 0);
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(0, 0, 0);
    text-align: center;
}

.sec{
    font-size: 50px;
     text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),
    -1px 1px 0 rgb(255, 255, 255);
    text-align: center; 
    border: 5px outset rgb(255, 0, 0);
    border-radius: 10px;
}

@media (max-width: 750px) {

    /* Títulos principales */
    .name {
      font-size: 40px;
      text-align: center;
    }
  
    .cite {
      font-size: 18px;
      text-align: center;
    }
  
    /* Bienvenida y menú */
    .welcome h2,
    .menu,
    .sec {
      font-size: 25px;
      text-align: center;
    }
  
    .question {
      font-size: 18px;
      text-align: center;
    }
  
    /* Navegación en fila horizontal */
    .nav {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 5px;
      padding: 10px 0;
    }
  
    .nav a {
      font-size: 14px;
      padding: 6px 10px;
    }
  
    /* Imágenes */
    .img {
      width: 90%;
      max-width: 300px;
      display: block;
      margin: 10px auto;
      border-radius: 10px;
    }
  
    /* Platos y precios */
    .barbacoa,
    .enchilada,
    .cochinitapibil,
    .guacamole,
    .burritos,
    .chilesnogada,
    .coposduas,
    .coco,
    .milo {
      font-size: 22px;
      text-align: center;
    }
  
    article {
      font-size: 16px;
      padding: 0 10px;
      text-align: justify;
    }
  
    .price {
      font-size: 18px;
      text-align: center;
    }
  
    .money {
      font-size: 20px;
      text-align: center;
    }
  
    /* Footer */
    .footer h3 {
      font-size: 14px;
      text-align: center;
    }
  }