@font-face {
    font-family: 'Hint-Thin';
    src:  url('./src/Hint-Thin.woff2') format('woff2'),
          url('./src/Hint-Thin.woff') format('woff');
  }

  @font-face {
    font-family: 'Hint-Regular';
    src:  url('./src/Hint-Regular.woff2') format('woff2'),
          url('./src/Hint-Regular.woff') format('woff');
  }

  @font-face {
    font-family: 'Hint-Bold';
    src:  url('./src/Hint-ExtraBold.woff2') format('woff2'),
          url('./src/Hint-ExtraBold.woff') format('woff');
  }


body {
    font-family: 'Raleway', sans-serif;
    font-family: 'Hint-Regular', sans-serif;
    background-color: #111111;
    color: aliceblue;
    margin: 0;
}

.page {
  display: none;
}

.loader {
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  opacity: 0.5;
  position: fixed;
  z-index: 999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  }

  @keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
  } 



.index {
    overflow: hidden !important;
}

a {
    color: inherit;
    text-decoration: none; /* no underline */
  }

h1 {
    font-family: 'Hint-Regular', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 3.4rem;
    letter-spacing: 0.25rem;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5rem;
}

.header {
    position: absolute;
    top: 1.75rem;
}

.logospan {
    font-family: 'Hint-Regular', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.7rem;
    opacity: 0.7;
    text-shadow: 0px 2px 9px rgba(255,255,255,1);
}

.h3 {
    font-family: 'Hint-Regular', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6429rem;
    letter-spacing: .0825rem;
    line-height: 2.7143rem;
    text-align: justify;
    opacity: 0.9;
}


.h3 > span.word > span {
    animation: jumping 3s cubic-bezier(.5, 0.2, .5, 1) infinite both;
       /* animation-delay: calc(50ms * var(--char-index));  */
    --delay: 500ms;
  
  }

  .h3 > span.word > span:nth-child(1) {
    animation-delay: calc(1 * var(--delay));
  }

  .h3 > span.word > span:nth-child(2) {
    animation-delay: calc(2 * var(--delay));
  }

  .h3 > span.word > span:nth-child(3) {
    animation-delay: calc(3 * var(--delay));
  }

  .h3 > span.word > span:nth-child(4) {
    animation-delay: calc(4 * var(--delay));
  }

  .h3 > span.word > span:nth-child(5) {
    animation-delay: calc(5 * var(--delay));
  }

  .h3 > span.word > span:nth-child(6) {
    animation-delay: calc(6 * var(--delay));
  }

  .h3 > span.word > span:nth-child(7) {
    animation-delay: calc(7 * var(--delay));
  }

  .h3 > span.word > span:nth-child(8) {
    animation-delay: calc(8 * var(--delay));
  }
  
  .h3 > span.word > span:nth-child(9) {
    animation-delay: calc(9 * var(--delay));
  }

  .h3 > span.word > span:nth-child(10) {
    animation-delay: calc(10 * var(--delay));
  }

  .h3 > span.word > span:nth-child(11) {
    animation-delay: calc(11 * var(--delay));
  }

  .h3 > span.word > span:nth-child(12) {
    animation-delay: calc(12 * var(--delay));
  }

  .h3 > span.word > span:nth-child(13) {
    animation-delay: calc(13 * var(--delay));
  }

  .h3 > span.word > span:nth-child(14) {
    animation-delay: calc(14 * var(--delay));
  }

  .h3 > span.word > span:nth-child(15) {
    animation-delay: calc(15 * var(--delay));
  }

  .h3 > span.word > span:nth-child(16) {
    animation-delay: calc(16 * var(--delay));
  }

  .h3 > span.word > span:nth-child(17) {
    animation-delay: calc(17 * var(--delay));
  }

  .h3 > span.word > span:nth-child(18) {
    animation-delay: calc(18 * var(--delay));
  }
  
  
  @keyframes jumping {
    0% {
      top: 0px;
    }
    50% {
       transform: translateY(-0.12em) rotate(1.5deg);
    }
    100% {
      top: 0px;
    }
  }




.shadow {
    text-shadow: 0px 2px 9px rgba(255,255,255,0.71);
}

.bottom {
    position: absolute;
    bottom: 0;
    margin: auto;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewport-header {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

@media screen and (max-width: 770px) {

    .h3 {
        font-size: 4.1vw;
        letter-spacing: 0.15vw;
        line-height: 10vw;
    }

    .viewport-header {
        max-width: 80vw;
      }
    
}

p {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.5rem;
}


video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;
  }

video[poster] {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

.center {
    margin: auto;
    max-width: 31.25rem;
    padding: 1rem;
    text-align: center;
    margin-top: 2rem;
  }

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

.video {
    padding-bottom: 3rem;
}

.social {
    margin-top: 3rem;
    padding-bottom: 4rem;
}

.social-small {
    margin-top: 1rem;
    padding-bottom: 2rem;
}

.btn-social {
    color: aliceblue;
    opacity: 0.7;
    font-size: 1.7rem;
    padding: 0 0.5rem;
}

.btn-social-small {
    color: aliceblue;
    opacity: 0.6;
    font-size: 1rem;
    padding: 0 1.5rem;
}

.btn-social:hover, .btn-social-small:hover {
    opacity: 1;
}

.description {
    padding-bottom: 1rem;
}

.glyph {
    padding-bottom: 5rem;
    font-size: 2.5rem;

    color: white;
}

iframe {
    max-width: 100%;
}

.portfolio {
    text-decoration: none;
    opacity: 0.1;
}

.portfolio:hover {
    opacity: 0.2;
}

@media screen and (max-width: 550px) {
    h1 {
        font-size: 9vw;
        padding: 5% 0;
    }

    p {
        font-size: 3vw;
    }

    .btn-social {
        font-size: 6vw;
    }

    .glyph {
        font-size: 10vw;
    }
  }