body {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    align-items: stretch;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48pt;
    font-weight: 400;
    margin: 0;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 24pt;
    margin: 0;
}

h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 24pt;
  margin: 0;
  font-weight: 300;
  color: #29292D;
}

h4 {
  font-family: 'Barlow', sans-serif;
  font-size: 20pt;
  margin: 0;
  font-weight: 300;
  color: #29292D;
}

h5 {
  font-family: 'Barlow', sans-serif;
  font-size: 12pt;
  font-weight: 300;
  color: #29292D;
  padding-top: 12px;
  margin: 0;
}

h6 {
  font-family: 'Barlow', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  color: #29292D;
  padding-top: 0px;
  margin: 0;
}

.subtitle {
  font-family: 'Barlow', sans-serif;
  font-size: 12pt;
  font-weight: 300;
  color: #29292D;
  margin: 0;
}

button {
  margin-top: 24px;
  text-align: left;
  display: flex;
  background-color: #ffffff;
  font-family: Barlow;
  font-size: 18px;
  color: #29292D;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

button:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: 6px 6px 0px #F2CDD1;
  cursor: pointer;
}

button:active {
  background: #D9E8EF;
}

button:enabled {
  cursor: pointer;
}

button:disabled {
  border: 1px solid #C9CCD0;
  cursor: not-allowed;
}

.button-container {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
}

.img-shadow {
  box-shadow: 12px 12px 0px #D1F1F5;
}

.img-shadow:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: 16px 16px 0px #F2CDD1;
}


.banner {
    background-color: #ffffff;
    padding: 48px 24px 48px 24px;
    margin: 0%;
}
  .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 24px;
  }

  .banner-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4px 10px;
    gap: 12px;
  }

  .banner-mini {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
  }

  .banner-mini a {
    transition: box-shadow 0.2s ease-in-out;
  }
  
  .banner-mini a:hover {
    transition: all 0.2s ease-in-out;
    box-shadow: 4px 4px 0px #F2CDD1;
    color: #29292D;
  }

  @media (max-width: 660px) {
    .banner-content {
      flex-direction: column;
    }
    
}

.title {
  background-color: #ffffff;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 48px;
  margin: auto;
} 

.class-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px;
  margin: auto;
}

.project-title {
  background-color: #FAFAFA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px;
  margin: auto;
} 

.topnav {
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center; position: sticky;
    top: 0;
    z-index: 100;
}
  
  .topnav a {
    float: left;
    display: block;
    font-family: Barlow;
    color: #29292D;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 20px;
  }
  
  .topnav a:hover {
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 -8px 0 #F2CDD1;
    color: #29292D;
  }
  
  .topnav a.active {
    box-shadow: inset 0 -8px 0 #CDE3ED;
    color: #29292D;
  }
  
  .topnav .icon {
    display: none;
    color: #29292D;
  }

  .topnav h5 {
    padding: 12px;
    display: none;
  }
  
  @media screen and (max-width: 540px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 540px) {
    .topnav.responsive {position: relative; flex-direction: column; position: sticky; top: 0; z-index: 100;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: flex;
      justify-content: center;
      text-align: center;
    }
    .topnav.responsive h5 {
      display:flex;
    }
}

footer {
  display: flex;
  background-color: #FAFAFA;
  padding: 20px;
  width: 100%;
  justify-content: center;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-row a {
  float: left;
  display: block;
  font-family: Barlow;
  color: #29292D;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 20px;
}

.footer-row a:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 -8px 0 #F2CDD1;
  color: #29292D;
}


.hero {
    background-color: #ffffff;
    padding: 48px 24px 48px 24px;
    margin: 0%;
  }

  /* floating shapes in the hero section */
  .wrapper{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 300px;
    /* overflow: hidden; */
    background: transparent;
  }

  .box div{
    position: absolute;
    width: 100px;
    height: 100px;
    background: transparent;
    border: transparent;
  }

  .box div:nth-child(1){ /* arc */
    top:32%;
    left: 20%;
    animation:animate 330s linear infinite;
  }

  .box div:nth-child(2){ /* polygon */
    top:90%;
    left: 27%;
    animation:animate 170s linear infinite;
  }

  .box div:nth-child(3){ /* end floating shapes */
    top:97%;
    left: 6%;
    animation:animate 190s linear infinite;
  }

  @keyframes animate{
    0%{
      transform: scale(1) translateY(-90px) rotate(360deg);
      opacity: .88;
    }
    100%{
      transform: scale(1.3) translateY(-90px) rotate(-180deg);
      border-radius: 50%;
      opacity: .88;
    }
    
  }
  /* end floating shapes */

  .hero-content {
    display: flex;
    max-width: 840px; /* limit the width of the content section */
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  
  .hero-text {
    flex-basis: 50%;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 24px;
  }
  
  .hero-image {
    flex-basis: 40%;
    margin-top: 0px;
    align-items: flex-end;
  }
  
  @media (max-width: 660px) {
    .hero-content {
      flex-direction: column;
    }
    
    .hero-text,
    .hero-image {
      flex-basis: 100%;
      text-align: center;
      align-items: center;
    }
    
    .hero-image {
      margin-top: 20px;
    }
}

.content-section {
  /* background-color: #F5F5F5; /* unused placeholderlight gray background */
  background-image: url('images/About/content-bg.jpg');
  background-repeat: repeat;
  padding: 24px 24px 36px 24px;
}

.container {
  max-width: 840px; /* limit the width of the content section */
  margin: 0 auto; /* center the content section on the page */
  display: flex;
  justify-content: space-between;
}

.text-block {
  max-width: 50%; /* occupy the left half of the area by default */
  background-color: #ffffff;
  padding: 32px;
  box-shadow: 12px 12px 0px #D1F1F5;
}

@media screen and (max-width: 660px) {
  .text-block {
    max-width: 80%; /* occupy 90% of the width when the screen size is 660px or less */
  }
}

.text-block p {
  margin: 0; /* remove the default margin of the paragraph */
}

.text-block button {
  margin-top: 24px; /* 24px padding between the paragraph and the button */
  text-align: left; /* left-align the button */
  display: flex;
  background-color: #ffffff;
  font-family: Barlow;
  font-size: 18px;
  color: #29292D;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
}


.resume {
  background-color: #ffffff;
  padding: 0px 24px 48px 24px;
  margin: 0%;
}

.resume-content {
  display: flex;
  max-width: 840px; /* limit the width of the content section */
  margin: 0 auto;
  margin-bottom: 48px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 24;
}

.resume-text {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 24px;
}

.resume-image {
  flex-basis: 40%;
  margin-top: 4px;
  align-items: flex-end;
  padding-left: 24px;
  padding-bottom: 24px;
}

@media (max-width: 660px) {
  .resume-content {
    flex-direction: column;
  }
  
  .resume-text,
  .resume-image {
    flex-basis: 100%;
    text-align: left;
    align-items: flex-start;
  }
  
  .resume-image {
    margin-top: 20px;
  }
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 24px;
  gap: 24px;
  background-color: #FAFAFA 0%;
}

.image-container {
  display: flex;
  width: 30%;
  margin-bottom: 20px;
  position: relative;
}

.image-container img {
  width: 100%;
  height: auto;
}

.image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px 0px 12px 12px;
  text-align: left;
}

.image-container a {
  transition: box-shadow 0.2s ease-in-out;
  background-color: inherit;
}

.image-container a:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: 8px 8px 0px #F2CDD1;
}

@media screen and (max-width: 840px) {
  .image-container {
    width: 45%;
  }
}

@media screen and (max-width: 660px) {
  .image-container {
    width: 90%;
  }
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 48px;
  gap: 48px;
}

.left-container {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
}

.left-container img {
  max-width: 100%;
  height: auto;
}

.left-container img a:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: 6px 6px 0px #F2CDD1;
  cursor: pointer;
}


.left-container h5 {
  margin-bottom: 24px;
}

.left-container h6 {
  color: #FAFAFA;
  visibility: hidden;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 12px 12px 0px #D1F1F5;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#modal-img {
  max-width: 90%;
  max-height: 90%;
}

.left-container a {
  display: block;
  margin-bottom: 20px;
}

.left-container a img {
  display: block;
  width: 100%;
  height: auto;
}

.right-container {
  flex-basis: 35%;
}

@media screen and (max-width: 800px) {
  .flex-container {
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }
  
  .left-container {
    flex-basis: 100%;
  }
  
  .right-container {
    flex-basis: 100%;
  }
}

/* extra Content Container */

.extra-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 48px;
  gap: 48px;
  background-color: #FAFAFA;
}

.extra-left-container {
  flex-basis: 35%;
}

.extra-right-container h5 {
  margin-bottom: 24px;
}

.extra-right-container {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
}

.extra-right-container img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 800px) {
  .extra-container {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  
  .extra-left-container {
    flex-basis: 100%;
  }
  
  .extra-right-container {
    flex-basis: 100%;
  }
}

/* Class Module */

.module {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 48px;
  gap: 48px;
  background-color: #FAFAFA;
}

.module button {
  margin-top: 12px;
}

.left-module {
  flex-basis: 35%;
}

.right-module h5 {
  margin-bottom: 24px;
}

.right-module {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
}

.right-module img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 800px) {
  .module {
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }
  
  .left-module {
    flex-basis: 100%;
  }
  
  .right-module {
    flex-basis: 100%;
  }
}