/*
Background Image
 */
.BackgroundImage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-position: top center;
    object-fit: cover;
  }
}

/*
Header
*/
.Header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto 120px;
  padding: 0 1.25rem;

  /*
  Title
  */
  &__title {
    width: 100%;
    max-width: var(--col-width);
    margin: 60px 0 32px 0;
    font: 300 clamp(2.5rem, 10vw, 6.25rem)/1 var(--main-font-family);
    letter-spacing: -0.03em;
    text-align: center;

    &--colored {
      background: linear-gradient(270deg, #9059f6 0%, #ff2929 110%);
      background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
    }
  }

  &__logoContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    order: -1;
    width: 100%;
    max-width: var(--col-width);
    height: 75px;
    margin: 32px 0 0 0;
  }

  &__logo {
    width: auto;
    height: clamp(3.25rem, calc(2.5rem + 5vw), 4.75rem);
  }

  /*
    Description
  */

  &__description {
    width: 86%;
    max-width: 630px;
    color: white;
    font: 400 clamp(1rem, 4vw, 1.5rem)/1.4 var(--main-font-family);
    letter-spacing: -0.01em;
    text-align: center;

    a {
      color: inherit;
    }
  }

  &__icons {
    width: 100%;
    max-width: calc(var(--col-width) + 15rem);
    margin: 0 auto;

    /*
    Icon in background
    */
    .Header__icon {
      position: absolute;
      z-index: -1;
      user-select: none;

      &--ytb-icon1 {
        left: 30%;
        top: 82.92px;
      }

      &--ytb-icon2 {
        left: 88.15%;
        right: 8.43%;
        top: 22%;
        transform: rotate(25deg);
      }

      &--ytb-icon2,
      &--ytb-icon3 {
        @media all and (max-width: 768px) {
          display: none;
        }
      }

      &--ytb-icon3 {
        left: 20.62%;
        right: 75.96%;
        top: 60%;
      }

      &--twitch-icon1 {
        left: 9%;
        top: 257.31px;

        @media all and (max-width: 768px) {
          left: -7%;
        }
      }

      &--twitch-icon2 {
        right: 13%;
        top: 340.27px;
        transform: rotate(25deg);

        @media all and (max-width: 768px) {
          right: -7%;
        }
      }
    }
  }
}

.GithubLink {
  height: 36px;
  width: 120px;
  border-radius: 50px;
  border: 1px solid #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: background-color, color 0.4s;

  &:focus,
  &:hover {
    background-color: #FFFFFF;
    color: #1B1032;
  }

  &::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 0 0 8px;
    font-size: 11px;
    color: currentColor;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: '↗';
  }
}
