* {
    margin: 0;
      box-sizing: border-box;
      padding: 0;
    font-family: 'Architects Daughter', cursive;
  }
  /* body */
  body {
    background: url(../IMAGENES/fondo2.png);
    background-size:cover;
    background-attachment:fixed;
  }
  
  /* header */
  
  .header {
    background-color: #cae7ed;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    z-index: 100;
    position:fixed;
    top:0px;
  }
  
  .header ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #cae7ed;
  }
  
  .header li a {
    display: block;
    padding: 2% 2%;
    border-right: 1% solid #cae7ed;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #90bec8;
  }
  
  .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: black;
    display: block;
    height: 2px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: black;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
  }
  /* título h1 */
  h1 {
    text-align: center;
    font-weight: 900;
    background-color: #cae7ed;
    border-color: #97513e;
    border-width: 10px;
    border-style: outset;
    margin: 2%;
    margin-top: 12vh;
    padding: 10px;
    font-size:250%
  }
  /* títulos h2 */
  
  h2 {
    font-weight: 900;
    background-color:#cae7ed;
    border-color: #97513e;
    border-width: 10px;
    border-style: outset;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    font-size: xx-large;
  }
  
  /*división del párrafo de la presentación y la imagen*/
  .division1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  
  .parrafo {
    box-sizing: border-box;
    margin: 15px;
    border: 3px;
    border-style: groove;
    padding: 10px;
    text-align: justify;
    font-weight: 900;
    font-size: x-large;
    width: 500px;
    height: auto;
    background-color:#cae7ed;
    border-color: #97513e;
  }
  
  .imagen1 {
    max-width: 70vw;
    max-height: 70vh;
    border-color: #97513e;
    border-width: 10px;
    border-style: outset;
    margin:0%;
    margin-bottom: 10vh;
    padding: 0px;
  }
  
  /* division de la galeria de imagenes */
  
  .division2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  
  /* Galeria Copiada de Codepen */
  
  .gallery-image {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .gallery-image img {
    height: 250px;
    width: 350px;
    transform: scale(1.0);
    transition: transform 0.4s ease;
  }
  
  .img-box {
    box-sizing: content-box;
    margin: 10px;
    height: 250px;
    width: 350px;
    overflow: hidden;
    display: inline-block;
    color: white;
    position: relative;
    background-color: white;
    background-color: #cae7ed;
    border-color: #97513e;
    border-width: 10px;
    border-style: outset;
    margin: 2%;
    margin-top: 12vh;
  }
  
  .caption {
    position: absolute;
    bottom: 5px;
    left: 20px;
    opacity: 0.0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .transparent-box {
    height: 250px;
    width: 350px;
    background-color:rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 0.3s ease;
  }
  
  .img-box:hover img { 
    transform: scale(1.1);
  }
  
  .img-box:hover .transparent-box {
    background-color:rgba(0, 0, 0, 0.5);
  }
  
  .img-box:hover .caption {
    transform: translateY(-20px);
    opacity: 1.0;
  }
  
  .img-box:hover {
    cursor: pointer;
  }
  
  .caption > p:nth-child(2) {
    font-size: 0.8em;
  }
  
  .opacity-low {
    opacity: 0.5;
  }
  
  /* sección datos personales */
  
  .division3 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding-top: 2%;
  padding-bottom: 2%;
  }
  
  /* Division de redes sociales */
  
  .social-bar {
      position:relative;
      top: 35%;
      font-size: 5rem;
      padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
      z-index: 90;
  }
  
  
  .icon:hover {
    transform: translateY(-20px);
  }
  
  /* sección viendo al futuro */
  
  .division4 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  
  .profesor {
    max-width: 90vw;
    max-height: 60vh;
    border-color: #97513e;
    border-width: 10px;
    border-style: outset;
    margin:0%;
    margin-bottom: 10vh;
    padding: 0px;
  }
  /* footer */
  
  .footer {
    background-color: #cae7ed;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    bottom:0px;
    box-sizing: border-box;
    border: 5px;
    border-style: groove;
    font-weight: 900;
    font-size: large;
    border-color: #97513e;
  }

  /* arrow-up */
  
  #arrowup {
    position : fixed ;
    bottom : 10px ;
    right : 10px ;
    border-radius: 5px;
  }