@font-face {
  font-family: 'TheMixLight';
  src: url('../fonts/TheMixLight-Plain.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheMixBold';
  src: url('../fonts/TheMixBold-Plain.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheMixExtraBold';
  src: url('../fonts/TheMixExtraBold-Plain.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

nav > ul  {
  font-size: 25px;
}

nav > ul > .active {
  font-family: 'TheMixBold', sans-serif;
  color: #077a7d;
}

.nav-position {
  margin-top: 20px;
  right: 19px;
}

html {
  scroll-behavior: smooth;
}

.video-container {
  max-width: min(1200px, calc(100vh * 0.98));
  width: 100%;
  aspect-ratio: 16 / 9;
  outline-width: 38px;
  margin-left: auto;
  margin-right: auto;
}

.aside-position {
  left: 67px;
  width: 350px;
}

.scroll-container {
  margin-top: 30vh;
}

.section-header .background-section-icon {
  width: 120px;
  height: 120px;
  transform: translateX(10%) translateY(25%);
}

.section-header .section-header-title {
  font-size: 91px; /*120px + 1px for the border*/
  transform: translateX(10%)
}

.section-header .section-header-bar {
  height: 71px
}

@media (min-width: 1080px) {
  html {
    scroll-behavior: smooth;
    overflow: hidden;
  }

  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

  .section-header .background-section-icon {
    width: 140px;
    height: 140px;
    transform: translateX(10%) translateY(20%);
  }

  .section-header .section-header-title {
    font-size: 111px; /*120px + 1px for the border*/
    transform: translateX(10%) translateY(-15%)
  }

  .section-header .section-header-bar {
    height: 81px
  }
}

@media (min-width: 1280px) {
  nav > ul  {
    font-size: 25px;
  }

  .section-header .background-section-icon {
    width: 160px;
    height: 160px;
    transform: translateX(-10%) translateY(25%);
  }

  .section-header .section-header-title {
    font-size: 111px;
    transform: translateX(0%) translateY(0%)
  }
}

@media (min-width: 1536px) {
  .section-header .background-section-icon {
    width: 160px;
    height: 160px;
    transform: translateX(0%) translateY(25%);
  }

  .section-header .section-header-title {
    font-size: 111px;
    transform: translateX(0%) translateY(0%)
  }
  .scroll-container {
    margin-top: 32vh;
  }

  .portfolio-grid {
    max-width: 1300px;
  }
}

@media (min-width: 1536px) and (max-height: 1079px) {
  .scroll-container {
    margin-top: 32vh;
  }

  .section-header .section-header-title {
    font-size: 151px;
    transform: translateX(-5%) translateY(-20%);
  }
}

@media (min-width: 1920px) {
  .scroll-container {
    margin-top: 28vh;
  }

  .video-container {
    max-width: 1180px;
  }

  nav > ul  {
    font-size: 25px;
  }

  .nav-position {
    right: 23px;
    margin-top: 24px;
  }

  .section-header .background-section-icon {
    width: 202px;
    height: 202px;
    transform: translateX(10%) translateY(10%);
  }

  .section-header .section-header-title {
    font-size: 151px;
    transform: translateX(-5%) translateY(-20%);
  }

  .portfolio-grid {
    max-width: 1300px;
  }
}

@media (min-width: 1920px) and (max-height: 1079px) {
  .video-container {
    max-width: 900px;
  }
  .section-header .background-section-icon {
    width: 160px;
    height: 160px;
    transform: translateX(0%) translateY(25%);
  }

  .section-header .section-header-title {
    font-size: 111px;
    transform: translateX(0%) translateY(0%)
  }
  .scroll-container {
    margin-top: 32vh;
  }
}

@media (min-width: 2200px) {
  .nav-position {
    right: 12rem;
  }
}
@media (min-width: 2560px) {
  .nav-position {
    right: 24rem;
  }
}