style.css

* {
  box-sizing: border-box;
  font-family: "Merienda", sans-serif;
  transition-duration: 0.3s;
}

body {
  background-color: #392a48;
  margin: 0;
}

main {
  padding-bottom: 7rem;
}

section {
  padding: 1rem;
  padding-bottom: 0;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p,
input {
  color: #faecbf;
}

/*---------------footer---------------*/

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  background-color: #392a48;
}

::-webkit-scrollbar-thumb {
  background-color: #2f223a;
}

/*---------------footer---------------*/

footer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #2f223a;
  bottom: 0;
  z-index: 1;
  transition-duration: 0.5s;
}

#footer-top {
  position: absolute;
  width: 15rem;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
}

#footer-top h2 {
  font-size: 2rem;
  opacity: 100%;
  transition-duration: 0.5s;
}

#footer-crest {
  position: absolute;
  width: 80vw;
  max-width: 30rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-duration: 0.5s;
}
/*---------------student---------------*/

.student {
  position: relative;
  margin-bottom: 1rem;
}

.student-crest {
  position: absolute;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 21rem;
  background-position-x: 50%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
  transition-duration: 1s;
}

.student-top {
  display: flex;
  flex-direction: row;
  justify-content: left;
  grid-gap: 1rem;
  cursor: pointer;
}

.student-photo {
  height: 7.2rem;
  border-radius: 26px;
}

.student-top-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.student-top-info p {
  font-size: 1.3rem;
  margin: 0;
}

.student-house {
  font-weight: bold;
}

.student-dropdown-container {
  margin-top: 0.5rem;
  text-align: center;
}

.student-dropdown-indicator {
  width: 1.5rem;
  transition-duration: 0.3s;
}

.student-bottom {
  max-height: 0;
  transition-duration: 0.3s;
  overflow: hidden;
}

.student-bottom > * {
  margin-top: 1rem;
}

.student-bottom-info p {
  font-size: 1rem;
  margin: 0;
  margin-top: 0.5rem;
}

.student-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.student-icons > * {
  display: inline-block;
  height: 5rem;
  width: auto;
  opacity: 50%;
}

.student-badge-active {
  opacity: 100%;
}

.student-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}

.student-buttons button {
  font-size: 1.3rem;
  color: #2f223a;
  background-color: #faecbf;
  border: solid #2f223a 2px;
  width: 100%;
  padding: 0.5rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.student-button-prefect,
.student-button-inquisitor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.student-button-prefect p,
.student-button-inquisitor p {
  display: inline-block;
  color: #2f223a;
  margin: 0;
}

.student-button-expelled {
  position: relative;
  background-color: red !important;
  border: solid #faecbf 2px !important;
  grid-column: 1/3;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  overflow: visible;
}

.student-button-expelled-text {
  margin: 0;
}

.student-button-expelled-img {
  position: absolute;
  width: 5rem;
  top: 0%;
  right: 3%;
  transform: rotate(10deg);
  transform-origin: right;
}

@media (min-width: 650px) {
  .student-crest {
    background-size: 15rem;
  }

  .student-top {
    display: grid;
    grid-template-columns: 7rem 1fr;
  }

  .student-top-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .student-top-info p {
    font-size: 1.7rem;
  }

  .student-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .student-bottom-info {
    grid-column: 1/3;
  }

  .student-bottom-info p {
    font-size: 1.3rem;
  }

  .student-icons {
    grid-column: 3/4;
  }

  .student-buttons {
    grid-column: 1/4;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 1rem;
  }

  .student-buttons button {
    text-align: left;
    padding: 0.5rem;
  }

  .student-button-expelled {
    grid-column: 3/4;
    padding: 0;
    margin: 0;
  }
}

.button-shake {
  animation-name: button-shake;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

@keyframes button-shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(1deg);
  }
  20% {
    transform: rotate(-1deg);
  }
  30% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
  60% {
    transform: rotate(-1deg);
  }
  70% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  90% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.howler-flying {
  animation-name: howler-flying;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes howler-flying {
  0% {
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: translateX(200%);
  }
}

/*---------------house---------------*/

#section-house {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.house-text-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-text-container h1 {
  font-size: 2rem;
  margin: 0;
}

.house-text-container h2 {
  font-size: 1.3rem;
  margin: 0;
}

.house-text-container h3 {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 0;
}

.house-text-students-header {
  margin-bottom: 0.5rem !important;
}

.house-text-students-top,
.house-text-students-bottom {
  text-align: center;
}

.house-text-students {
  display: inline-block;
  position: relative;
  height: 2rem;
  width: 2rem;
}

.house-text-students h3 {
  position: absolute;
  font-size: 1.5rem;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.house-text-students img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  opacity: 50%;
}

.house-text-displayed {
  font-size: 1.5rem;
  grid-column: 1/3;
  text-align: center;
  margin-bottom: 0;
}

.house-img {
  min-width: 10rem;
  max-width: 12rem;
}

@media (min-width: 650px) {
  #section-house {
    grid-template-columns: auto auto;
    width: 50%;
    max-width: 25rem;
    margin: 0 auto;
  }
}

/*---------------array-altering---------------*/

.expelled-andies {
  display: none !important;
}

#section-sorting > * {
  margin-top: 1rem;
}

.search-icon,
.filter-icon,
.sorting-icon {
  place-self: center;
  height: 3rem;
}

.search-header input,
.filter-header p,
.sorting-header p {
  font-size: 1.3rem;
}

.filter-dropdown-header,
.sorting-dropdown-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #2f223a;
  border: 2px solid #faecbf;
  align-content: center;
  padding: 0.5rem;
  cursor: pointer;
}

.filter-dropdown-input,
.sorting-dropdown-input {
  margin: 0;
}

.filter-dropdown-icon,
.sorting-dropdown-icon {
  height: 1rem;
  align-self: center;
  transform: rotate(0deg);
  transition-duration: 0.3s;
}

.filter-dropdown-items,
.sorting-dropdown-items {
  max-height: 0;
  overflow-y: hidden;
  transition-duration: 0.3s;
  cursor: pointer;
}

.filter-button,
.sorting-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #2f223a;
  border: 2px solid #faecbf;
  height: 3rem;
  width: 100%;
  align-content: center;
  padding: 0.5rem;
}

.filter-button-text,
.sorting-button-text {
  margin: 0;
}

.filter-button-icon,
.sorting-button-icon {
  height: 1rem;
  align-self: center;
  transform: rotate(180deg);
  transition-duration: 0.3s;
}

.search-header form,
.filter-header,
.sorting-header {
  display: grid;
  grid-template-columns: auto 3.2rem;
  grid-gap: 0.5rem;
}

.search-header input {
  background-color: #2f223a;
  border: 2px solid #faecbf;
  height: 3rem;
  width: 100%;
  padding: 0.5rem;
}

@media (min-width: 650px) {
  .search-header form,
  .filter-header,
  .sorting-header {
    grid-template-columns: 7rem 1fr;
  }

  .search-header img,
  .filter-header img,
  .sorting-header img {
    grid-row: 1/2;
    grid-column: 1/2;
  }

  .search-header input,
  .filter-dropdown-container,
  .sorting-dropdown-container {
    grid-column: 2/3;
  }

  .filter-header p,
  .sorting-header p {
    font-size: 1.7rem;
  }

  .sorting-dropdown-header {
    display: none;
  }

  .sorting-dropdown-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-height: none !important;
  }

  .sorting-button {
    background-color: transparent;
    border: none;
    height: 3.5rem;
  }

  .filter-button {
    height: auto;
  }
}

/*-----------hogwarts-crest-------*/

.hogwarts-crest-container {
  position: relative;
  aspect-ratio: 0.9014/1;
}

.hogwarts-crest-container > * {
  position: absolute;
}

.hogwarts-crest-insignia {
  cursor: pointer;
  z-index: 6;
  width: 20%;
  left: 50%;
  top: 39%;
  transform: translateX(-50%) scale(1);
  transition-duration: 0.3s;
}

.hogwarts-crest-insignia-animate {
  transform: translateX(-50%) scale(1.3);
  transition-duration: 0.3s;
}

.hogwarts-crest-gryffindor {
  cursor: pointer;
  z-index: 5;
  width: 41.5587628866%;
  left: 13.35%;
  top: 8.95%;
  transform: scale(1);
  transform-origin: bottom left;
  transition-duration: 0.3s;
}

.hogwarts-crest-gryffindor-animate {
  transform: scale(1.1);
  transition-duration: 0.3s;
}

.hogwarts-crest-slytherin {
  cursor: pointer;
  z-index: 4;
  width: 28.865443299%;
  left: 50%;
  top: 11%;
  transform: scale(1) rotate(0deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-slytherin-animate {
  transform: scale(1.2) rotate(-10deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-hufflepuff-body {
  cursor: pointer;
  z-index: 2;
  width: 42.6274845361%;
  left: 4.63%;
  top: 52.99%;
  transform: scale(1);
  transform-origin: bottom left;
  transition-duration: 0.3s;
}

.hogwarts-crest-hufflepuff-head {
  cursor: pointer;
  z-index: 2;
  width: 23.3609690722%;
  left: 16%;
  top: 47%;
  transform: scale(1) rotate(0deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-hufflepuff-animate {
  transform: scale(1.1) rotate(-20deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-ravenclaw {
  cursor: pointer;
  z-index: 3;
  width: 46.3877938144%;
  left: 49%;
  top: 29%;
  transform: scale(1) rotate(0deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-ravenclaw-animate {
  transform: scale(1.15) rotate(10deg);
  transition-duration: 0.3s;
}

.hogwarts-crest-frame {
  width: 100%;
  z-index: 1;
}

.hogwarts-crest-red {
  width: 42.5482680412%;
  left: 7.45%;
  top: 1.15%;
}

.hogwarts-crest-green {
  width: 42.1755051546%;
  right: 7.45%;
  top: 1.5%;
}

.hogwarts-crest-yellow {
  width: 47.3421237113%;
  left: 2%;
  top: 47.5%;
}

.hogwarts-crest-blue {
  width: 48.0876701031%;
  right: 2%;
  top: 47.5%;
}

/*-----------error-message-container-------*/

#section-messages {
  position: fixed;
  width: 100vw;
  height: 100vh;
  padding-top: 0;
  z-index: 10;
  pointer-events: none;
}

.error-message {
  position: absolute;
  width: 95%;
  height: 3.7rem;
  left: 50%;
  transform: translate(-50%, -110%);
  background-color: #2f223a;
  border: 2px solid #faecbf;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  animation-name: error-message-mobile;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
}

.error-message-text > * {
  margin: 0;
}

.error-message-text1 {
  font-size: 1rem;
}

.error-message-text2 {
  font-size: 0.7rem;
}

@keyframes error-message-mobile {
  0% {
  }

  15% {
    transform: translate(-50%, 30%);
  }

  85% {
    transform: translate(-50%, 30%);
  }

  100% {
    transform: translate(-50%, -110%);
  }
}

@media (min-width: 650px) {
  #section-messages {
    max-width: none;
  }

  .error-message {
    width: 70%;
    height: 5rem;
  }

  .error-message-text1 {
    font-size: 1.5rem;
  }

  .error-message-text2 {
    font-size: 1rem;
  }
}

/*----------desktop-media-query-----*/

@media (min-width: 800px) {
  main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 13rem auto;
  }

  #section-house {
    position: fixed;
    width: auto;
    max-width: 13rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  #left-panel {
    text-align: center;
  }

  #section-students {
    grid-column: 2/3;
  }

  .house-text-displayed {
    grid-column: 1/2;
    grid-row: 2/3;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/*----------mist-----*/

#section-mist {
  position: fixed;
  pointer-events: none;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11;
}

.imperio-mist {
  position: absolute;
  width: 0%;
  height: 0%;
  background-image: url(images/imperio-mist.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mist-appearance {
  animation-name: appear;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes appear {
  0% {
    width: 0%;
    height: 0%;
    opacity: 0%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  20% {
    width: 80%;
    height: 80%;
    opacity: 100%;
    transform: translate(-50%, -50%) rotate(-720deg);
  }

  40% {
    transform: translate(-50%, -50%) rotate(-1440deg);
  }

  60% {
    transform: translate(-50%, -50%) rotate(-2160deg);
  }

  80% {
    width: 80%;
    height: 80%;
    opacity: 100%;
    transform: translate(-50%, -50%) rotate(-2880deg);
  }

  100% {
    width: 0%;
    height: 0%;
    opacity: 0%;
    transform: translate(-50%, -50%) rotate(-3600deg);
  }
}