body {
  background-image: url("images/background.png");
  background-attachment: fixed;
}

.hogwarsth1 {
  margin-bottom: -97px;
  margin-top: 25px;
}

.hack {
  position: relative;
  width: 10vw;
  height: auto;
  left: 78vw;
  top: -2vw;
  margin-bottom: -9px;
  filter: opacity(0.3);
  border-radius: 50%;
  transform: scale(1);
  animation: pulse 2.5s infinite;
  cursor: pointer;
}

.hogwarts {
  display: block;
  width: 165px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.9);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

/*-----student template--------*/
#studentlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 3em;
  min-height: 90vh;
  padding: 3em;
}

.articleWrapper {
  background-color: #002241;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.2em auto;
  width: 419px;
  height: 239px;
  border-radius: 15px;
  color: white;
}
img {
  height: 45%;
  margin-left: 1.6em;
  margin-bottom: 5em;
}
.columRight {
  margin-left: 2em;
  margin-bottom: 5em;
}

.readMore {
  background-color: #0f626c;
  color: white;
  padding: 8px 55px;
  position: absolute;
  left: 1.9vw;
  top: 12.5vw;
}
.readMore:hover {
  box-shadow: 1px 1px 2px 1px #08474e;
}

.expell {
  background-color: #881a1b;
  color: white;
  padding: 8px 69px;
  position: absolute;
  left: 15.1vw;
  top: 12.5vw;
}
.expell:hover {
  box-shadow: 1px 1px 2px 1px #631314;
}

button {
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
/*------------prefects-------------*/
.prefect {
  background-image: url("./images/prefect.png");
  width: 38px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  left: -0.5vw;
  top: -0.5vw;
  /* filter: opacity(0.3); */
}
.prefect:hover {
  filter: none;
}

.gray {
  filter: grayscale();
}
/*------------InquisSquad-------------*/
.InquisSquad {
  background-image: url("./images/Isquad.png");
  width: 33px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  left: -0.5vw;
  top: -0.5vw;
  /* filter: opacity(0.3); */
}
.InquisSquad:hover {
  filter: none;
}

h1 {
  color: white;
  font-size: 3em;
  text-align: center;
}
h2 {
  margin-bottom: 1em;
}
h4 {
  margin-top: -1.01em;
}
.filter {
  background-color: white;
  padding: 8px 8px;
  margin-inline: 3px;
}
.filter:hover {
  background-color: #e7ba25;
  box-shadow: 1px 1px 3px 1px #c39c1a;
  color: white;
}
.filterText {
  color: white;
  padding-left: 3em;
}
.sort {
  background-color: white;
  padding: 8px 8px;
  margin-inline: 3px;
}
.sort:hover {
  background-color: #e7ba25;
  box-shadow: 1px 1px 3px 1px #c39c1a;
  color: white;
}

/*----------------popUp---------------*/
#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border-radius: 15px;
  z-index: 10;
  background-color: white;
  width: 40%;
  height: 57%;
  display: flex;
}

#popup.active {
  transform: translate(-50%, -50%) scale(1);
}

.housecrest {
  position: relative;
  left: 1vw;
  top: 1vw;
  width: 65px;
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.detailimg {
  height: 115px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 56px;
  margin-bottom: 29px;
}

#close {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 1.5em;
  cursor: pointer;
  background-color: transparent;
}
h3 {
  margin-bottom: 0;
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 25px;
}

/*-------search bar-------*/

#search {
  float: right;
  padding-right: 3em;
}

#search input {
  width: 222px;
  height: 30px;
}
/*-------counting-------*/
.number {
  float: right;
  margin-right: 98px;
}

/*-----expelling-----*/

.hide {
  visibility: hidden;
}

/*--------------dialog----------------*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  box-shadow: 4px 3px 8px #691314;
  border-radius: 12px;
  padding: 2em;
  background-color: #9b2223;
  position: relative;
  filter: opacity(0.8);
  color: ghostwhite;
}
button.closebutton {
  position: absolute;
  right: 1em;
  top: 1.1em;
  /* width: 1em; */
  /* height: 3em; */
  background-color: transparent;
  color: ghostwhite;
  cursor: pointer;
}
.dialog h3 {
  margin-top: 0;
  font-weight: bolder;
}
.dialog p {
  font-weight: bold;
}
#removeb,
#removea {
  background-color: #791010;
  padding: 8px 8px;
  margin-inline: 2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px 1px #5d0c0c;
}