/* varialbes */
:root {
  /* colors */
  --bc: hsl(0deg 0% 0%);
  --high-light: hsl(55deg 89% 47%);
  --high-light2: hsl(0deg 76% 49%);
  --house-gryf: hsl(354deg 58% 32%);
  --house-slyt: hsl(139, 23%, 24%);
  --house-huff: hsl(42deg 57% 32%);
  --house-raven: hsl(237deg 42% 24%);
  --white: hsl(0, 0%, 100%);

  --button1st: hsl(0deg 0% 89% / 18%);
  --button2nd: hsl(0deg 5% 34% / 62%);

  --background: hsl(0deg 0% 0% / 60%);
  --table: hsl(0deg 1% 33% / 60%);

  --font-tittle: "Aladin", cursive;
  --font-body: "Cormorant Garamond", serif;
}

/* reset */
body,
p,
a,
ul,
li,
dl {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

/* base styles */

* {
  box-sizing: border-box;
  /* outline: 2px dotted red; */
}

/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Aladin&family=Cormorant+Garamond:ital,wght@0,500;1,500;1,600&display=swap");

/* --------------------------------- Home Page --------------------- */

h1 {
  font: bold 7rem/30px var(--font-tittle);
  color: var(--high-light);
}

#intro_page p {
  font: bold 2rem/25px var(--font-tittle);
  color: var(--white);
}
h2 {
  font: bold 2rem/25px var(--font-tittle);
  color: var(--white);
}

#intro_page {
  position: relative;
  height: 100%;
  background: var(--background) url(./assets/images/home_page_backg.jpg) no-repeat right top;
  background-blend-mode: color;
  background-size: cover;
}
#intro_page main {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100%;
  height: 96.5vh;
  margin: auto;
  place-items: center;
  overflow: hidden;
}
#title {
  text-align: center;
}
@keyframes intro {
  0% {
    transform: translateY(70vw);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0vw);
    opacity: 1;
  }
}
.intro {
  animation: intro 4s ease-in-out;
}

#intro_page p {
  font-size: 1.5rem;
}
#button {
  border: 1px solid var(--button1st);
  color: var(--white);
  font: bold 14px/30px var(--font-tittle);
  padding: 1% 2%;
  border-radius: 10px;
  background-color: var(--button1st);
  margin-top: -10%;
}
footer {
  display: block;
  width: 10%;
  margin: auto;
  color: var(--white);
}

/* --------------------------------- Student List Page --------------------- */

#body_list {
  background: var(--background) url(../Hacked_Hogwarts_Student_List/assets/images/list_background.jpg) no-repeat right top;
  background-blend-mode: color;
  background-size: cover;
  overflow-x: hidden;
}

#subt {
  display: block;
  width: 40%;
  margin: 3% auto;
}

#fil_status {
  margin-left: 5%;
}

/* ---------------------------------- //TABLE// ---------------------- */

table {
  width: 90%;
  margin: 3% auto;
}

table,
th,
td,
.input,
button {
  border-top: 1.5px solid var(--button1st);
  border-left: 1.5px solid var(--button1st);
  border-radius: 6px;
}

th,
.input {
  background-color: var(--background);
  padding: 1%;
  font: bold 0.9rem/1rem var(--font-body);
  color: var(--high-light);
}

td,
button,
input {
  background-color: var(--table);
  padding: 1% 2%;
  font: 14px/10px var(--font-body);
  color: var(--white);
}
input {
  margin: 3%;
  border-radius: 6px;
  padding: 1%;
}

#search {
  background: url(./assets/images/search-normal.png) no-repeat right;
  background-size: 13%;
}

/*-------------------- // TOTALS // ---------------*/
#wraper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25%;
  margin: 3% 10%;
}
#totals,
#houses {
  display: flex;
  flex-direction: column;
}
#houses button {
  margin-top: 3%;
}
/* ------------------ // POP-UP student inf // ------------- */
main {
  position: relative;
}

#pop_up {
  display: none;
  position: absolute;
  text-align: center;
  left: 25%;
  top: 12%;
  width: 55%;
  font: bold 1rem/3rem var(--font-tittle);
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255.1), rgba(255, 255, 255, 0));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
}

#house {
  margin: 2%;
}
dt {
  border-bottom: 1.5px solid var(--button2nd);
}
dd {
  color: var(--white);
}
dt,
dd {
  display: inline-block;
  width: 45%;
  text-align: left;
}

/*-- //classes to open and close pop-ups// --*/

#pop_up.open {
  display: block;
}
#close_pop.open {
  display: block;
}
main.close {
  display: none;
}
#close_pop {
  font: bold 3rem/3rem var(--font-tittle);
  position: absolute;
  top: 10%;
  right: 7%;
  color: var(--white);
}

/* -------- //PREFECTS// ------------ */
td[data-field="prefect"]::after {
  content: "🧙‍♀️";
}

td[data-field="prefect"][data-prefect="false"]::after {
  filter: grayscale(1);
}
#remove_aorb {
  display: none;
  position: absolute;
  left: 30%;
  top: 30%;
  width: 40%;
  color: var(--high-light2);
  font: bold 1rem/3rem var(--font-tittle);
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255.1), rgba(255, 255, 255, 0));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
}
#remove_a,
#remove_b {
  padding: 3%;
}
#close_pop_remov_aorb {
  font: bold 3rem/3rem var(--font-tittle);
  position: absolute;
  top: 0;
  right: 5%;
  color: var(--white);
}
#remove_aorb.open {
  display: block;
}

#house_name {
  /* inside the prefect pop-up */
  color: var(--high-light);
}

/* --- //color per houses// --- */
.gryf_color {
  color: var(--house-gryf);
}

tr.gryf_background {
  background-color: var(--house-gryf);
}
.slyt_color {
  color: var(--house-slyt);
}
.huff_color {
  color: var(--house-huff);
}
.raven_color {
  color: var(--house-raven);
}

/* --------------------------- // Changing Background// ----------------- */
#body_list.back_griff,
#body_list.back_slyt,
#body_list.back_huff,
#body_list.back_raven {
  height: 100%;
  background-blend-mode: color;
  background-size: cover;
}
#body_list.back_griff {
  background: var(--background) url(./assets/images/Gryffindor.jpg) repeat top;
}
#body_list.back_slyt {
  background: var(--background) url(./assets/images/Slytherin.jpg) repeat top;
}
#body_list.back_huff {
  background: var(--background) url(./assets/images/Hufflepuff.jpg) repeat top;
}
#body_list.back_raven {
  background: var(--background) url(./assets/images/Ravenclawn.jpg) repeat top;
}
tr.hidde {
  display: none;
}
th.sortBy {
  /* active effect in the choosen sorting button */
  background: linear-gradient(120deg, rgba(180, 180, 200.1), rgba(255, 255, 255, 0));
}

/* ----------------------- //arrow sortingdirections// ------------------------------ */
th.sortBy[data-sort-direction="asc"]::after {
  content: "⇩";
  padding-left: 4px;
}
th.sortBy[data-sort-direction="desc"]::after {
  content: "⇧";
  padding-left: 4px;
}

/* ----------------------- //visual feedback from expelling students // ------------------------------ */
@keyframes animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100vw);
  }
}
.animation {
  animation: animation 2s ease-in-out;
}

/* -------- //INQUISITORIAL SQUAD// ------------ */

td[data-field="inq_squad"]::after {
  content: "👮‍♂️";
}

td[data-field="inq_squad"][data-squad="false"]::after {
  filter: grayscale(1);
}

/* ---------- //pop-up hacking// ----------- */

#hacking,
#hacker,
#deleted_squad {
  display: none;
  position: absolute;
  left: 30%;
  top: 40%;
  width: 40%;
  color: var(--high-light2);
  font: bold 1rem/3rem var(--font-tittle);
  text-align: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255.1), rgba(255, 255, 255, 0));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
}

#close_pop_hack,
#close_pop_hacker,
#close_pop_deleted_squad {
  font: bold 2rem/2rem var(--font-tittle);
  position: absolute;
  top: 4%;
  right: 4%;
  color: var(--white);
}
#hacking.open,
#hacker.open,
#deleted_squad.open {
  display: block;
}

#body_list.backgroundDark {
  background-color: black;
  /* experimenting changing the backgound color of each prefect but it is not working(yet) */
}

/* responsiveness way too ambitious!!!! */
/* small tablet styles */
@media screen and (min-width: 620px) {
}
/* large tablets and laptop styles */
@media screen and (min-width: 960px) {
}

/* destop styles */
@media screen and (min-width: 1200px) {
}