/* THIS AMAZING WEBSITE WILL INCORPORATE ALL OF MY HTML AND CSS NOTES */
* {
  box-sizing: border-box;
}

html {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 300; /* normal, 700 is bold */
  font-style: normal; /* not italic */

  color: white;
  font-size: 2.5vw; 
}

@font-face {
  font-family: "Harry Potter";
  src: url(./resources/fonts/harry-p-font/HarryP-MVZ6w.ttf) format("truetype");
}

span {
  font-size: 8vw;
  font-family: "Harry Potter";
  text-shadow: 10px 10px 10px hsla(0, 0%, 0%, 0.8);
}

th, td {
  border: 2px solid white;
  padding: 5px;
}

.table {
  height: clamp(40%, 60%, 100vh);
  table-layout: fixed;
  width: 100%;

  overflow-wrap: break-word;
  word-spacing: 3px;
  line-height: 1.2;
}

/* HAGRID, GROUNDSKEEPER AT HOGWARTS */

.haGRID {
  display: grid;
  grid-template: 1fr 1fr / 2fr 1fr 1fr;

  height: 100vh;
  overflow: hidden;
  background: url("./resources/lego\ hut\ two.png") center/cover no-repeat;
}

.haggard {
  grid-area: 1 / 1 / span 2 / span 1;
  align-self: end;

  width: 100%;
  height: 99%;
  transition: transform 8s ease-in-out 1s;
  z-index: 2;
}

.haggard:hover {
  cursor: grabbing;
  transform:rotateZ(12deg) translateY(40%) translateX(-50%);
  transition: transform 12s ease-out 100ms;
}

.haGRID h1 {
  grid-area: 1 / 2 / span 1 / span 2;
  padding: 30px;

  letter-spacing: 3px;
  text-align: center;
}

.haGRID .table {
  grid-area: 2 / 2 / span 1 / span 2;
  align-self: start;
  justify-self: center;

  width: 70%;
  background: url("./resources/rubies.jpeg") center/cover no-repeat;
}

/* DUMBLEDORE, HEADMASTER OF HOGWARTS */

.dumbleGRID {
  display: grid;
  overflow: hidden;

  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr 1fr;

  height: 100vh;
  width: 100vw;
  
  background: url("./resources/sunset.jpg") bottom/cover no-repeat;
}

.dumbleGRID h1 {
  grid-area: 1 / 1 / span 1 / span 1;
  letter-spacing: 3px;

  padding: 5%;
  text-align: center;
  z-index: 2;
}

.dumbleGRID .table {
  grid-area: 2 / 1 / span 1 / span 2;
  transform: scale(0.9);
  max-width: 60vw;

  align-self: start;
  background: url("./resources/test.jpg") left/cover no-repeat;
}

.dumbledore {
  grid-area: 1 / 2 / span 2 / span 1;
  min-width: 30vw;
  height: 98vh;
  z-index: 101;

  align-self: end;
  justify-self: center;
  transition: 1s ease-in-out;
  animation: breathe 12s alternate infinite;
}

.dumbledore:hover {
  cursor: pointer;
}

.dumbledore:active {
 margin-left: 200%;
}

/* SEVERUS SNAPE, POTIONSMASTER */

.snape {
  display: grid;
  grid-template: 1fr 1fr/ 1fr 1fr 1.5fr;
  overflow: hidden;

  height: 100vh;
  background: url("./resources/snape/lab.JPG") right/contain;
  transition: 5s;
}

.severus {
  grid-area: 1 / 1 / span 2 / span 2;
  height: 100vh;
  width: 70%;
  justify-self: start;
  transition: 5s;
  animation: breathe 8s alternate infinite;
}

.severus:hover {
  cursor: pointer;
}

.severus:active {
  cursor: grabbing;
}

.snape:has(.severus:active) {
  filter: hue-rotate(220deg);
}

@keyframes breathe {
  50% { transform: skew(-1deg) scale(1.01);}
  100% { transform: skew(1deg);}
}

.snape h1 {
  grid-area: 1 / 2;
  align-self: center;
  width: 120%;
  z-index: 1;
}

.snape .special {
  grid-area: 1 / 3;
  margin: 10%;

  position: relative;
  z-index: 10;
}

.snape .special::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: url("./resources/snape/patronus.jpg") center/cover;

  transform: scaleY(-1);
}

.snape .special:hover {
  cursor: help;
}

.snape .special:active::before {
  z-index: -1;
}

/* PROFESSOR MCGONAGALL: TRANSFIGURATION */

.McGonagall {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr 4fr;

  height: 100vh;
  background: url("./resources/back cover.jpg") top/cover;

  font-size: 3.6rem;
  font-family: "Harry Potter";
  overflow: hidden;
}

.sign {
  grid-area: 1 / 1 / span 2 / span 1;
  align-self: end;
  height: 95vh;
}

.text {
  grid-area: 1 / 1 / span 1 / span 2;
  padding: 3vh 10vh 0 0;
  justify-self: end;

  opacity: 0.9;
  text-shadow: 10px 10px 10px hsla(40, 70%, 0%, 1);
}

.teacher {
  grid-area: 2 / 2;
  justify-self: end;
  align-self: center;
  min-width: 35vw;
  height: 80vh;
  transition: 5s;
  z-index: 101;
}

.teacher:hover {
  cursor:pointer;
  opacity: 0;
  animation: breathe 300ms alternate infinite
}

.cat {
  display: none;
}

/* AND EVEN MORE (LUCIUS MALFOY) */

.more {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);

  height: 100vh;
  background: url("./resources/spin.gif") top/cover;
}

.more span {
  position: absolute;
  padding: 3vh;
  font-size: 2.5rem;
  font-family: "Harry Potter";
}

.lucius {
  grid-column: 2;
  width: 140%;
  height: 100vh;
  z-index: 10;

  animation: tilt 20s ease-in-out infinite alternate;
}

.flitwick {
  grid-column: 3;
  align-self: end;
  width: 120%;
  height: 80vh;

  animation: tilt 15s ease-in-out infinite alternate;
}

.rarity {
  grid-column: 4;
  width: 150%;
  height: 100vh;

  animation: tilt 10s ease-in-out infinite alternate;
}

@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(-10deg);
  }
}

/* LANDING PAGE */

.homepage {
  display: grid;
  overflow: hidden;
  grid-template: 1fr 1fr / repeat(4, 1fr);

  height: 100vh;
  position: relative;
  z-index: 1;
}

.homepage::before {
  content: "";
  inset: 0;
  position: absolute;
  
  background-image: url("./resources/dump/hogwarts.jpg");
  background-size: cover;
  filter: blur(2px);
}

.seal {
  grid-area: 1 / 1 / span 1 / span 3;
  justify-self: end;
  height: 65vh;
  filter: invert(100%);
}

.gryffindor {
  grid-area: 2 / 1 / span 1 / span 1;
  justify-self: end;
  align-self: center;
} 

.slytherin {
  grid-area: 2 / 2 / span 1 / span 1;
  justify-self: center;
  align-self: center;
}

.ravenclaw {
  grid-area: 2 / 3 / span 1 / span 1;
  justify-self: start;
  align-self: center;
}

.hufflepuff-home {
  grid-area: 2 / 4 / span 1 / span 1;
  justify-self: end;
  cursor: not-allowed;
  align-self: center;
}

.gryffindor img, .slytherin img, .ravenclaw img, .home img, .hufflepuff-home {
  height: 30vh;
  animation: flash 2s ease-in-out 500ms forwards;
}

.gryffindor:hover, .slytherin:hover, .ravenclaw:hover, .hufflepuff:hover{
  animation: flash 1s ease-in-out backwards;
}

@keyframes flash {
  0% {filter: none; transform: scale(1);}
  50% { filter: invert(100%); transform: scale(1.1);}
  100% {filter:none; transform: scale(1);}
}

/* STORE */

.shrine {
  display: grid;
  grid-template: repeat(3, 1fr) / 1fr 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url("./resources/dump/store/peacock.jpg");
  animation: scroll 200s alternate infinite;
}

.krishna {
  grid-area: 1 / 1;
  width: 50vw;
  justify-self: end;
}

.disney {
  grid-area: 1 / 2;
  width: 40vw;
  justify-self: start;
}

.krishna, .disney {
  height: 90vh;
  transform: scale(0.7);
  animation: shadow 11s alternate infinite;
}

.disney:hover, .krishna:hover {
  cursor: pointer;
}

.shrine h1, .shrine h2 {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;

  grid-area: 1 / 1 / span 1 / span 2;
  width: 1000%;
  animation: scroll-text 20s alternate infinite;
}

.shrine h2 {
  grid-area: 3 / 1 / span 1 / span 2;
  animation: scroll-text 20s alternate-reverse infinite;
}

.shrine h3 {
  display: none;
}


@keyframes shadow {
  0% {filter:brightness(10%) drop-shadow(0px -300px 300px black);}
  100% {filter:brightness(110%) drop-shadow(0px -10px 5px black);}
}

@keyframes scroll {
  from {background-position: 0 0;}
  to {background-position: -1000px 0;}
}

@keyframes scroll-text {
  from {transform: translateX(12%);}
  to {transform: translateX(-12%);}
}

/* ALL STUDENTS PAGE */

.students {
  display: grid;
  height: 100vh;
  overflow: hidden;
  grid-template: repeat(3, 1fr) / 2fr 2fr 2fr 1.6fr;
}

.icons {
  grid-row: 1;
  justify-self: center;
  max-height: 33.333vh;
  z-index: 10;
}

.gryffindore {grid-column: 1; z-index: 1;}
.slytherine {grid-column: 2;}
.ravenclawe {grid-column: 3;}
.hufflepuffe {grid-column: 4;}

.children {
  grid-row: 1 / -1;
  align-self: end;
  max-width: 30vw;
  width: 100%;
}

.harry {
  grid-column: 1; 
  max-height: 90vh;
  min-width: 102.5%;
  z-index: 1;
  cursor: pointer;

  transition: transform 1.5s ease-in-out
}

.ron {
  grid-column: 2;
  min-width: 100%;
  min-height: 45%;
  z-index: 4;

  transition: transform 0.5s ease-in-out, opacity 1.5s;
}

.hermione {
  grid-column: 3;
  max-height: 90vh;
  transform: translateX(-50px);
  z-index: 0;
}

.hermione2 {
  grid-column: 3;
  max-height: 90vh;

  transform: translateX(100px) scale(0.9) translateY(100px);
  z-index: 1;

  cursor: default;
}

.luna { 
  grid-column: 4;
  transform: translateX(5vw) translateY(-6vh) scale(1.4);
  z-index: 3;
  cursor: pointer;
}

.backgrounds {
  grid-row: 1 / -1;
}

.column1 {grid-column: 1; background: url("./resources/sunset.jpg") center/cover; z-index: 0;}
.column2 {grid-column: 2; background: url("./resources/students/sloth.jpg") center/cover; z-index: 3;}
.column3 {grid-column: 3; background: url("./resources/back\ cover.jpg") center/cover;}
.column4 {grid-column: 4; background: url("./resources/test.jpg") center/cover; z-index: 2;}

.harry:active {
  transform: translateX(273%);
  z-index: 12;
}

.harry:active ~ .column1 {
   grid-column: 1 / -1;
   z-index: 11;
}

.students:has(.luna:active) .icons {
  opacity: 0;
}

.students:has(.luna:active) img {
  opacity: 0;
}

/* NAVIGATION BAR */

.arrow {
  position: fixed; 
  right: 0;
  top: 50vh;

  transform: rotate(90deg) translateY(-70%);
  z-index: 100;
}

.nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 80vh;
  z-index: 100;

  top: 12%;
  justify-content: space-around;  

  left: 100%;
  transition: left 400ms ease-out;
}

.nav img {
  max-height: 25vh;
}

.arrow:hover {
  cursor:pointer;
}

.arrow:hover + .nav {
  left: 89%;
}

.arrow {
  animation: notice 2s ease-in-out 3s forwards;
}

@keyframes notice {
  0% {transform: rotate(90deg) translateY(-70%);}
  50% {transform: scale(1) rotate(90deg) translateY(-8vw);}
  100% {transform: rotate(90deg) translateY(-70%);}
}


.nav:hover {
  left: 89%;
}

.home {
  filter: invert(100%);
}

.nav img {
  animation: none;
}

.home:hover {
  animation: flash-home 1s ease-in-out backwards;
}

@keyframes flash-home {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

footer {
  display: none;
}

/* SPLASH */

.splash {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: start;
  align-items: center;
  background: black;
  width: 100vw;

  z-index: 1000;
  animation: reveal 600ms ease-in-out forwards 1.5s;
  /* default is 600ms and 1.5s */
}

.splash img {
  height: 35vh;
  border: 1px solid black;
  background-color: rgba(219, 218, 218, 0.9);
  padding-left: 45vw;
}

.splash h1 {
  font-size: 1.5em;
  letter-spacing: 1.2vw;
  padding-left: 3vw;

  color: rgb(219, 218, 218);
}

@keyframes reveal {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden;}
}