html{
  scroll-behavior:smooth;
}

body { 
  background-color: #dab3ff;
 }

#paginadeinicio{
  width: 100vw;
  margin-top:10vw; 
  right: 100vw;
 }

.css-boton a { 
  text-decoration:none;
  color: black; 
  margin-top: 10px;
 }

#perfil{
  font-family: 'Crimson Text', serif;
  font-size: 3vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; width: 16vw; top: 9vw;  left: 0vw;
}

#fotos{ 
  font-family: 'Crimson Text', serif;
  font-size: 3vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; 
  width: 35vw; 
  top: 9vw;  
  right: 57vw; 
}

#colegio{
  font-family: 'Crimson Text', serif;
  font-size: 3vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; 
  width: 16vw; 
  top: 9vw;  
  right: 49vw;
}

#futuro{
  font-family: 'Crimson Text', serif;
  font-size: 3vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; 
  width: 16vw; 
  top: 9vw;  
  right:30vw;   
}

#random{ 
  font-family: 'Crimson Text', serif;
  font-size: 3vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; 
  width: 17vw; 
  top: 9vw;  
  right: 10vw;
}
#random2{ 
  font-family: arial;
  font-size: 2vw;
  text-align: center;
  color:#603808;
  text-shadow: 0.15vw 0.15vw 0.15vw #EAAF70;
  position: absolute; 
  width: 17vw; 
  top: 13vw;  
  right: 10vw;
}

h1{ 
  text-align: center;
  color: black;
  font-family: 'Dela Gothic One', cursive;
  background-color: #e6ccff;
  font-size: 4vw;
  position: relative; 
  top: 0vw;   
  }

#zonaperfil{
  margin-top:10%;
}

#textoperfil1{
  font-family:'Roboto slab', serif;
  font-size: 2vw;
  text-align: justify;
  color:#1A3038;
  position: absolute;
  right: 20px;
  width: 780px;
  border: 4px solid #ffb3ff;
  padding: 4px;
  top:330px;
  margin-top: 7%;
}

#zonafotos{
  margin-top:22%;
}

#fotosgaleria { 
  text-align: center; 
}

#textocolegio { 
  text-align: center;
  color: #990099;
  font-family: 'Amatic SC', cursive;
  background-color: #e6ccff;
  font-size: 5vw;
  position: relative; 
  top: 0vw;
}

#fotosillia1{ 
  text-align: center; 
}

#titulofuturo {
  font-family: 'Amatic SC', cursive ;
  font-size:4vw;
  color:#660066;
  text-shadow: 0.15vw 0.15vw 0.15vw;
  text-align: center;
  margin-bottom: 55px;
}
#textofuturo { 
  font-family:'Roboto slab', serif;
  font-size: 2vw;
  text-align: center;
  color:#1A3038;
  border-style: solid;
  border-color: #ffb3ff;
  padding: 4px;
  right: 120px;
  width: 950px;
  margin-bottom: 5px;
  margin-top: 15px;
  margin-left: 350px;
}
#fotosfuturo{ 
  position: absolute; 
  width: 20vw; 
  top: 2210vw;  
  right:30vw; 
  }

#fotosfuturo2{ 
  position: absolute; 
  width: 20vw; 
  top: 2080vw;  
  right:5vw;
  
}

#fotosfuturo3{ 
  position: absolute; 
  width: 10vw; 
  top: 2250vw;  
  right:30vw;  
}

#zonarandom{ 
  margin-top:20%;
}

#textorandom { 
  font-family: 'Amatic SC', cursive ;
  cursive;
  font-size:3vw;
  color:#660066;
  text-shadow: 0.15vw 0.15vw 0.15vw;
  text-align: center;
  margin-bottom: 5px;
}
#playlist{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-left: 150px;
}
.subir{
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 15px;
  margin-bottom: 10px;
  z-index:2;
}