body {
    font-family: Arial, sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    background-color:darkgray;
  }
  h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    color: rgb(221, 233, 247);
    background-color:black;
    padding: 3px;
  }
  h2 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 30px;
    color: rgb(221, 233, 247);
    background-color:rgb(22, 6, 34);
    padding: 3px;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
    
  .containerhead{
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color:cornflowerblue;
    text-align: center;
  }
  .container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    text-align: center;
    align-items: flex-start;
    
  }
  .containerfooter {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color:cadetblue;
    text-align: center;
  }
  table {
    width: 90%;
    padding: 15px;
    margin: 5px;
    background-color:aliceblue;
    border-style:none
    
  }

  /* Media Query para tablets (pantallas entre 768px y 1024px) */
  @media (max-width: 1024px) {
    .container {
      width: 90%;
      padding: 15px;
    }
  
    body {
      font-size: 16px;
    }
   
  }
  
  /* Media Query para móviles (pantallas hasta 767px) */
  @media (max-width: 767px) {
    .container {
      width: 95%;
      padding: 10px;
      background-color: yellowgreen;
    }
  
    body {
      font-size: 14px;
    }
  
    h1 {
      font-size: 25px;
    }
    h2 {
      font-size: 20px;
    }
    nav {
      display: none; /* ocultar menú en móvil si es necesario */
    }
  }