*{  scroll-behavior: smooth;
}

body{ 
 background-color: #C0CCFF;
}

#inicio {
  animation-name: anuariocolor;
  animation-duration: 10s;
  animation-delay: 2s;
  postion: relative;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  }

@keyframes anuariocolor {
  0%{color: #C0CCFF;}
  25%{color: #8FBC8F;}
  50% {color: cadetblue;}
  75%{color: #FFF0F5;}
  100%{color:darkslategray;}
}

#inicio{
  color: #748EFF;
  font-size: 80px;
  font-family: 'Fredoka One', cursive;
  position: absolute;
  left: 300px;
  top: 0px;
}

#volverGrupal {
 position: absolute;
 top: 10px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volverGrupal a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }

#info {
 position: absolute;
 top: 115px;
 left: 350px;
 font-size: 20px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
 }
  
#gif {
 width: 700px;
 position: absolute;
 left: 500px;
 top: 150px;
  }

.botones {
background: #99c1df; 
font-size: 20px; 
color: ghostwhite;
padding: 10px; 
border: 4px solid ghostwhite; 
margin: 30px;
position: absolute;
top: 350px;
}

#botonPerfil {
left: 100px;
  }

#botonPerfil:hover {
 border: 5px dotted #FFD3B6;
 border-radius: 150px;
 padding: 10px;
 transition: ease-in 2s;
}

#botonPerfil a{
  text-decoration: none;
  color: ghostwhite;
}

#botonIllia {
left: 300px;
  }

#botonIllia:hover {
 border: 5px dotted #FFD3B6;
 border-radius: 150px;
 padding: 10px;
 transition: ease-in 2s;
}

#botonIllia a{
  text-decoration: none;
  color: ghostwhite;
}

#botonFuturo {
left: 550px;
  }

#botonFuturo a{
  text-decoration: none;
  color: ghostwhite;
}

#botonFuturo:hover{
 border: 5px dotted #FFD3B6;
 border-radius: 150px;
 padding: 10px;
 transition: ease-in 2s;
}

#botonGaleria {
left: 750px;
  }

#botonGaleria a{
  text-decoration: none;
  color: ghostwhite;
}

#botonGaleria:hover{
 border: 5px dotted #FFD3B6;
 border-radius: 150px;
 padding: 10px;
 transition: ease-in 2s;
}

#botonRandom {
 left: 950px;
  }

#botonRandom:hover {
 border: 5px dotted #FFD3B6;
 border-radius: 150px;
 padding: 10px;
 transition: ease-in 2s;
}

#botonRandom a{
  text-decoration: none;
  color: ghostwhite;
}

#Perfil{
 position: absolute;
 left: 20px;
 top: 1000px;
 color: #748EFF;
 font-size: 50px;
 font-family: 'Fredoka One', cursive;
}

#zonaPerfil{
 position: absolute;
 left: 20px;
 top: 1080px;
 font-size: 19px;
 font-family: 'Patrick Hand', cursive;
 text-align: justify;
 width: 90%;
 color: #DA70D6;
  }

.container {
  position: relative;
  width: 350px;
  margin: 1150px auto;
  perspective: 1000px;
  padding-top: 120px;
}

.rotator {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 55%;
  height: 150px;
  transform-style: preserve-3d;
  animation: roter 50s linear infinite;
}
.rotator:hover {
  animation-play-state: paused;
}
@keyframes roter {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.items {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border: 2px solid #333;
}
.items:hover img {
  transform: scale(1.2);
}
.items img {
  height: 100%;
  width: 100%;
  transition: all 3s ease;
}
.items:first-child {
  transform: rotateY(calc(40deg * 1)) translateZ(300px);
}
.items:nth-child(2) {
  transform: rotateY(calc(40deg * 2)) translateZ(300px);
}
.items:nth-child(3) {
  transform: rotateY(calc(40deg * 3)) translateZ(300px);
}
.items:nth-child(4) {
  transform: rotateY(calc(40deg * 4)) translateZ(300px);
}
.items:nth-child(5) {
  transform: rotateY(calc(40deg * 5)) translateZ(300px);
}
.items:nth-child(6) {
  transform: rotateY(calc(40deg * 6)) translateZ(300px);
}
.items:nth-child(7) {
  transform: rotateY(calc(40deg * 7)) translateZ(300px);
}
.items:nth-child(8) {
  transform: rotateY(calc(40deg * 8)) translateZ(300px);
}
.items:nth-child(9) {
  transform: rotateY(calc(40deg * 9)) translateZ(300px);
}

#volver {
 position: absolute;
 left: 1020px;
 top: 1020px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volver a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }

#Illia {
 position: absolute;
 left: 20px;
 top: 2000px;
 color: #748EFF;
 font-size: 50px;
 font-family: 'Fredoka One', cursive;
  }

#textoIllia {
 position: absolute;
 left: 20px;
 top: 2070px;
 text-align: justify;
 font-size: 20px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
 width: 70%;
}

#fotosCurso {
  position: relative;
  height: 281px;
  width: 450px;
  margin: 0, auto;
}

#fotosCurso img {
  position: absolute;
  left: 30px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#fotosCurso img.top:hover {
  opacity:0;
}

#fotosCurso {
 position: absolute;
 left: 960px;
 top: 2070px;
  }

#volver2 {
 position: absolute;
 left: 1020px;
 top: 2010px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volver2 a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }


#Futuro {
 position: absolute;
 left: 20px;
 top: 2580px;
 color: #748EFF;
 font-size: 50px;
 font-family: 'Fredoka One', cursive;
}

#textoFuturo {
 position: absolute;
 left: 20px;
 top: 2650px;
 text-align: justify;
 font-size: 20px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
 width: 70%;
}


#video {
 position: absolute;
 top: 2820px;
 left: 20px;
}

#fotoLocadelosGatos {
  position: absolute;
  top: 2650px;
  left: 73%;
}

#textoLocadelosGatos {
 position: absolute;
 top: 2880px;
 left: 80%;
 font-size: 20px;
 font-family: 'Patrick Hand', cursive;
 color: #58143F;
}

#volver3 {
 position: absolute;
 left: 1020px;
 top: 2600px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volver3 a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }

#Galeria {
 position: absolute;
 top: 4000px;
 left: 20px;
 color: #748EFF;
 font-size: 50px;
 font-family: 'Fredoka One', cursive;
}

#vida5to {
 position: absolute;
 top: 4070px;
 left: 20px;
 font-size:30px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
}

#fotosvida5to  {
  position: absoulte;
  top: 3600px;
  margin-top: 215%;
  }

#viajeplastica {
 position: absolute;
 top: 4500px;
 left: 20px;
 font-size: 30px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
}

#fotosviajeplastica{
  position: absolute;
  top: 4540px;
  margin-top: 2%;
  }

#volver4 {
 position: absolute;
 left: 1020px;
 top: 4050px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volver4 a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }

#Random {
 position: absolute;
 top: 5500px;
 left: 20px;
 color: #748EFF;
 font-size: 50px;
 font-family: 'Fredoka One', cursive;
}

#logoIG {
position: absolute;
top: 5570px;
left: 20px;
  }

#Instagram {
 position: absolute;
 top: 5570px;
 left:60px; 
 font-size:30px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
  } 

#Instagram a {
  text-decoration: none;
  color: #DA70D6;
  }

#logoSP {
position: absolute;
top: 5620px;
left: 20px; 
  } 

#Spotify {
 position: absolute;
 top: 5610px;
 left: 60px; 
 font-size:30px;
 font-family: 'Patrick Hand', cursive;
 color: #DA70D6;
  }

#Spotify a {
 text-decoration: none;
 color: #DA70D6;
  }

#Playlist1 {
 position: absolute;
 top: 5570px;
 left: 300px;
  }

#Playlist2 {
 position: absolute;
 top: 5570px;
 left: 650px;
  }

#IMG1 {
 position: absolute;
 top: 5570px;
 left: 1000PX;
  }  

#IMG2 {
 position: absolute;
 top: 5750px;
 left: 1000PX;
  }  

#volver5 {
 position: absolute;
 left: 20px;
 top: 5900px;
 color: #748EFF;
 font-size: 25px;
 font-family: 'Fredoka One', cursive;
  }

#volver5 a {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
  color: #748EFF;
  }