*{
  margin: 0;
  padding: 0;
}
body{
  background-color: black;
   margin-right: 3vw;
  margin-left: 3vw;
}
.home{
  margin: 0.5vw 2vw 1vw 1vw;
  font-size: 1.5vw;
}
#home{
  text-decoration: none;
  background-color: black;
  color: #f0f0e6;
  border: 0.2vw solid gray;
  border-radius: 25px;
  padding: 0.2vw 4.3vw;
}
#home:hover{
  background-color: #d1e1b6;
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
}
.botones{
  display: flex;
  align-items: center;
  font-family: 'Amatic SC', cursive;
  font-size: 1.8vw;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
}
.botones li{
  display: inline-block;
  margin: 1vw;
}
.botones li a{
  text-decoration: none;
}
#boton1{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  padding: 0.3vw 6vw;
}
#boton2{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  padding: 0.3vw 3.9vw;
}
#boton3{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  padding: 0.3vw 6vw;
 }
#boton4{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  padding: 0.3vw 6vw;
}
#boton5{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  padding: 0.3vw 6vw;
}
#boton1:hover {
  background-color: #d1e1b6; 
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
  cursor: pointer;
}
#boton2:hover {
  background-color: #d1e1b6; 
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
  cursor: pointer;
}
#boton3:hover {
  background-color: #d1e1b6; 
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
  cursor: pointer;
}
#boton4:hover {
  background-color: #d1e1b6; 
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
  cursor: pointer;
}
#boton5:hover {
  background-color: #d1e1b6; 
  color: #214230;
  border: 3px solid #8cc38d;
  transition-duration: 0.8s;
  cursor: pointer;
}
#illia{
  border-radius: 8px;
  border: 0.2vw solid #d1e1b6;
  margin: 1.8vw;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
}
.titulos{
  font-family: 'Amatic SC', cursive;
font-size: 2.5vw;
color: #214230; 
text-align: center;
background-color: #d1e1b6; 
border: 0.3vw solid #8cc38d;
border-radius: 25px; 
}
.textos{
font-size: 1.8vw;
font-family: 'Amatic SC', cursive;
color: white;
text-align: left;
line-height: 3.3vw;
margin-left: 2vw;
margin-top: 1vw;
}
#avatar{
  float: right;
  margin-left: auto;
  margin-right: 1vw;
  margin-top: 1.5vw;
  border-radius: 50%;
  border: 0.2vw solid #d1e1b6;
  width: 10.5%;
  max-width: 100%;
  height: auto;
}
.videos{
  margin-left: 30vw;
  border-radius: 8px;
  border: 0.2vw solid #d1e1b6;
  width: 33vw;
  height: 18vw;
  max-width: 100%;
 }
.redes{
  display: flex;
  align-items: center;
  justify-content: center;  
}
.redes ul li{
  display: inline-block;
  margin: 0 10vw;
}
.tamano{
  width: 4vw;
  height: 4vw;
}
#instagram:hover{
  filter: blur(2px);
}
#youtube:hover{
  filter: blur(2px);
}
#pinterest:hover{
  filter: blur(2px);
}
#paso{
  margin-top: 2vw;
}
/* galeria de fotos*/
.fotos{
  width: 100%;
  margin-top: 1vw;
  list-style: none;
  padding: auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fotos li{
  margin: 0.1vw;
}
.fotos img{
  width: 20vw;
  height: auto;
  border-radius: 8px;
  border: 0.2vw solid #d1e1b6;
}
/* abrir la foto en la galeria*/
.abrir{
  display:none;
}
.abrir:target{
  display: block;
  position: fixed;
  background: rgba(0,0,0,0.9);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* titulo*/
.abrir h3{
  background-color: #8cc38d;
  color: #f0f0e6;
  border: 0.2vw solid #d1e1b6;
  border-radius: 25px;
  font-size: 1.6vw;
  padding: 0.4vw;
  margin: 1vw 41vw;
  text-align: center;
}
/* abrir imagen*/
.imagen{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 2vw;
}
/* flechitas*/
.imagen a{
  color: #f0f0e6;
  text-decoration: none;
  margin: 0 1vw;
  font-size: 5vw;
  display: flex;
  align-items: center;
}
/* propiedades de la imagen*/
.imagen img{
  width: 50vw;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  border: 0.2vw solid #d1e1b6;
}
.cerrar{
  color: #f0f0e6;
  display: flex;
  font-size: 3vw;
  margin: 3vw auto;
  justify-content: center;
  text-decoration: none;
}
#foto2{
  width: 9vw;
  height: auto;
}
#foto3{
  width: 15vw;
  height: auto;
}
#foto4{
  width: 17vw;
  height: auto;
}
#foto5{
  width: 16vw;
  height: auto;
}
/* futuro*/
#fotofuturo{
  border-radius: 8px;
  border: 0.2vw solid #d1e1b6;
  margin: 1.8vw;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
}
/* boton para volver*/
.volver {
  font-size: 3vw;
  color: #d1e1b6;
  text-decoration: none;
  position: fixed;
  right: 1.5vw;
  bottom: 1vw;
}
/*seccion random*/
.marquee{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
  margin: 0 20vw 0 20vw;
  border: 0.2vw solid #d1e1b6;
  border-radius: 8px;
}
.contenido{
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling 40s linear infinite;
}
.contenido:hover {
  animation-play-state: paused;
}
/*animacion*/
@keyframes scrolling{
  0% {transform:translateX(180vw);}
  100% {transform:translateX(-180vw);}
}
.contenido li{
  display: flex;
  justify-content: center;
  align-items: center; 
}