@import url("https://fonts.googleapis.com/css?family=Arvo");
#titulo {
  text-align: center;
  font-family: "Bebas Neue", cursive;
  font-size: 6vw;
  position: absolute;
  left: 43%;
  top: 1%;
  text-align: center;
  color: #660066;
  text-shadow: 4px 1px 1px #eedaf1;
}

.subir {
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 15px;
  margin-bottom: 10px;
  z-index: 2;
}

.boton {
  background-color: #8600b3;
  color: white;
  font-size: 3vw;
  font-family: "Bebas Neue", sans-serif;
  border-radius: 5px;
  text-align: center;
}

.boton2 {
  background-color: #8600b3;
  color: white;
  font-size: 1vw;
  font-family: "Bebas Neue", sans-serif;
  border-radius: 1px;
  text-align: center;
}

#zona1 {
  position: absolute;
  width: 20%;
  top: 10%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona2 {
  position: absolute;
  width: 20%;
  top: 30%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona3 {
  position: absolute;
  width: 20%;
  top: 50%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona4 {
  position: absolute;
  width: 20%;
  top: 70%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona5 {
  position: absolute;
  width: 20%;
  top: 90%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona1 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona2 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona3 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona4 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona5 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona6 a {
  text-decoration: none;
  color: #eee6ff;
}

#zona6 {
  position: absolute;
  width: 10%;
  top: 1%;
  right: 2%;
  left: 1%;
  border-radius: 2px;
}

#zona1:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 35px;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 20%;
  top: 10%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona2:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 35px;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 20%;
  top: 30%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona3:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 35px;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 20%;
  top: 50%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona4:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 35px;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 20%;
  top: 70%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona5:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 35px;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 20%;
  top: 90%;
  right: 80%;
  left: 10%;
  border-radius: 5px;
}

#zona6:hover {
  background-color: #39004d;
  color: #eee6ff;
  font-size: 1vw;
  font-family: Bebas Neue;
  text-align: center;
  position: absolute;
  width: 10%;
  top: 1%;
  right: 2%;
  left: 1%;
  border-radius: 2px;
}

#perfil {
  font-family: Bebas Neue;
  text-align: center;
  color: #9966ff;
  font-size: 5vw;
  text-shadow: 1px 1px 1px darkred;
  background-color: #4c0080;
  position: absolute;
  width: 100%;
  top: 110%;
  right: 0%;
  left: 0%;
}

#colegio1 {
  height: 280px;
  margin: 15px;
  transition: transform 1s;
  position: absolute;
  left: 50%;
  top: 890%;
  text-align: center;
}

#colegio1:hover {
  transform: scale(1.3);
}

#colegio2 {
  height: 500px;
  margin: 15px;
  transition: transform 1s;
  position: absolute;
  left: 2%;
  top: 940%;
  text-align: center;
}

#colegio2:hover {
  transform: scale(1.3);
}

#colegio3 {
  height: 300px;
  margin: 15px;
  transition: transform 1s;
  position: absolute;
  left: 55%;
  top: 970%;
  text-align: center;
}

#colegio3:hover {
  transform: scale(1.3);
}

#fotoportada {
  position: absolute;
  top: 17%;
  left: 43%;
  right: 7%;
}

.texto1 {
  font-family: Bebas Neue;
  color: #8600b3;
  font-size: 25px;
  position: absolute;
  top: 125%;
  left: 2%;
}

#perfilfoto {
  position: absolute;
  width: 30%;
  top: 145%;
  left: 65%;
  right: 7%;
}

#Galeria {
  font-family: Bebas Neue;
  text-align: center;
  color: #ccccff;
  font-size: 5vw;
  text-shadow: 1px 1px 1px darkred;
  background-color: #990099;
  box-shadow: 1px 1px 2px #ff80ff;
  position: absolute;
  width: 100%;
  top: 235%;
  right: 0%;
  left: 0%;
}

.TextoColegio {
  position: absolute;
  top: 900%;
  right: 60%;
  left: 2%;
  font-family: Bebas Neue;
  color: #4c0080;
  font-size: 2vw;
}

.TextoColegio1 {
  position: absolute;
  top: 955%;
  left: 47%;
  font-family: Bebas Neue;
  color: #4c0080;
  font-size: 2vw;
}

#mover {
  font-family: "Arvo", monospace;
  align-items: center;
  position: reltive;
  width: 100%;
  height: 100%;
  font-size: 13px;
  position: absolute;
  width: 100%;
  top: 245%;
  right: 0%;
  left: 0%;
}

#Colegio {
  font-family: Bebas Neue;
  text-align: center;
  color: #bf80ff;
  font-size: 5vw;
  text-shadow: 1px 1px 1px darkred;
  background-color: #6600cc;
  position: absolute;
  width: 100%;
  top: 875%;
  right: 0%;
  left: 0%;
}

body, html {
  font-family: "Arvo", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  position: reltive;
  width: 100%;
  height: 100%;
  background: #e0b3ff;
  font-size: 13px;
}
@supports (display: grid) {
  body, html {
    display: block;
  }
}

.section {
  display: none;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 4rem;
  }
}
@supports (display: grid) {
  .section {
    display: block;
  }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1.5em;
}

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.flower {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}
.flower:nth-of-type(1) {
  background-image: url("https://i.imgur.com/DAZOorr.jpg");
}
.flower:nth-of-type(2) {
  background-image: url("https://i.pinimg.com/750x/9c/77/6d/9c776da9e20a78d688f01045002e91d1.jpg");
}
.flower:nth-of-type(3) {
  background-image: url("https://i.pinimg.com/750x/a4/5f/13/a45f13157f6f67a40303c92fe1dd7cad.jpg");
}
.flower:nth-of-type(4) {
  background-image: url("https://i.imgur.com/wq8hR2P.jpg");
}
.flower:nth-of-type(5) {
  background-image: url("https://i.pinimg.com/750x/64/ff/26/64ff26b8b2ac3cf532faa7a37ac01e48.jpg");
}
.flower:nth-of-type(6) {
  background-image: url("https://i.pinimg.com/750x/4d/a5/bd/4da5bd7758397786dc590ace61c3cc0a.jpg");
}
.flower:nth-of-type(7) {
  background-image: url("https://i.pinimg.com/750x/1c/85/2e/1c852e50e3a0d847cdee72b3225e5fa9.jpg");
}
.flower:nth-of-type(8) {
  background-image: url("https://i.pinimg.com/750x/16/1c/10/161c10143cee8c3bf9bb8c53dcf55a89.jpg");
}
.flower:nth-of-type(9) {
  background-image: url("https://i.imgur.com/EM2zmIK.jpg");
}
.flower:nth-of-type(10) {
  background-image: url("https://i.imgur.com/R5FkxLv.jpg");
}
.flower:nth-of-type(11) {
  background-image: url("https://i.pinimg.com/750x/a6/cc/09/a6cc0934164cdf75bfa41e28809ce545.jpg");
}
.flower:nth-of-type(12) {
  background-image: url("https://i.pinimg.com/750x/79/24/22/792422b45e24ba7bee6125f539faa6fb.jpg");
}
.flower:nth-of-type(13) {
  background-image: url("https://i.pinimg.com/750x/c5/34/66/c53466e92a72e4563c144c6f3a003ca7.jpg");
}
.flower:nth-of-type(14) {
  background-image: url("https://i.imgur.com/qmwnqT8.jpg");
}
.flower:nth-of-type(15) {
  background-image: url("https://i.pinimg.com/750x/59/e1/2a/59e12ac61e5c3cb2bda34b74dd6522e5.jpg");
}
.flower:nth-of-type(16) {
  background-image: url("https://i.imgur.com/zC1c7JD.jpg");
}
.flower:nth-of-type(17) {
  background-image: url("https://i.imgur.com/FynOyhq.jpg");
}
.flower:nth-of-type(18) {
  background-image: url("https://i.imgur.com/A0cg0I7.jpg");
}
.flower:nth-of-type(19) {
  background-image: url("https://i.imgur.com/5XYeiG0.jpg");
}
.flower:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}
.flower:hover {
  transform: scale(1.05);
}
.flower:hover:after {
  opacity: 0;
}
.flower--medium {
  grid-row-end: span 2;
}
.flower--large {
  grid-row-end: span 3;
}
.flower--full {
  grid-column-end: auto;
  grid-row-end: span 3;
}
.flower_details {
  position: relative;
  z-index: 1;
  padding: 15px;
  background: white;
  text-transform: lowercase;
  font-size: 18px;
  letter-spacing: 1px;
  color: #828282;
}
.flower_details:before {
  content: counter(item-counter);
  font-size: 1.1rem;
  padding-right: 1rem;
  color: #000;
}

#Futuro {
  font-family: Bebas Neue;
  text-align: center;
  color: #d8ade1;
  font-size: 5vw;
  text-shadow: 1px 1px 1px darkred;
  background-color: #853795;
  box-shadow: 1px 1px 2px;
  position: absolute;
  width: 100%;
  top: 1070%;
  right: 0%;
  left: 0%;
}

.texto2 {
  font-family: Bebas Neue;
  color: #431c4a;
  font-size: 2vw;
  position: absolute;
  top: 1095%;
  left: 2%;
}

#Random {
  font-family: Bebas Neue;
  text-align: center;
  color: #4d194d;
  font-size: 5vw;
  text-shadow: 1px 1px 1px;
  background-color: #d378d3;
  box-shadow: 1px 1px 2px #c752c7;
  position: absolute;
  width: 100%;
  top: 1200%;
  right: 0%;
  left: 0%;
}

#randompic1 {
  position: absolute;
  top: 1260%;
  left: 35%;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.box-galery {
  width: 100%;
  height: 100%;
  grid-gap: 5px;
  position: relative;
  z-index: 1;
}
.box-galery > [type=checkbox] {
  display: none;
}
.box-galery .imgs {
  --zi: calc(400px / 3 - 3px);
  width: var(--zi);
  height: var(--zi);
  object-fit: cover;
  transition: 0.2s;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background-position: center;
  background-size: cover;
  margin: auto;
  transition-timing-function: linear;
}
.box-galery .img1 {
  background-image: url("https://i.pinimg.com/750x/4e/5d/cf/4e5dcf46d005e67295524ba0d478db9a.jpg");
}
.box-galery .img2 {
  left: var(--zi);
  background-image: url("https://i.pinimg.com/750x/70/50/99/705099ffb7c011bc531c7ff819ab3970.jpg");
  left: 0;
  right: 0;
}
.box-galery .img3 {
  background-image: url("https://i.pinimg.com/750x/6e/79/a9/6e79a9be1ca812d531cdd3075e1bd819.jpg");
  right: 0;
}
.box-galery .img4 {
  background-image: url("https://i.pinimg.com/750x/78/75/43/787543c68475cf87f653c3238a00c82c.jpg");
  top: 0;
  bottom: 0;
}
.box-galery .img5 {
  background-image: url("https://i.imgur.com/oZq9Bcy.jpg");
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box-galery .img6 {
  background-image: url("https://i.pinimg.com/750x/50/77/30/507730f2ae24b80de86c28c81bdf87dd.jpg");
  right: 0;
  top: 0;
  bottom: 0;
}
.box-galery .img7 {
  background-image: url("https://i.pinimg.com/750x/5c/69/8d/5c698de5b0d5b7670a62df29fa6bd062.jpg");
  bottom: 0;
}
.box-galery .img8 {
  background-image: url("https://i.pinimg.com/750x/bf/b4/3f/bfb43fc68b1c46373d49a7532d49b203.jpg");
  right: 0;
  left: 0;
  bottom: 0;
}
.box-galery .img9 {
  background-image: url("https://i.pinimg.com/750x/da/a0/00/daa000471273abcf6e57c1fc1838c856.jpg");
  right: 0;
  bottom: 0;
}

#btn1:checked ~ .img1 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn2:checked ~ .img2 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn3:checked ~ .img3 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn4:checked ~ .img4 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn5:checked ~ .img5 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn6:checked ~ .img6 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn7:checked ~ .img7 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn8:checked ~ .img8 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn9:checked ~ .img9 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

.frame2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -198px;
  margin-left: 350px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
}

.box-galery2 {
  width: 100%;
  height: 100%;
  grid-gap: 5px;
  position: relative;
  z-index: 1;
}
.box-galery2 > [type=checkbox] {
  display: none;
}
.box-galery2 .imgs {
  --zi: calc(400px / 3 - 3px);
  width: var(--zi);
  height: var(--zi);
  object-fit: cover;
  transition: 0.2s;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background-position: center;
  background-size: cover;
  margin: auto;
  transition-timing-function: linear;
}
.box-galery2 .img11 {
  background-image: url("https://i.imgur.com/O7ffROx.jpg");
}
.box-galery2 .img12 {
  left: var;
  background-image: url("https://i.imgur.com/3FL3HwO.jpg");
  left: 0;
  right: 0;
}
.box-galery2 .img13 {
  background-image: url("https://i.imgur.com/akS9mYp.jpg");
  right: 0;
}
.box-galery2 .img14 {
  background-image: url("https://i.imgur.com/OpT9f63.jpg");
  top: 0;
  bottom: 0;
}
.box-galery2 .img15 {
  background-image: url("https://i.imgur.com/heevI0Q.jpg");
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box-galery2 .img16 {
  background-image: url("https://i.imgur.com/ERimpOU.jpg");
  right: 0;
  top: 0;
  bottom: 0;
}
.box-galery2 .img17 {
  background-image: url("https://i.imgur.com/AkiAntx.jpg");
  bottom: 0;
}
.box-galery2 .img18 {
  background-image: url("https://i.imgur.com/wHYmPZi.jpg");
  right: 0;
  left: 0;
  bottom: 0;
}
.box-galery2 .img19 {
  background-image: url("https://i.imgur.com/wl6s7jo.jpg");
  right: 0;
  bottom: 0;
}

#btn11:checked ~ .img11 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn12:checked ~ .img12 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn13:checked ~ .img13 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn14:checked ~ .img14 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn15:checked ~ .img15 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn16:checked ~ .img16 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn17:checked ~ .img17 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn18:checked ~ .img18 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn19:checked ~ .img19 {
  width: 400px;
  height: 400px;
  z-index: 10;
}