body{
  background-color: #cceeff;
  
}
html, body {
      scroll-behavior: smooth;
}
#titulo {
  font-family:'Racing Sans One', cursive;
  color:  #2952a3;
   text-shadow: 3px 1px  #142952;
  font-size:5.5vw;
  text-align: center;
  }
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#fotoportada {
	width: auto;
	height: 35vw;
	margin: 0.78vw;
	transition: transform 1s;
	border: 0.4vw solid #2952a3;
}
#fotoportada:hover {
	transform: scale(1.1);
}
#zona1{
font-family: 'Montserrat', sans-serif;
background:#2952a3;
font-size: 3vw;
border-radius: 1vw;
text-align: center; 
position: absolute; width: 20%; top: 25%; right: 0%; left: 79%;
opacity: 1vw;
padding: 0.2vw;
  }
#zona1 a{
  text-decoration:none;
  color:  #cce6ff;
}
#zona2{
   font-family: 'Montserrat', sans-serif;
background:#2952a3;
font-size: 3vw;
border-radius: 1vw;
text-align: center; 
position: absolute; width: 20%; top: 35%; right: 0%; left: 79%;
opacity: 1vw;
padding: 0.2vw;
}
#zona2 a{
   text-decoration:none;
  color:  #cce6ff;
}
#zona3{
  font-family: 'Montserrat', sans-serif;
background:#2952a3;
font-size: 3vw;
border-radius: 1vw;
text-align: center; 
position: absolute; width: 20%; top: 45%; right: 0%; left: 79%;
opacity: 1vw;
padding: 0.2vw;
}
#zona3 a{
 text-decoration:none;
  color:  #cce6ff;
}
#zona4{
font-family: 'Montserrat', sans-serif;
background:#2952a3;
font-size: 3vw;
border-radius: 1vw;
text-align: center; 
position: absolute; width: 20%; top: 55%; right: 0%; left: 79%;
opacity: 1vw;
padding: 0.2vw;
}
#zona4 a{
 text-decoration:none;
  color:  #cce6ff;
}
#zona5{
font-family: 'Montserrat', sans-serif;
background:#2952a3;
font-size: 3vw;
border-radius: 1vw;
text-align: center; 
position: absolute; width: 20%; top: 65%; right: 0%; left: 79%;
opacity: 1vw;
padding: 0.2vw;
}
#zona5 a{
 text-decoration:none;
  color:  #cce6ff;
}
#perfil{ 
font-family: 'Koulen', cursive;
text-align:center;
font-size:5vw;
  position: absolute; width: 100%; top: 200%; right: 0%; left: 0%;
  background-color: #CDC2AE;
  box-shadow: 2px 2px 2px #116A7B;
  text-shadow: 2px 2px 2px #116A7B;
}
.texto1{
  font-family: 'Quicksand', sans-serif;
  color: black;
  font-size:35px;
  position:absolute;top:254%;
  left:2%;  width: 1000%;
  }
.boton:hover{
  cursor: pointer;
  box-shadow: 8px 6px 20px black;
}
#fotoperfil{
  position:absolute; width: auto; top: 235%; left: 63%;

}
#fotoperfil {
  --s: 10px;  /* tamaño del marco */
  --b: 2px;   /* grosor del borde */
  --w: 400px; /* ancho de la imagen */
  --c: black;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: var(--s);
  --_g: #0000 25%,var(--c) 0;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100%;
  background-size: 15% 15%; 
  background-repeat: no-repeat;
  outline: calc(var(--w)/2) solid #0009;
  outline-offset: calc(var(--w)/-2 - var(--s));
  clip-path: inset(var(--s));
  transition: .4s;
  cursor: pointer;
}
#fotoperfil:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--s);
  clip-path: inset(calc(-1*var(--s) - var(--b)));
  background-size: 45% 45%;
  transition: linear .3s, background-size .3s .4s;
}
#fotorayo{
  position:absolute; width: 50%; top: 218%; left: -1.5%;
}
#galeria{ 
font-family: 'Koulen', cursive;
text-align:center;
font-size:5vw;
  position: absolute; width: 100%; top: 350%; right: 0%; left: 0%;
  background-color: #CDC2AE;
  box-shadow: 2px 2px 2px #116A7B;
  text-shadow: 2px 2px 2px #116A7B;
}
.container2{
  padding: 75px 0;
  margin: 0 auto;
  width: 1140px;
  position:absolute;
  top: 365%;
  left: 20.5%
}
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}

.item-1 { 
  background-image: url("https://i.imgur.com/VKb9S5q.jpeg");
}

.item-2 { 
  background-image: url('https://i.imgur.com/m8AK7BG.jpeg');
}

.item-3 { 
  background-image: url('https://i.imgur.com/urUuFFt.jpeg');
}

.item-4 { 
  background-image: url('https://i.imgur.com/1Ox3AUi.jpeg');
}

.item-5 { 
  background-image: url('https://i.imgur.com/Qu7q8Z9.jpeg');
}
#colegio{ 
font-family: 'Koulen', cursive;
text-align:center;
font-size:5vw;
  position: absolute; width: 100%; top: 475%; right: 0%; left: 0%;
  background-color: #CDC2AE;
  box-shadow: 2px 2px 2px #116A7B;
  text-shadow: 2px 2px 2px #116A7B;
}
.texto2{
  font-family: 'Quicksand', sans-serif;
  color: black;
  font-size:15px;
  position:absolute;
  top:500%;
  left:2%;
  text-align: justify;
  }
.container3{
  width: 29%;
  overflow:hidden;
  margin:3px;
  padding: 0; 
  position:relative;
  float:left;
  left: 5.5%
}
img{
  width: 100%;
  transition-duration: .3s;
  max-width: 100%;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.container3:hover img{
  transform: scale(1.2);
  transition-duration: .3s;
  filter: grayscale(50%);
  opacity: .7;
}
.container3:hover span{
  color:white;
  display: block;
  transition-duration: .3s;
}
#futuro{ 
font-family: 'Koulen', cursive;
text-align:center;
font-size:5vw;
  position: absolute; width: 100%; top: 600%; right: 0%; left: 0%;
  background-color: #CDC2AE;
  box-shadow: 2px 2px 2px #116A7B;
  text-shadow: 2px 2px 2px #116A7B;
}
.texto3{
  font-family: 'Quicksand', sans-serif;
  color: black;
  font-size:20px;
  position:absolute;
  top:625%;
  left:2%;
  margin-right: 40vw;
  text-align: justify;
  }
div.gallery {
  margin: 10px;
  width: 500px;
  position: absolute;
  top: 625%;
  right: 3%;
}
div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
  font-family: 'Quicksand', sans-serif;
  font-size:25px;
}
.subir{
  position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 15px;
    margin-bottom: 10px;
  z-index:2;
  width: 3%
  }
#volver{
  font-family: 'Archivo Black', sans-serif;
background:#2952a3;
font-size: 2vw;
text-align: center; 
  position: absolute; width: 15%; top: 6%; right: 0%; left: 3.7%;
}
#volver a{
  text-decoration:none;
  color:  #cce6ff;
}
#random{ 
font-family: 'Koulen', cursive;
text-align:center;
font-size:5vw;
  position: absolute; width: 100%; top: 700%; right: 0%; left: 0%;
  background-color: #CDC2AE;
  box-shadow: 2px 2px 2px #116A7B;
  text-shadow: 2px 2px 2px #116A7B;
}
.texto4{
  font-family: 'Quicksand', sans-serif;
  color: black;
  font-size:20px;
  position:absolute;
  top:720%;
  left:0.5%;
  text-align: justify;
  margin-right: 1%;
  }
.fotorandom{
  position:absolute;
  top: 745%;
  width: 35%;
  left: 35%;
}