html{
  scroll-behavior: smooth;
}

body{
  background-color: #D1D1D1;
}

#img1{
  width: 25vw;
  position: relative;
  top: 5vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h3{
  position: absolute;
  top: 55vh;
  width: 100vw;
  text-align: center;
}

#password{
  border: 2px solid black;
  position: absolute;
  padding: 10px;
  margin-left: 36%;
  margin-right: 38%;
  background-color: #B8AFBD;
  border-radius: 1.2vw;
  top: 65vh;
  width: 25vw;
}

#password:hover{
  border: 2px solid black;
  box-shadow: 8px 8px 80px darkgray;
  border-radius: 2vw;
}

#contra{
  border: 2px solid black;
  position: absolute;
  padding: 10px;
  margin-left: 36%;
  margin-right: 38%;
  background-color: #B8AFBD;
  border-radius: 1.2vw;
  top:75vh;
  width: 25vw;
}

#contra:hover{
  border: 2px solid black;
  box-shadow: 8px 8px 80px darkgray;
  border-radius: 2vw;
}

#zona2{
  top: 100vh;
  height: 100vh;
  position: absolute;
  background-image: url("https://colorate.azurewebsites.net/SwatchColor/D1D1D1");
}

#img2{
  width: 25vw;
  position: relative;
  top: 90vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h1{
  position: absolute;
  top: 200vh;
  width: 100vw;
  text-align: center;
}

a{
  background-color: #B8AFBD;
  text-decoration: none;
  color: #D1D1D1;
  border-radius: 15%;
  text-align: center;
  font-size: 5vw;
}

#perfil{
  position: absolute;
  top: 210vh;
  left: 5%;
  width: 4vw;
}

#foto{
  position: absolute;
  top: 210vh;
  left: 22%;
  width: 4vw;
}

#cole{
  position: absolute;
  top: 210vh;
  left: 40%;
  width: 4vw;
}

#futuro{
  position: absolute;
  top: 210vh;
  left: 62%;
  width: 4vw;
}

#random{
  position: absolute;
  top: 210vh;
  left: 80%;
  width: 4vw;
}

#volver{
  position: absolute;
  top: 230vh;
  left: 80%;
  font-size: 15px;
}

#zona3{
  top: 250vh;
  height: 100vh;
  position: absolute;
}
#volver2{
  position: fixed;
  top: 80%;
  left: 90%;
  width: 1vw;
}
#img3{
  width: 25vw;
  position: relative;
  top: 180vh;
  display: block;
  margin-left: 7vw;
  border-radius: 50%;
}

h2{
  position: absolute;
  top: 250vh;
  width: 100vw;
  text-align: center;
  font-size: 5vw;
}

#uno{
  position: absolute;
  top: 280vh;
  width: 100vw;
  text-align: center;
  font-size: 2vw;
  left: 25%; 
}
#dos{
  position: absolute;
  top: 295vh;
  width: 100vw;
  text-align: center;
  font-size: 2vw;
  left: 40%;
}

#tres{
  position: absolute;
  top: 295vh;
  width: 100vw;
  text-align: center;
  font-size: 2vw;
  left: 0%;
}
#cuatro{
  position: absolute;
  top: 310vh;
  width: 100vw;
  text-align: center;
  font-size: 2vw;
  left: 25%;
}

h4{
  position: absolute;
  top: 320vh;
  font-size: 3vw;
  left: 60%;
}
ul{
  position: absolute;
  top: 335vh;
  font-size: 2vw;
  background-color: #D6EECD;
  border-radius: 15%;
  left: 55%;
  width: 25vw;
}

#zona4{
  top: 450vh;
  height: 100vh;
  position: absolute;
}


#galeria{
  position: absolute;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  text-align: center;
  top: 450vh;
  padding: 20px 0;
}

.linea{
  background-color: #550b51;
  position: absolute;
  top: 465vh;
  height: 1vh;
  width: 100%;
  display: block;
}

.galeria{
  position: absolute;
  top: 470vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  width: 95%;
  margin: auto;
  grid-gap: 1vw;
  padding: 5vw 0;
  overflow: hidden;
}

.galeria > a{
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.galeria img{
  width: 100%;
  vertical-align: top;
  height: 75vh;
  object-fit: cover;
  transition: transform 0.5s;
}

.galeria a:hover{
  filter: blur(2px);
  transform: rotate(10deg);
}

#zona5{
  top: 750vh;
  height: 100vh;
  position: absolute;
}

#colegio{
  position: absolute;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  text-align: center;
  top: 750vh;
  padding: 20px 0;
}

.linea2{
  background-color: #550b51;
  position: absolute;
  top: 765vh;
  height: 1vh;
  width: 100%;
  display: block;
}

.galeria2{
  position: absolute;
  top: 775vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  width: 95%;
  margin: auto;
  grid-gap: 1vw;
  padding: 5vw 0;
  overflow: hidden;
}

.galeria2 > a{
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.galeria2 img{
  width: 100%;
  vertical-align: top;
  height: 75vh;
  object-fit: cover;
  transition: transform 0.5s;
}

.galeria2 a:hover{
  transform: rotate(10deg);
}

#zona6{
  top: 1150vh;
  height: 100vh;
  position: absolute;
}

#future{
  position: absolute;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  text-align: center;
  top: 1150vh;
  padding: 20px 0;
}
#1{
  position: absolute;
  margin-top: 1150vh;
}

#imgfutur{
  position: absolute;
  top: 1170vh;
  left:37%;
  rght:37%;
}

#imgfutur:hover{
  cursor: not-allowed;
}

#zona7{
  top: 1250vh;
  height: 100vh;
  position: absolute;
}

#x{
  position: absolute;
  top: 1250vh;
  text-align: center;
}
#video1{
  position: absolute;
  top: 1300vh;
  left: 0%;
  right: 37%;
  padding: 5vw;
}
#video2{
  position: absolute;
  top: 1300vh;
  left: 45%;
  padding: 5vw;
}