/* Header / Banner */

.banner {
  height: 685px;
  background: url("../assets/images/banner-houses.png") #121315 no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  padding: 80px 0;
}

.banner .container .header-infos {
  display: inline-block;
  width: 49%;
  vertical-align: middle;
}

.banner .container .house-logo {
  text-align: right;
}

.banner .container .house-logo .circle-wrapper {
  height: 520px;
  width: 520px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.banner .container .house-logo .circle-wrapper img {
  width: 100%;
  height: 530px;
  object-fit: contain;
  position: absolute;
  left: 0;
}

.banner h1 {
  font-family: Cinzel, serif;
  font-weight: normal;
  font-size: 5rem;
  margin-bottom: 40px;
}

.banner p {
  max-width: 350px;
}

.banner p.author {
  font-family: Cinzel, serif;
  text-transform: capitalize;
  margin-top: 20px;
}

.banner .button-wrapper {
  margin-top: 40px;
}

/* Section */

.section {
  margin-bottom: 80px;
  margin-top: 80px;
}

.section h2 {
  text-transform: uppercase;
  text-align: center;
}

.section .description {
  max-width: 970px;
  text-align: center;
  margin: 40px auto;
}

#selector-hat-quote .card {
  padding: 95px 100px;
}

#selector-hat-quote .card .quote {
  max-width: 59.5%;
  text-align: right;
  position: relative;
}

#selector-hat-quote .card .selector-hat {
  width: 40%;
}

#selector-hat-quote .card .quote,
#selector-hat-quote .card .selector-hat {
  display: inline-block;
  vertical-align: middle;
}

#selector-hat-quote .card .quote p {
  font-size: 1.75rem;
  line-height: 2.5rem;
  color: rgba(255, 255, 255, 0.6);
  text-indent: 5rem;
}

#selector-hat-quote .card .quote .author {
  font-family: Cinzel, serif;
  font-size: 1.25rem;
  margin-top: 20px;
  text-transform: uppercase;
}

#selector-hat-quote .card .quote .quote-icon {
  font-family: Cinzel, serif;
  font-size: 16rem;
  position: absolute;
}

#selector-hat-quote .card .quote .quote-icon.left {
  top: -130px;
  left: 50px;
}

#selector-hat-quote .card .quote .quote-icon.right {
  right: 0;
}

#section-house-features .house-features-container {
  text-align: center;
}

#section-house-features .house-features-container .card {
  display: inline-block;
  margin-top: 40px;
  padding: 20px 40px;
  position: relative;
}

#section-house-features .house-features-container .card#ghost {
  margin: 0 90px;
}

#section-house-features .house-features-container .card .feature {
  font-family: Cinzel, serif;
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-right: 8px;
}

#section-house-features .house-features-container .card .icon {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
}

#section-house-features .house-features-container .card .icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: bottom;
}

#section-house-members .members {
  margin-top: 80px;
  text-align: center;
}

#section-house-members .members .member-picture {
  display: inline-block;
  margin: 0 24px;
}

#section-house-members .members .member-picture img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid;
}

#section-house-members .actions {
  text-align: center;
  margin-top: 80px;
}

#section-house-director {
  text-align: center;
}

#section-house-director .infos {
  width: 50%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  margin-right: 100px;
}

#section-house-director .infos h2 {
  text-align: left;
}

#section-house-director .infos p {
  line-height: 2rem;
}

#section-house-director .title-divider {
  width: 130px;
  border-top: 6px solid;
  margin: 40px 0;
}

#section-house-director .section-image {
  width: 25%;
  display: inline-block;
  position: relative;
}

#section-house-director .section-image img {
  width: 350px;
  height: 440px;
  object-fit: cover;
}

#section-house-director .section-image .image-frame {
  border: 1px solid;
  position: absolute;
  width: 350px;
  height: 420px;
  top: 10px;
  left: 15px;
}

/* Card */

.card {
  background-color: black;
  border-radius: 15px;
  box-shadow: 6px 8px 20px rgba(0, 0, 0, 0.25);
  padding: 40px;
}

/*******************************/
/** House Color - Gryffindor **/
/*****************************/

#page-house-gryffindor {
  background: linear-gradient(180deg, #121315 3.04%, #1b0909 90.21%);
}

#page-house-gryffindor .navbar .nav-item.active {
  color: red;
}

#page-house-gryffindor .banner .container .house-logo .circle-wrapper,
#page-house-gryffindor button {
  background-color: #901212;
}

#page-house-gryffindor h1,
#page-house-gryffindor h2,
#page-house-gryffindor h3,
#page-house-gryffindor .author,
#page-house-gryffindor #selector-hat-quote .card .quote p.author,
#page-house-gryffindor .quote-icon,
#page-house-gryffindor .feature {
  color: #bf8328;
}

#page-house-gryffindor .card {
  background-color: #1e171a;
}

#page-house-gryffindor .section-divider .section-divider-border,
#page-house-gryffindor #section-house-members .member-picture img,
#page-house-gryffindor #section-house-director .section-image .image-frame {
  border-color: #b4710c;
}

#page-house-gryffindor #section-house-director .title-divider {
  border-color: #901212;
}

/******************************/
/** House Color - Slytherin **/
/****************************/

#page-house-slytherin {
  background: linear-gradient(180deg, #121315 3.04%, #131812 90.21%);
}

#page-house-slytherin .navbar .nav-item.active {
  color: #10ce44;
}

#page-house-slytherin .banner .container .house-logo .circle-wrapper,
#page-house-slytherin button {
  background-color: #066d22;
}

#page-house-slytherin h1,
#page-house-slytherin h2,
#page-house-slytherin h3,
#page-house-slytherin .author,
#page-house-slytherin #selector-hat-quote .card .quote p.author,
#page-house-slytherin .quote-icon,
#page-house-slytherin .feature {
  color: #10ce44;
}

#page-house-slytherin .card {
  background-color: #171e1a;
}

#page-house-slytherin .section-divider .section-divider-border,
#page-house-slytherin #section-house-members .member-picture img,
#page-house-slytherin #section-house-director .section-image .image-frame {
  border-color: #066d22;
}

#page-house-slytherin #section-house-director .title-divider {
  border-color: #9e9e9e;
}

/******************************/
/** House Color - Ravenclaw **/
/****************************/

#page-house-ravenclaw {
  background: linear-gradient(180deg, #121315 3.04%, #10171d 90.21%);
}

#page-house-ravenclaw .navbar .nav-item.active {
  color: #00a3ff;
}

#page-house-ravenclaw .banner .container .house-logo .circle-wrapper,
#page-house-ravenclaw button {
  background-color: #855c42;
}

#page-house-ravenclaw h1,
#page-house-ravenclaw h2,
#page-house-ravenclaw h3,
#page-house-ravenclaw .author,
#page-house-ravenclaw #selector-hat-quote .card .quote p.author,
#page-house-ravenclaw .quote-icon,
#page-house-ravenclaw .feature {
  color: #00a3ff;
}

#page-house-ravenclaw .card {
  background-color: #17191e;
}

#page-house-ravenclaw .section-divider .section-divider-border,
#page-house-ravenclaw #section-house-members .member-picture img,
#page-house-ravenclaw #section-house-director .section-image .image-frame {
  border-color: #00a3ff;
}

#page-house-ravenclaw #section-house-director .title-divider {
  border-color: #855c42;
}

/******************************/
/** House Color - Hufflepuff **/
/****************************/

#page-house-hufflepuff {
  background: linear-gradient(180deg, #121315 3.04%, #1d1b10 90.21%);
}

#page-house-hufflepuff .navbar .nav-item.active {
  color: #eab600;
}

#page-house-hufflepuff .banner .container .house-logo .circle-wrapper,
#page-house-hufflepuff button {
  background-color: #eab600;
}

#page-house-hufflepuff h1,
#page-house-hufflepuff h2,
#page-house-hufflepuff h3,
#page-house-hufflepuff .author,
#page-house-hufflepuff #selector-hat-quote .card .quote p.author,
#page-house-hufflepuff .quote-icon,
#page-house-hufflepuff .feature {
  color: #eab600;
}

#page-house-hufflepuff .card {
  background-color: #1e1d17;
}

#page-house-hufflepuff .section-divider .section-divider-border,
#page-house-hufflepuff #section-house-members .member-picture img,
#page-house-hufflepuff #section-house-director .section-image .image-frame {
  border-color: #eab600;
}

#page-house-hufflepuff #section-house-director .title-divider {
  border-color: #eacc64;
}