@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');
html, body {
    margin: 0;
    padding: 0;
    overflow: auto;

}
@media screen and (min-width: 720px) {

header {
    background-color:  rgb(13, 22, 77);
    height: 10vh;
    width: 100vw;
    position: fixed;
    top: 0vh;
    left: 0vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    font-family: "Playpen Sans", cursive;
    font-size: 160%;
   color: aliceblue;
}
nav {
    background-color:  rgb(13, 22, 77);
    height: 10vh;
    width: 100vw;
    position: fixed;
    top: 10vh;
    left: 0vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    }
.button {
    background-color: #e5e8fa;
    border: none;
    border-radius: 8px; /*forma redonda en los bordes*/
    color: rgb(0, 0, 0);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none; /*subrrayado boton*/
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; /*se pone manito arriba*/ 
  }
  main {
    background-color: rgb(255, 255, 255);
    width: 100vw;
    height: 75vh;
    position: fixed;
    left: 0vw;
    top: 15vh;
    overflow: auto;
    margin-bottom: 40%;
  }
  h1 {
    font-family: "Playpen Sans", cursive;
    font-size: 20px;
    margin-top: 5%;
    margin-right: 25%;
    margin-left: 25%;
    text-align: justify;
  }
  div.gallery {
    margin: 5px;
    float: left;
    width: 180px;
    margin-left: 5.5%;
  }
  
  div.gallery:hover {
    opacity: 0.2;


  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }

h2 {
    font-family: "Playpen Sans", cursive;
    font-size: 20px;
    margin-top: 25%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: justify;
}
h3 {
    font-family: "Playpen Sans", cursive;
    font-size: 20px;
    margin-top: 30%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: justify;
}
h4 { 
    font-family: "Playpen Sans", cursive;
    font-size: 45px;
    margin-top: 15%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: justify;
    text-align: center;
}
p {
    font-family: "Playpen Sans", cursive;
    font-size: 20px;
    margin-top: 0.2%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: justify;
}
div.polaroid {
    width: 165px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    float: left;
    margin: 1%;
    
    
  }
  
  div.container {
    text-align: center;
    font-size: 100%;
  }
  p2 {
    font-family: 'Courier New', Courier, monospace;
  }
  footer {
    background-color: rgb(255, 255, 255);
    width: 100vw;
    height: 10vh;
    position: fixed;
    left: 0vw;
    top: 15vh;
    overflow: auto;
    margin-bottom: 40%;
  }
}
  
  @media screen and (max-width: 720px) {
    header {
      background-color:  rgb(13, 22, 77);
      height: 10vh;
      width: 100vw;
      position: fixed;
      top: 0vh;
      left: 0vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 100;
      font-family: "Playpen Sans", cursive;
      font-size: 160%;
     color: aliceblue;
  }
    nav {
        background-color:  rgb(13, 22, 77);
        height: 20vh;
        width: 100vw;
        position: fixed;
        top: 0vh;
        left: 0vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 100;
        }
    .button {
        background-color: #5e50af;
        border: none;
        border-radius: 8px; /*forma redonda en los bordes*/
        color: rgb(0, 0, 0);
        padding: 5px 2px;
        text-align: center;
        text-decoration: none; /*subrrayado boton*/
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer; /*se pone manito arriba*/ 
      }
      main {
        background-color: rgb(141, 128, 189);
        width: 100vw;
        height: 75vh;
        position: fixed;
        left: 0vw;
        top: 15vh;
        overflow: auto;
      }
      h1 {
        font-family: "Playpen Sans", cursive;
        font-size: 20px;
        margin-top: 45%;
        margin-right: 25%;
        margin-left: 25%;
        text-align: justify;
      }
      div.gallery {
        margin: 5px;
        float: left;
        width: 180px;
        margin-left: 5.5%;
        
    }
      div.gallery:hover {
        opacity: 0.2;
      }
      
      div.gallery img {
        width: 100%;
        height: auto;
      }
    
    h2 {
        font-family: "Playpen Sans", cursive;
        font-size: 20px;
        margin-top: 355%;
        margin-left: 25%;
        margin-right: 25%;
        text-align: justify;
    }
    h3 {
        font-family: "Playpen Sans", cursive;
        font-size: 20px;
        margin-top: 355%;
        margin-left: 25%;
        margin-right: 25%;
        text-align: justify;
    }
    h4 { 
        font-family: "Playpen Sans", cursive;
        font-size: 50px;
        margin-top: 15%;
        margin-left: 25%;
        margin-right: 25%;
        text-align: justify;
        text-align: center;
    }
    p {
        font-family: "Playpen Sans", cursive;
        font-size: 20px;
        margin-top: 0.2%;
        margin-left: 25%;
        margin-right: 25%;
        text-align: justify;
    }
    div.polaroid {
        width: 250px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        float: left;
        margin: 1%;
        
      }
      
      div.container {
        text-align: center;
        font-size: 100%;
      }
      p2 {
        font-family: 'Courier New', Courier, monospace;
      }
      footer {
        background-color: rgb(141, 128, 189);
        width: 100vw;
        height: 10vh;
        position: fixed;
        left: 0vw;
        top: 15vh;
        overflow: auto;
      }
  }