/* --------------------------------------- */
/* ---------------- MOBILE --------------- */
/* --------------------------------------- */

.section {
  width: 90vw;
}

#section-intro {
  margin-bottom: 0;
}

#section-filters {
  margin-top: var(--nav-height-mobile);
}

#section-projects > :not(:last-child) {
  margin-bottom: 5vh;
}

#section-projects {
  margin-bottom: 75px;
}

.section-project {
  height: fit-content;

  margin: 0 auto 0 auto;
  padding: 30px 5px;
  border-radius: 20px;

  background-color: var(--gradient-step-2);

  box-shadow: 5px 5px 11px #0007;
  text-align: center;
}

.project-author {
  font-size: 3vh;
}

/* Project Body Preview */

.project-body-preview {
  width: 75%;
  display: inline-block;
  margin: auto 0 auto 0;
}

.project-body-preview h2 {
  margin: 0;
}

.project-body-preview h3 {
  font-size: 3.5vh;
}

.project-body-preview > h3 {
  margin-top: 0;
  font-size: 4vw;
}

.project-body-preview a {
  font-size: 3vh;
}

.project-body-preview > a {
  color: var(--text-color-accent);
}

/* Project TV */

.video-container {
  position: relative;
  width: 100%;
  height: 35vh;
}

object.tv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

object.tv {
  z-index: 2;
}

.project-screen-video {
  position: absolute;
  width: calc(40vh * 0.8);
  height: calc(40vh * 0.7);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  background-color: black;
}

/* Project Short Description */

.project-short-description {
  margin: 5px auto 0px auto;
  font-size: 3.5vw;
}

.project-short-description p {
  margin: 0;
}

/* Project Tech Stack */

.project-tech-stack-preview {
  margin: 2vh 0;
}

.tech-stack-entry {
  height: 20px;
  width: fit-content;

  padding: 10px;

  display: inline-flex;
  flex-direction: row;

  justify-content: space-around;
  align-items: center;
  font-size: 3.5vw;

  border: 2px solid var(--text-color-accent);
  border-radius: 20px;
}

.tech-stack-entry > img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* Project scan-line */

#project-body-preview-scan-line > .section-header-bars > h2 {
  margin: 0;
}

#project-body-preview-scan-line > .section-header-bars:last-child {
  margin-bottom: 5px;
}

/* --------------------------------------- */
/* --------------- DESKTOP --------------- */
/* --------------------------------------- */

@media screen and (orientation: landscape) {
  #section-filters {
    margin-top: var(--nav-height-desktop);
  }

  .section-project {
    height: 55vh;
    padding: 50px 5px;
    display: flex;
    flex-direction: row-reverse;
  }

  .project-body-preview {
    width: 50%;
  }

  .project-body-preview > h3 {
    font-size: 2vw;
  }

  .project-body-preview a {
    font-size: 2vh;
  }

  .project-tv-video {
    width: 50%;
    display: inline-block;
    margin: 0 0 0 0;
  }

  .video-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .project-screen-video {
    width: calc(55vh * 0.8);
    height: calc(55vh * 0.65);
  }

  .project-short-description {
    width: 75%;
    font-size: 2vh;
  }

  .tech-stack-entry {
    height: 20px;
    width: fit-content;

    padding: 10px;

    display: inline-flex;
    flex-direction: row;

    justify-content: space-around;
    align-items: center;
    font-size: 3vh;

    border: 2px solid var(--text-color-accent);
    border-radius: 20px;
  }

  .section-project-title {
    font-size: 4vh;
  }
}