html.marathon {
  * { box-sizing: border-box; }
  &:root {
    --theme-page-color-background: #000;
    --ui-text-highlighted: #fff;
    --ui-text: #fff;

    --theme-primary-accent: #C2FE0C;

    --theme-error-color: #ff5c00;

    --theme-form-input-background: #000;
    --theme-form-input-foreground: #fff;
    --theme-form-input-border: 1px solid #fff;

    --theme-form-select-option-color: #0e0e0e;
    --theme-form-select-option-color-hover: #1f1f1f;

    --theme-button-color-text: #000;

    --theme-font-family: TTInterphasesPro, sans-serif;
    --theme-font-family-mono: TTInterphasesProMono, monospace;

    --theme-page-max-width: 1920px;
    --theme-container-max-width: 87pc;
  }

  & body {
    background: var(--theme-page-color-background);
    color: #fff;
    font-family: var(--theme-font-family);
    background-image:
      url("/images/marathon/gb-tr.png"),
      url("/images/marathon/gb-tr2.png"),
      url("/images/marathon/gb-br.png"),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
      url("/images/marathon/creator-background.svg");
    background-repeat:
      no-repeat,
      repeat-y,
      no-repeat,
      no-repeat,
      repeat;
    background-size:
      60px 480px,
      60px,
      360px 203px,
      cover,
      25%;
    background-position:
      right top,
      right top,
      right 60px bottom,
      center center,
      center center;

    & .container {
      width: 100%;
      max-width: var(--theme-container-max-width);
      margin: 0 auto;
    }

    & [aria-hidden] {
      display: none;
    }

    & a {
      color: var(--theme-primary-accent);
      text-decoration: underline;
    }

    & :where(input, textarea, select) {
      background-color: var(--theme-form-input-background);
      border: 1px solid #fff !important;
      border-radius: 0 !important;
      padding: 8px 20px !important;
      width: 100%;
      min-height: 62px;
      font-family: var(--theme-font-family-mono);
      font-size: 1.75rem;

      &[type="checkbox"] {
        margin: 0;
        padding: 6px !important;
        appearance: none;
        display: grid;
        place-items: center;
        width: 2.1875rem;
        height: 2.1875rem;
        min-height: unset;

        &::before {
          opacity: 0;
          background-color: var(--theme-primary-accent);
          background-size: 100%;
          content: "";
          display: inline-block;
          height: 100%;
          width: 100%;
          transition: opacity .3s;
        }

        &:checked::before {
          opacity: 1;
        }
      }

      &:focus-visible {
        outline: 2px solid var(--theme-primary-accent);
      }
    }

    & .multiselect {
      background-color: var(--theme-form-input-background);
      border: 1px solid #fff;
      position: relative;
      width: 100%;
      min-height: 62px;

      & .multiselect__select {
        background-image: url(/images/marathon/goliath_select_arrow_down.svg);
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 44px 24px;
        display: inline-block;
        height: 62px;
        width: 72px;
        transition: none;

        &::before {
          display: none;
        }
      }

      & .multiselect__tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        min-height: 62px;
        margin: 0;
        padding-block: 0 !important;
        background: none;
        border: none;

        & .chips {
          min-height: 62px;
          padding-block: 10px;

          & .chip {
            background-color: var(--theme-form-select-option-color);
            border: 1px solid rgb(255 255 255 / 10%);
            border-radius: 0;
            color: #fff;
            gap: 10px;
            font-size: 1rem;
            padding: 10px;
            transition: background-color .3s;

            & span {
              font-family: var(--theme-font-family-mono);
            }

            & i {
              color: var(--theme-primary-accent);
              font-size: 1rem;
            }

            &:hover {
              background-color: var(--theme-form-select-option-color-hover);
            }
          }
        }

        & .multiselect__input {
          background: none !important;
          border: none !important;
          height: 100%;
          min-height: unset;
        }
      }

      & .multiselect__content-wrapper {
        background-color: var(--theme-form-select-option-color);
        border: 1px solid rgb(255 255 255 / 10%);
        z-index: 1;

        & li {
          background-color: var(--theme-form-select-option-color);
          color: #fff;
          padding: 10px 20px;
          transition: background-color .3s;

          & > span {
            background: none;

            &::after {
              display: none;
            }
          }

          &:hover,
          &:has(.multiselect__option--highlight) {
            background-color: var(--theme-form-select-option-color-hover);
          }
        }
      }
    }

    & button:not(.nui) {
      align-items: center;
      background: var(--theme-primary-accent);
      border: none;
      border-radius: 0;
      color: var(--theme-button-color-text);
      cursor: pointer;
      display: flex;
      font-family: var(--theme-font-family);
      font-weight: 700;
      font-size: 4.813rem;
      line-height: 1.25;
      justify-content: space-between;
      padding: 0;
      text-decoration: none;
      text-transform: uppercase;
      width: 100%;

      &[type="submit"] {
        height: 69px;
        padding: 4px 7px 4px 6px;

        &::after {
          background-image: url(/images/marathon/goliath_btn_arrow.svg);
          background-size: 75px 60px;
          background-repeat: no-repeat;
          height: 60px;
          width: 75px;
          content: "";
          display: inline-block;
          transition: transform .3s;
        }

        &:hover:not(:disabled) {
          &::after {
            transform: translateX(-10px);
          }
        }
      }

      &[data-add] {
        font-size: 1.375rem;
        height: 27px;
        line-height: 1.25;
        padding: 4px 3px 4px 7px;
        width: 120px;

        &::before {
          background: url(/images/marathon/goliath_btn_arrow_back.svg);
          background-size: 28px 23px;
          height: 23px;
          width: 28px;
          content: "";
          display: inline-block;
          transition: transform .3s;
        }

        &:hover:not(:disabled) {
          &::before {
            transform: translateX(5px);
          }
        }
      }

      &[data-back] {
        font-size: 1.375rem;
        height: 27px;
        line-height: 1.25;
        padding: 4px 7px 4px 3px;
        width: 256px;

        &::before {
          background: url(/images/marathon/goliath_btn_arrow_back.svg);
          background-size: 28px 23px;
          height: 23px;
          width: 28px;
          content: "";
          display: inline-block;
          transition: transform .3s;
        }

        &:hover:not(:disabled) {
          &::before {
            transform: translateX(10px);
          }
        }
      }

      &:disabled {
        opacity: 0.4;
        pointer-events: none;
      }
    }
  }

  @media (width < 920px) {
    & {
      & body {
        background-image:
          linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
          url("/images/marathon/creator-background.svg");
        background-repeat:
          no-repeat,
          repeat;
        background-size:
          cover,
          25%;
        background-position:
          center center,
          center center;
      }
    }
  }

  @media (width < 600px) {
    & {
      & body {
        font-size: 1.5rem;

        & button {
          font-size: 3.5rem;

          &[type="submit"] {
            height: 50px;
            padding: 4px 7px 4px 6px;

            &::after {
              background-size: 50px 50px;
              background-position: right 10px center;
              height: 48px;
              width: 60px;
            }
          }
        }
      }
    }
  }
}

@font-face {
  font-family: 'TTInterphasesPro';
  src: url('/fonts/TTInterphasesPro/TTInterphasesProRegular_normal.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTInterphasesPro';
  src: url('/fonts/TTInterphasesPro/TTInterphasesProBold_normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'TTInterphasesProMono';
  src: url('/fonts/TTInterphasesPro/TTInterphasesProMonoRegular_normal_subset1.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}