body {
   margin: 0;
   overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

section {    
    height: 100vh;
    filter: brightness(100%);
  
    background-attachment: fixed;
}

section:nth-child(1) {
    background-image: url(https://www.jardineriaon.com/wp-content/uploads/2016/05/azafran-830x553.jpg);
   background-size:cover;
  
}

section:nth-child(2) {
    background-image: url(https://wallpaper.dog/large/20526190.png);
   background-size:cover;
}


section:nth-child(3) {
    background-image: url(https://fondosmil.com/fondo/66151.png);
   background-size:cover;
}

section:nth-child(4){
    background-image: url(https://wallpapercave.com/wp/wp6641086.jpg);
   background-size:cover;
}
section:nth-child(5){
    background-image: url(https://i.pinimg.com/736x/55/1c/db/551cdbad87bc0802cb822b78b599c56f--disney-rapunzel-tangled-rapunzel.jpg); 
   background-size:cover;
  
}

section:nth-child(6){
    background-image: url(https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_toystory_16x9_8461039f.jpeg);
}

H1{
  text-align:center;
 font-family: 'Dancing Script', cursive;
  background-color: #9966ff;
  box-shadow: 2px 4px 10px #330099;
  font-size: 35px;
  margin-top:0%;
}

H1:hover {
  color: #4c00e6;
}

#botonperfil {
  background: rgb(247,150,192);
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute;
  left:37%; 
  width:25%;
  top: 20%;  
  right:75%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
   transition: all 150ms linear;
}

#botonperfil:hover {
    background-color: #bf80ff;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
}

#botonfuturo {
  background-color: #8000ff ;
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute; 
  left:37%;
  width:25%; 
  top: 50%;
  right:50%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
}

#botonfuturo:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  position: absolute; 
  width: 25%;
  right: 50%; 
}

#botonrandom {
  background-color: #5900b3 ;
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute; 
  left:37%;
  width:25%; 
  top: 65%;
  right:50%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
}

#botonrandom:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  text-align: center; 
  position: absolute; 
}

#botongaleria {
  background-color: #330066;
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute; 
  left:37%; 
  width:25%; 
  top: 80%;  
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
}

#botongaleria:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  text-align: center; 
  position: absolute;
  width: 25%; 
}

#botonpaso {
  background-color: #8000ff ;
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute;
  left:25%;
  width:50%;
  top:35%;
  right:50%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
  
}

#botonpaso:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  text-align: center; 
  position: absolute; 
  width: 50%; 
}


#botonvolveraprincipal{
  background-color: #8000ff ;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute;
  left:5%;
  width:15%;
  top:75%;
  right:50%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
  
}

#botonvolveraprincipal:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
}

#botonvolver{
  background-color: #8000ff ;
   background: radial-gradient(circle, rgba(128, 0, 255) 0%, rgba(118,174,241,1) 100%);
  color: white;
  font-size: 25px;
  font-family: 'Staatliches', cursive;
  text-align: center; 
  position: absolute;
  left:5%;
  width:15%;
  top:92%;
  right:50%; 
  border-radius: 5px;
  box-shadow: 2px 4px 10px #330099;
  
}

#botonvolver:hover{
  background-color: #bf80ff;
   background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  color: white;
}


#perfil{
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  background-color: #bf80ff ;
  color: white;
  font-size: 25px;
  box-shadow: 2px 4px 10px #330099;
}

#bloqueperfil{
  margin: 25px auto;
  background-color:hsla(0, 100%, 90%, 0.5);
  padding: 30px;
}
#bloqueperfil2{
  margin: 30px auto;
  background-color:hsla(0, 100%, 90%, 0.5);
  padding: 30px;
}
 
#fotoperfil{
  height:25vh;
  filter: brightness(110%);
  border: 1px solid black;
  float: left;
  margin-right: 15px;
}

#fotopapas{
  height:35vh;
  float: right;
}

p1{
  font-family: 'Gentium Book Plus', serif;
  font-size: 120%;
  line-height: 1.8;
  text-align: right;
}

p2{
  font-family: 'Gentium Book Plus', serif;
  font-size: 120%;
  line-height: 1.8;
  text-align: center;
  background-color:hsla(0, 100%, 90%, 0.5);
  padding: 30px;
   display: block;
  margin-left: auto;
  margin-right: auto;
}


p3{
  font-family: 'Gentium Book Plus', serif;
  font-size: 120%;
  line-height: 1.8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align:justify;
}


#mipasoporelillia{
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  background-color: #bf80ff ;
  color: white;
  font-size: 25px;
  box-shadow: 2px 4px 10px       #330099;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p5{ 
  display: block;
  text-indent: 50px;
  font-family: 'Gentium Book     Plus', serif;
  font-size: 120%;
  line-height: 1.8;
  margin-left: 0%;
  margin-right: 50%;
  margin-top:0%;
  text-align:left;
  background-color:hsla(0,       100%, 90%, 0.3);
  padding: 10px;
  position:absolute;
}

#fotocolegio{
  display: block;
  margin-left: 50%;
  margin-right: 0%;
  margin-top:2%;
  height: auto;
  text-align:right;
  float:right;
  width: 35vw;
  position:absolute;
}

#bloquemipaso{
  margin: 30px auto;
  padding: 30px;
}

#futuro{
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  background-color: #bf80ff ;
  color: white;
  font-size: 25px;
  box-shadow: 2px 4px 10px #330099;
}

p4{
  font-family: 'Gentium Book Plus', serif;
  font-size: 110%;
  background-color:hsla(0, 100%, 90%, 0.3);
  padding: 10px;
  line-height: 1.8;
  color:white;
  display: block;
  text-align: justify;
  text-indent: 55px;
  margin-top: 4%;
}

#fotofuturo{
  height: 60vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid #000000
;
  padding: 10px;
margin-top: 4%;
}

#random{
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  background-color: #bf80ff ;
  color: white;
  font-size: 25px;
  box-shadow: 2px 4px 10px #330099;
}

p6{
   font-family: 'Gentium Book Plus', serif;
  font-size: 110%;
  background-color:hsla(0, 100%, 90%,0.9 );
  padding: 10px;
  line-height: 1.8;
  color:white;
  display: block;
  text-align: center;
  text-indent: 55px;
  margin-top: 4%;
  
}

p7{
   font-family: 'Gentium Book Plus', serif;
  font-size: 110%;
  background-color:hsla(0, 100%, 90%,0.9 );
  padding: 10px;
  line-height: 1.8;
  color:purple;
  display: block;
  text-align: center;
  text-indent: 55px;
  margin-top: 5.2%;
}

ul{
  ont-family: 'Gentium Book Plus', serif;
  font-size: 110%;
  background-color:hsla(0, 100%, 90%, 0.9);
  padding: 10px;
  line-height: 1.8;
  color:purple;
  display: block;
  text-align: center;
  text-indent: 55px;
  margin-top: 5.2%;
}
#galeria{
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  background-color: #9966ff ;
  color: white;
  font-size: 25px;
  box-shadow: 2px 4px 10px #330099;
}


.wrapper {
	width: 100%;
	overflow: hidden;
}
.photobanner {
	position: relative;
	height: 233px;
	margin-bottom: 30px;
	display: flex;
	width: 100%;
}

.photobanner img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

.photobanner {
  animation: bannermove 50s linear infinite alternate-reverse;
   margin-top:15%;
}

@keyframes bannermove {
  from {
    left: 0px;
  }
  to {
    left: -2700px;
  }
}