@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&family=Patrick+Hand&family=Silkscreen&display=swap');


/* Estilos generales */

* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   .logo img{
       width: 60%;
       padding: 80px;
   }

   h1 {
       text-align: center;
   }
   
   main {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 40px;
       padding: 1%;
       justify-items: center;
   }
   
   .image-container {
       display: flex;
   }
   
   .image-container img {
       width: 100%;
   }
   
   article {
       background-color: rgb(0, 177, 200);
    box-shadow: rgb(9,252,110) 2px 2px 13px 19px;
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(17, 16, 16);
    border-image: initial;
    border-radius: 5px;
    margin: 10px;
   }

   h2 {
       padding: 15px;
       font-family: Patrick Hand;
   }

   body{
       text-align: center;
       background-image: url(./img/fondo.jpg);
       background-color: black;
       
}
   button{
       color: rgb(0, 177, 200);
    box-shadow: rgb(9,252,110) 2px 2px 5px 7px;
    padding: 1px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-family: Patrick Hand;
    font-size: 20px;

       
   }
     select{
       color: rgb(0, 177, 200);
    box-shadow: rgb(9,252,110) 2px 2px 5px 7px;
    padding: 1px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-family: Patrick Hand;
    font-size: 20px;
    text-align: center;

     }
   
     .footer{
    font-family: Patrick Hand;
    color: #fff;
    padding: 51px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
     }

   /* Estilos para dispositivos móviles */
   
   @media (max-width: 767px) {
       main {
           grid-template-columns: 1fr;
       }

       .logo img{
              width: 100%;
              padding: 80px;
          }
   }