@media only screen and (min-width:600px) and (max-width:900px) {
  html {
    font-size: 2.5vw;
  }
}

@media only screen and (max-width: 600px) {
  .table {
    display: none;
  }

/* MEDIA QUERIES FOR HAGRID */
.haGRID {
  grid-template: 1fr 1fr / 1fr;
  background-position: left;
  height: 95vh;
}

.haGRID h1, .haGRID span {
  grid-area: 1 / 1 / span 2 / span 1;
  font-size: 3.5em;

  justify-self: center;
  text-align: center;
  transform: translateX(-5%);
}

.haggard {
  grid-area: 2 / 1;
  height: 50vh;
  width: 90vw; 

  transform: scale(1.3) translateY(-5%) translateX(-10%);
}

/* MEDIA QUERIES FOR DUMBLEDORE */

.dumbledore {
    z-index: 1;
    height: 95vh;
}

.dumbleGRID h1 {
  font-size: 3rem;
  text-align: center;
}

.dumbleGRID span {
  font-size: 9rem;
  letter-spacing: 0.2rem;
}

/* MEDIA QUERIES FOR SNAPE */

.snape {
  position: relative;
  z-index: 1;
}

.snape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("resources/snape/lab.JPG") top/cover no-repeat;
  z-index: 0;
}

.snape h1 {
  grid-area: 2 / 1 / span 1 / span 1;
  align-self: center;

  margin: 12%;
  z-index: 100;
}

.severus {
  grid-area: 1 / 1 / span 2 / span 4;
  width: 100vw;

  z-index: 3;
}

.snape span {
  font-size: 10rem;
  letter-spacing: 0.2rem;
  line-height: 0.8;
}

.snape h1 {
  font-size: 3rem;
}

.snape .special {
  display: none;
}

  /* MEDIA QUERIES FOR MCGONAGALL */

  .McGonagall {
    position: relative; 
    z-index: 1;
  }

  .text {
    grid-area: 1 / 1;
    justify-self: end;

    font-size: 8rem;
    text-align: center;
    z-index: 2;
  }

  .sign {
    grid-area: 1 / 1 / span 2 / span 1;
    height: 72vh;
    z-index: 1;
  }

  .cat {
    display: grid;

    grid-area: 1 / 1 / span 2 / span 1;
    align-self: end;
    width: 100vw;
    z-index: 0;
  }

  /* MEDIA QUERIES FOR "AND MANY MORE..." */

  .teacher, .rarity, .flitwick {
    display: none;
  }

  .more span {
    font-size: 8rem;
    z-index: 2;
  }

  .lucius {
    grid-column: 1 / span 4;
    max-height: 95vh;
    animation: tilt 30s alternate infinite;
    z-index: 0;
  }

  /* MEDIA QUERIES FOR THE LANDING PAGE */

.homepage {
  justify-content: center;
  width: 100vw;
}

.slytherin {
  grid-area: 2 / 2 / span 1 / span 2;
}

.ravenclaw {
  grid-area: 2 / 4;
}

.gryffindor img, .slytherin img, .ravenclaw img {
  max-width: 30vw;
  max-height: 20vh;
  margin-bottom: 15vh;
}

.hufflepuff-home {
  display: none;
}

.seal {
  grid-area: 1 / 1 / span 1 / span 4;
  justify-self: center;
  max-height: 60vh;
  margin-top: 2vh;
  opacity: 0.8;
}

  /* MEDIA QUERIES FOR STORE PAGE */

  .shrine img, .shrine h1, .shrine h2 {
    display: none;
  }

  .shrine h3{
    display:flex;
    font-size: 10rem;
  }

  /* MEDIA QUERIES FOR ALL STUDENTS */

.students {
  display: grid;
  height: 400vh;
  grid-template: repeat(4, 1fr) / 1fr;
}

.icons {
  grid-column: 1;
  align-self: start;
}

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

.children {
  grid-column: 1 / -1;
  height: 100vh;
  max-width: 100vw;
}

.harry {
  grid-row: 1; 
}

.ron {
  grid-row: 2;
  z-index: 4;
  max-height: 65%;
}

.hermione {
  grid-row: 3;
  transform: translateX(-50px);
  z-index: 2;
}

.hermione2 {
  grid-row: 3;
  align-self: end;
  max-height: 90vh;

  transform: translateX(100px) scale(0.8) translateY(12.5%);
  z-index: 2;
}

.luna { 
  grid-row: 4;
  display: none;
}

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

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


/* MEDIA QUERIES FOR NAVIGATION */

.nav {
  display: none;
}

.arrow {
  display: none;
}

.home img {
  animation: none;
  max-height: 25vh;
}

footer {
  display: flex;
  position: fixed;
  bottom: 5%;
  left: 5%;

  opacity: 90%;
  z-index: 0;
  max-height: 30vh;
}

footer a {
  border: 2px solid black;
  border-radius: 40px;
  background-image: url(resources/rubies.jpeg);
}

.staff-footer a {
  background: url(resources/dump/store/peacock.jpg) bottom/cover;
}

.student-footer a {
  background-image: url(resources/lego\ hut\ two.png);
}

.storefooter a {
  background-image: url(resources/students/test.gif);
}

.storefooter {
  right: 55%;
  bottom: 3%;
}

/* MEDIA QUERIES FOR SPLASH */

  .splash {
    max-width: 100vw;
  }

  .splash img {
    height: 29vh;
    padding-left: 0vw;
  }

}