/* //////////////////////////////////////////

Homepage CSS

////////////////////////////////////////// */

/* MOBILE SCREEN STYLING */
h1 {
  align-self: flex-end;
  color: var(--foam);
  text-align: center;
  letter-spacing: 10px;
  animation-name: h1Animation;
  animation-duration: 5s;

  padding-bottom: 2em;

  position: fixed;
}

h2 {
  padding-bottom: 2rem;
}

h3 {
  color: var(--foam);
  text-align: center;
}

h4 {
  color: var(--gold);
}

header {
  display: block;
  width: 100%;
  height: 100vw;

  z-index: 0;
}

.header-content {
  display: flex;

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

  position: fixed;
  background: linear-gradient(var(--transparent) 40%, var(--purple));
  width: 100%;
  height: 100vw;
}

#homepage-video {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  height: 100vw;
}

/* //////////////////////////////////////////

About me section

////////////////////////////////////////// */

main {
  display: flex;
  flex-flow: column;
  align-items: center;
  height: fit-content;

  width: 100%;
  z-index: 1;
  background-color: var(--foam);
}

#homepage-quote {
  background-color: var(--lightblue);
}

#about-me {
  border-top: 5px solid var(--lightblue);
}
main article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: nowrap column;
  padding: 6rem 0;
  width: 100%;
}
.article-text-block {
  width: 80%;
}
.article-text-block,
#homepage-photo {
  margin: 2rem;
}
main p {
  font-size: 1.2rem;
}

#homepage-photo {
  width: 80%;
  height: 60vh;
  background: url(../img/hdc-hielke-at-coniston.jpg) no-repeat center;
  background-size: cover;
}
@keyframes h1Animation {
  from {
    letter-spacing: 0;
  }
  to {
    letter-spacing: 10px;
  }
}

/* //////////////////////////////////////////

My most precious projects page.

////////////////////////////////////////// */

#main-project-gallery {
  background-color: var(--foam);
}

.flex-thumbnail-gallery {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
  max-width: 1280px;
}
/*
Thumbnail styling
*/

.video-thumbnail {
  width: 37.5vw;
  height: 37.5vw;

  background: var(--lightblue);

  margin-bottom: 5vw;

  cursor: pointer;
  overflow: hidden;
}

.thumbnail {
  background-repeat: no-repeat;
  background-size: cover;
}
.thumbnail-hover-overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: -100%;
  padding: 20%;

  z-index: 2;
}

.thumbnail-hover-overlay h3 {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 3;
}
.overlay-background {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: var(--ocean);
  z-index: 1;
}

.image-border {
  z-index: 4;
}
.video-thumbnail:hover {
  .overlay-background {
    opacity: 0.8;
  }
  .thumbnail-hover-overlay h3 {
    opacity: 1;
  }
}
#oertijdsmuseum-video {
  background-image: url(../img/thumbnails/PROJ-M-video-thumbnaill.jpg);
}
.play-button {
  position: absolute;
  width: 68px;
  height: 48px;
  background: url("https://img.icons8.com/ios-filled/50/ffffff/play--v1.png")
    no-repeat center center;
  background-size: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-button {
  opacity: 1;
}

/* Video thumbnail backgrounds */

#oertijdsmuseum-video {
  background-image: url(../img/thumbnails/PROJ-M-video-thumbnaill.jpg);
}

#amsterdam-video {
  background-image: url(../img/thumbnails/PROJ-P-video-thumbnail.jpg);
}

#thp-video {
  background-image: url(../img/thumbnails/THP-intro-thumbnail.jpg);
}

#stoneworks-video {
  background-image: url(../img/thumbnails/StoneworksMC-trailer-thumbnail.jpg);
}

#MCFT-video {
  background-image: url(../img/thumbnails/MCFT-intro-thumbnail.jpg);
}

#brudmir-video {
  background-image: url(../img/thumbnails/dear-diary-thumbnail.jpg);
}

/* /////////////////////// */

/* Modal (Overlay) Styling */
body.modal-open {
  overflow: hidden;
}
.video-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: #442534d4;
}

.video-modal.active {
  display: flex;
}

.modal-content {
  height: fit-content;

  position: absolute;
  top: 15%;
  left: 50%;

  transform: translate(-50%, 0);
  padding: 10vw;
  width: 100vw;
  max-width: 960px;

  background-color: var(--foam);
}

.modal-content iframe {
  width: 100%;
  height: 45vw;
}
.video-description {
  margin: 2rem 0;
}
.close-btn {
  width: fit-content;
  height: fit-content;
  position: absolute;
  right: 5%;
  bottom: 5%;
  color: #000;
  cursor: pointer;
  z-index: 1001;
}

@media (min-width: 1024px) {
  header,
  .header-content,
  #homepage-video {
    height: 100vh;
  }
  #about-me {
    flex-flow: nowrap row;
    align-items: flex-start;
  }
  .article-text-block {
    max-width: 600px;
  }
  #homepage-photo {
    width: 40%;
    max-width: 500px;
    height: 700px;
  }
  .video-thumbnail {
    width: 22vw;
    height: 22vw;

    margin-bottom: 1vw;
  }
  h3 {
    font-size: 1.8rem;
  }
  .modal-content {
    padding: 5vw;
  }

  .modal-content iframe {
    width: 100%;
    height: 20vw;
  }
}