/*
FONTS - these are the names to use in font-family rules:
NovecentoSansCondensedNormal
NovecentoSansWideBold
NovecentoSansWideUltraBold
*/

body {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 2rem;
}

#home-anchor {
  position: absolute;
  top: -20px;
}

nav.main-nav {
  background-color: #3858a7;
  font-family: "NovecentoSansCondensedNormal", 'Arial Narrow', sans-serif;
  font-size: 2.75rem;
  color: #faf6e5;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

nav.main-nav a:link {
  text-decoration: none;
  padding: 0 10px 0 40px;
  color: #faf6e5;
}

nav.main-nav a:visited {
   color: #faf6e5; 
}

nav.main-nav a:hover,
nav.main-nav a:active {
  text-decoration: underline;
}

h1 {
  font-family: "NovecentoSansWideUltraBold", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

h2,
h4,
h5 {
  font-family: "NovecentoSansCondensedNormal", 'Arial Narrow', sans-serif;
}

h3 {
  font-family: "NovecentoSansWideBold", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.showtimes {
  text-align: center;
  font-weight: bold;
}

a.credit {
  color: #faf6e5;
}

#student-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.student-card {
    text-align: center;
}

.student-card h3 {
    font-size: 2rem;
}

.student-card h4 {
    font-size: 2.25rem;
}

.student-image {
    max-width: 300px;
}

.stars {
  text-align: center;
  font-size: 5rem;
  line-height: 3rem;
}

.stars span {
  display: inline-block;
}

.yellow {
  color: #ffcc3f;
  position: relative;
  bottom: 5px;
  rotate: 3deg;
}
.pink {
  color: #ef7cb1;
  rotate: 15deg;
  font-size: 1.2em;
}
.blue {
  color: #3858a7;
  position: relative;
  bottom: 5px;
}
.orange {
  color: #f26330;
  rotate: -5deg;
}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .student-image {
        max-width: 200px;
    }
}

/* Larger than tablet */
@media (min-width: 750px) {
    .student-image {
        max-width: 160px;
    }
}

/* Larger than desktop */
@media (min-width: 1000px) {
    .student-image {
        max-width: 180px;
    }
    .welcome {
    --p: 50px;
      height: auto;
      aspect-ratio: 3/2;
      clip-path: polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
      background: #1bad8d;
    padding: 30px 90px;
    }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    .student-image {
        max-width: 200px;
    }
}

/* Reset default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body background just for preview */
body {
  background: #d9d9d9;
}



/* STUDENT DETAIL CSS !!!! ------- */

.detail-body {
    background-image: url("../images/Background.svg");
    background-color: #FAF6E5;
}

.detail-body header {
  margin-top: 44px;
}
/* navigation ------------------ */

.detail-nav {
  position: relative;
  padding: 20px;
  font-family: "NovecentoSansWideBold", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #FAF6E5;
}

.detail-nav a:hover {
  color: white;
}

.nav-forward {
  position: absolute;
  top: 0;
  right: 7px;

  width: 140px;
  height: 55px; 

  background: #EF7CB1;
  color: black;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-bottom: 7px;
  font-size: 18px; 
  font-weight: bold;
  text-decoration: none;

  border-radius: 50% / 0 0 100% 100%;
}

.nav-back {
  position: absolute;
  top: 0;
  left: 7px;

  width: 140px;
  height: 55px; 

  background: #F26330;
  color: black;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-bottom: 7px;
  font-size: 18px; 
  font-weight: bold;
  text-decoration: none;

  border-radius: 50% / 0 0 100% 100%;
}

/* main page --------------------- */

.detail-main {
  padding: 40px;
  padding-left: 70px;
  margin-top: 40px;
}

.detail-layout {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;  
  margin: 0 auto;     
}

/* Left side section ------------------ */

.detail-card {
  width: 380px;
  min-height: 694.65px;

  background: #ffffff;
  padding: 25px 8px;
  text-align: center;
}


/* student detail information ---------- */

.detail-card h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: -20px;
  font-family: "NovecentoSansWideBold", sans-serif;
}


.headshot-layout {
  width: 280px;
  height: 280px;
  margin: 2px auto; 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headshot-bg {
  position: absolute;

  width: 100%;
  height: 100%;

  background: url("../images/yellow-bg.svg") center/contain no-repeat;
}

.detail-headshot {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
}


.detail-card h2 {
  font-size: 3rem;
  margin-top: -20px;
  margin-bottom: 25px;
}

/* links-------- */

.detail-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin-bottom: 15px;
  padding: 0;
}

.detail-links a {
  width: 40px;
  height: 40px;

  display: flex;
  justify-content: center;
  align-items: center;

  text-decoration: none;
}

.detail-links img {
  width: 60px;
  height: 60px;
  display: block;
}

/* student description ----*/

.detail-card p {
  font-size: 1.6rem;
  text-align: left;
  padding: 0 16px;
}

/* Right side section ------------------ */

.detail-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px 60px;
  justify-items: center;
}

.project-box {
  width: 100%;
  max-width: 350px;
  border: 12px solid #FFCC3F;
  background: transparent;
  align-self: start; 
}
.project-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* lightbox css */

.lightbox-caption.small {
  font-size: 1em;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  background-color: black;
}

.modal-dialog {
  transform: none !important;
}

.modal-content {
  position: relative;
}

.modal.show .btn-close {
  position: absolute;
  top: 40px !important;
  right: 10px;

  width: 2.2rem;
  height: 2.2rem;

  background-color: white;
  opacity: 1;

  z-index: 9999;
}

.modal .carousel-control-prev {
  left: -35px;
}

.modal .carousel-control-next {
  right: -35px;
}

.modal-open .detail-layout {
  pointer-events: none;
}


/* Portfolio boxes ------ */

.box-1 {
  grid-column: 2;
  margin-top: 0;
}

.box-2 {
  grid-column: 1;
  margin-top: -60px;
}

.box-3 {
  grid-column: 2;
  margin-top: 80px;
}

/* MOBILE student detail page css */

@media (max-width: 768px) {

  .detail-layout {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

     .detail-card {
    width: 90%;
    max-width: 380px;
  }

   .detail-main {
    padding: 20px;
  }

  .headshot-layout {
    width: 220px;
    height: 220px;
  }

  .detail-headshot {
    width: 140px;
    height: 140px;
  }

  .detail-card h1 {
    font-size: rem;
    margin-bottom: -10px;
  }

  .detail-card h2 {
    font-size: 3rem;
    margin-top: 0;
  }

  .detail-card p {
    font-size: 1.5rem;
    text-align: left;
    padding: 0 16px;
  }


  /* mobile project section */

.detail-projects {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 20px;
}


  .project-box {
  width: 90%;
  max-width: 350px;
  height: auto;
  border: 12px solid #FFCC3F;
  background: transparent;
}

.box-1,
.box-2,
.box-3 {
  grid-column: auto;
  margin-top: 0;
}

}

/* mobile lightbox css */

@media (max-width: 768px) {

  .lightbox-caption.small {
  font-size: 1em;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

  body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
  .modal-backdrop.show {
    opacity: 1 !important;
    background-color: black !important; 
  }
  .modal-content {
    background: transparent;
    border: none;
  }

  /* Mobile navigation */
  nav.main-nav {
    text-align: center;
  }

  nav.main-nav a:link:first-child {
    padding-left: 0;
  }
    nav.main-nav a:link:last-child {
    padding-right: 0;
  }

  .container p {
    padding: 0 10px!important;
  }
}


/* END OF STUDENT DETAIL CSS */



/* START OF FOOTER */

.footer {
  background: #FAF6E5;
  padding: 40px 20px;
  position: relative;
}

/* blue line */
.footer-line {
  width: 100%;
  height: 3px;
  background: #2e4a9e;
  position: absolute;
  top: 0;
  left: 0;
}

/* main container */
.footer-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

/* left column */
.footer-left {
  justify-self: start;
   padding-left: 50px;
}

.footer-left img {
  max-width: 200px;
  height: auto;
}

/* center column */

.footer-center {
  justify-self: center;
  text-align: center;
}

.footer-text {
  margin-bottom: 10px;
    font-family: "NovecentoSansWideUltraBold", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 2.5rem;
}

.footer-links a {
  margin: 0 8px;
  text-decoration: none;
  font-size: 2.25rem;
  font-family: "NovecentoSansCondensedNormal", 'Arial Narrow', sans-serif;
  color: #333;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* right column */

.footer-right {
  justify-self: end;
  /* padding-right: 50px;
  max-width: 250px; */
}

.logo-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.3rem;
}

/* logo and acknowlegment */

.logo-text img {
  width: 90px;
  height: auto;
  flex-shrink: 0;
}

.logo-text p {
  margin: 0;
  max-width: 120px;
   font-family: "Raleway", Arial, Helvetica, sans-serif;
   font-size: 1.25rem;
  line-height: 1.75rem;
}

.decor-img {
  width: 35px !important; 
  height: auto !important;
  flex-shrink: 0;
}

/* copyright */
.footer-bottom {
  max-width: 1300px;
  margin: 30px auto 0;
  text-align: center;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
}

/* mobile footer */

@media (max-width: 768px) {

  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 25px;
  }


  .footer-left,
  .footer-right {
    justify-self: center;
    padding-left: 0;
    padding-right: 0;
  }


  .logo-text {
    flex-direction: column;
    text-align: center;
  }

  .footer-text {
    font-size: 1.6rem;
  }

  .footer-links a {
    /* font-size: 1.2rem; */
  }

  
  .logo-text img {
    /* width: 70px; */
  }


  .decor-img {
    /* width: 25px !important; */
  }

 
  .footer-bottom {
    /* font-size: 1.1rem; */
  }
}

/* END OF FOOTER */






/* Homepage Background */
body {
  background-image: url("../images/Background.svg");
  background-color: #FAF6E5;
}

/* End of Homepage Background */

/* Top Logo */
.top-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  max-width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.top-img-logo {
  background-color: #FAF6E5;
  max-width: 100%;
  margin-top: 40px;
}

h1 span
{background-color: #FAF6E5;}

/* End of Top Logo */

/* Welcome*/
.container {margin-top: 70px;}

.container p {
  padding: 0 50px;
}

.welcome-h2 {
  text-align: center;
}
.welcome {
  background-color: #1BAE8C;
  width: 100%;
  color: #FAF6E5;
  margin: 0 auto;
  padding: 30px;
  margin: 40px 0px;
}

.designer {
  margin-top: 70px;
  text-align: center;

}

#student-grid {
  margin-bottom: 70px;

}

/* End of Welcome*/

/* Student Images */
.student-card {
  max-width: 220px;
}

.student-image-container-yellow {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/yellow-bg.svg") center/contain no-repeat;
}

.student-image-container-blue {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/blue-bg.svg") center/contain no-repeat;
}

.student-image-container-orange {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/orange-bg.svg") center/contain no-repeat;
}

.student-image-container-green {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/green-bg.svg") center/contain no-repeat;
}

.student-image-container-pink {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/pink-bg.svg") center/contain no-repeat;
}

.student-link, .student-link:visited, .student-link:hover, .student-link:active {
  text-decoration: none;
  color:black;
}

.student-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

}

.student-info {
  background-color: #FAF6E5;
  margin: 2px;
}

.student-info h3 {
  margin-bottom: 10px;
}
.student-info h4 {
  margin-top: 0px;
}

/* End of Student Images */

/* Video*/
.video-show-headline, .video-reception-headline {
background-color: #FAF6E5;
display: inline;
}
 
.video {
  width: 100%;
  text-align: center;
}


.video-size iframe {
  min-height: 500px;
  border: 15px solid #2e4a9e;
}

.video-size {
margin-top: 40px;
}

.video2 {
  margin-bottom: 150px;
}
  
/* End of Video */