html {
  scroll-behavior: smooth;
}
body{ background-color:lightgoldenrodyellow;
  
}
.subir{ text-align:right;
  position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
    z-index:2;
}
.volver{ text-align:left;
  position: absolute;
  top: 5%;
    bottom: 0;
    left: 0;
    margin-left: 5px;
    margin-bottom: 0px;
    z-index:2;
}
#zona1{font-family: 'Staatliches', cursive;
  background-color:lightgoldenrodyellow;
  font-size: 3.35vw;
  text-align: center;
  color: lightcoral;
  text-shadow: 1px 1px 1px darkred;
  position: absolute; width: 16%; top: 0%;  right: 84%; }
#zona1:hover{font-family: 'Staatliches', cursive;
  background-color:lightcoral;
  font-size: 3.35vw;
  text-align: center;
  color: darkred;
  text-shadow: 1px 1px 1px #4d0000;
  position: absolute; width: 16%; top: 0%;  right: 84%; 
}
#zona2{font-family: 'Staatliches', cursive;
  background-color:lightgoldenrodyellow;
  font-size: 3.35vw;
  text-align: center;
  color: gold;
  text-shadow: 1px 1px 1px orangered;
  position: absolute; width: 35%; top: 0%;  right: 49%;
}
#zona2:hover{font-family: 'Staatliches', cursive;
  background-color:gold;
  font-size: 3.35vw;
  text-align: center;
  color: orangered;
  text-shadow: 1px 1px 1px #cc2900;
  position: absolute; width: 35%; top: 0%;  right: 49%; 
}
#zona3{font-family: 'Staatliches', cursive;
  background-color:lightgoldenrodyellow;
  font-size: 3.35vw;
  text-align: center;
  color: yellowgreen;
  text-shadow: 1px 1px 1px darkolivegreen;
  position: absolute; width: 16%; top: 0%;  right: 33%; 
}
#zona3:hover{font-family: 'Staatliches', cursive;
  background-color: yellowgreen;
  font-size: 3.35vw;
  text-align: center;
  color: darkolivegreen;
  text-shadow: 1px 1px 1px #1a3300;
  position: absolute; width: 16%; top: 0%;  right: 33%; 
}
#zona4{font-family: 'Staatliches', cursive;
  background-color:lightgoldenrodyellow;
  font-size: 3.35vw;
  text-align: center;
  color: lightsteelblue;
  text-shadow: 1px 1px 1px navy;
  position: absolute; width: 16%; top: 0%;  right: 17%; 
}
#zona4:hover{font-family: 'Staatliches', cursive;
  background-color:lightsteelblue;
  font-size: 3.35vw;
  text-align: center;
  color: navy;
  text-shadow: 1px 1px 1px #000033;
  position: absolute; width: 16%; top: 0%;  right: 17%; 
}
#zona5{font-family: 'Staatliches', cursive;
  background-color:lightgoldenrodyellow;
  font-size: 3.35vw;
  text-align: center;
  color: orchid;
  text-shadow: 1px 1px 1px purple;
  position: absolute; width: 17%; top: 0%;  right: 0%; 
}
#zona5:hover{font-family: 'Staatliches', cursive;
  background-color:orchid;
  font-size: 3.35vw;
  text-align: center;
  color: purple;
  text-shadow: 1px 1px 1px #4d004d;
  position: absolute; width: 17%; top: 0%;  right: 0%; 
}

#perfil{ font-family: 'Staatliches', cursive;
text-align:center;
  color:lightcoral;
  font-size:5.3vw;
  text-shadow: 1px 1px 1px darkred;
  background-color:#ffcccc;
  box-shadow: 1px 1px 2px lightcoral;}
.texto1{font-family: 'PT Sans Narrow', sans-serif;
  color:lightcoral;
  text-shadow: 0.5px 0.5px 1px darkred;
  font-size:3vw;
  
  }
.parrafo1{font-family: 'PT Sans Narrow', sans-serif;
  color:lightcoral;
  text-shadow: 0.5px 0.5px 1px darkred;
  font-size:35px;
  margin:15px;
  }
.video{text-align:center;
}
#fotoperfil{
  float:right;
  margin:10px;}
#iconos{float:left;
}
#redes{font-family: 'PT Sans Narrow', sans-serif;
  color:lightcoral;
  text-shadow: 0.5px 0.5px 1px darkred;
  font-size:45px;
  background-color:#ffcccc;
  width:100%;
  box-shadow: 1px 1px 2px lightcoral;
  text-align:center;
 
  }
#luochoa{font-family: 'PT Sans Narrow', sans-serif;
  color:lightcoral;
  text-shadow: 0.5px 0.5px 1px darkred;
  font-size:48px;
  
}

#mipaso{ font-family: 'Staatliches', cursive;
text-align:center;
  color:gold;
  font-size:70px;
  text-shadow: 1px 1px 1px orangered;
  background-color:#ffff99;
  box-shadow: 1px 1px 2px gold;}
.anios{ font-family: 'PT Sans Narrow', sans-serif;
  text-align:center;
  color:gold;
  font-size:45px;
  text-shadow: 1px 1px 1px orangered;
  background-color:#ffff99;
  box-shadow: 1px 1px 2px gold;
 width: 19%; margin-top:10px;
  margin-left: 10px;
  border-radius: 10px;
}
.texto2{font-family: 'PT Sans Narrow', sans-serif;
  color:gold;
  text-shadow: 0.5px 0.5px 1px orangered;
  font-size:35px;
margin:15px;

}
#fotosprimero{float:right;
  margin-top:10px;
  margin-right:10px;

}
#fotossegundo{text-align:center;
  
}
#fotostercero{ float:right;
  
}
#cuarto{font-family: 'PT Sans Narrow', sans-serif;
  color:gold;
  text-shadow: 0.5px 0.5px 1px orangered;
  font-size:35px;
margin:15px;
}
#fotoscuarto{ text-align:center;
  
}
#fotossexto{ text-align:center;
  
}

#galeria{ font-family: 'Staatliches', cursive;
text-align:center;
  color:yellowgreen;
  font-size:70px;
  text-shadow: 1px 1px 1px darkolivegreen;
  background-color:#d9ffb3;
  box-shadow: 1px 1px 2px yellowgreen;
margin-top:7px;}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 700px;
  margin: 0 auto;
  transition: all 150ms linear;
  margin-top:15px;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid yellowgreen;
}

#futuro{ font-family: 'Staatliches', cursive;
text-align:center;
  color:lightsteelblue;
  font-size:70px;
  text-shadow: 1px 1px 1px navy;
  background-color:#e6eeff;
  box-shadow: 1px 1px 2px lightsteelblue;}
#fotofuturo{ float:left;
  width:;
  
}
#texto3{font-family: 'PT Sans Narrow', sans-serif;
  color:lightsteelblue;
  text-shadow: 0.5px 0.5px 1px navy;
  font-size:40px;
text-align:right;
margin-top:10px;}

 #random{ font-family: 'Staatliches', cursive;
text-align:center;
  color:orchid;
  font-size:70px;
  text-shadow: 1px 1px 1px purple;
  background-color:#f5ccff;
  box-shadow: 1px 1px 2px orchid;}
#texto4{font-family: 'PT Sans Narrow', sans-serif;
  color:orchid;
  text-shadow: 0.5px 0.5px 1px purple;
  font-size:45px;
text-align:center;}

  
#musica{ float:right;
  margin-right:5px;
}
#musica2{ float:left;
  margin-right:5pxp;
}
.bordados
img{ box-shadow:1px 1px 1px #f5ccff;
  
}
.bordados
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.1,1.1);
  
;}
#fotofuturo
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.05,1.05); }
#fotosprimero
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.03,1.03); }
#fotossegundo
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.03,1.03); }
#fotostercero
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.03,1.03); }
#fotoscuarto
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.03,1.03); }
#fotossexto
img:hover{
   transition:all 0.5s ease;
  transform: scale(1.03,1.03); }
.anios:hover{
   transition:all 0.5s ease;
  transform: scale(1.05,1.05); }
#fotoperfil:hover{
  transition:all 0.5s ease;
  transform: scale(1.05,1.05);
}