html.apex-legends {
  /* EA Custom Variables */
  --ea-theme-color: #DA292A;
  --ea-theme-dark-gradient: #B03039;
  --ea-theme-light-gradient: #DA292A;
  --ea-theme-d3-line-height-desktop: 62px;
  --ea-theme-primary-font-family: TT Lakes W05 Regular, sans-serif;
  --ea-theme-secondary-font-family: Duke_Fill;
  --ea-theme-typographic-headings-font-family: Duke_Fill;

  &:root {
    --typographic-headings-font-family: Duke_Fill;
    --primary-font-family: 'TT Lakes W05 Regular', sans-serif;
    --secondary-font-family: Duke_Fill;

    --theme-color: #DA292A;
    --theme-dark-gradient: #B03039;
    --theme-light-gradient: #DA292A;
    --theme-red: #f00;
    --theme-green: #228B22;
    --theme-dark-color: #161616;
    --theme-black: #000;
    --theme-white: #fff;

    /* Nav Styles */
    --nav-font-family: Duke_Fill;
    --nav-font-color: #f3f3f3;
    --nav-font-size: 18px;
    --nav-letter-spacing: normal;
    --cta-font-family: 'TT Lakes W05 Regular', sans-serif;


    --brand-bg-80: rgba(13, 13, 13, .8);

    --color--accent: 218 41 42;
    --color--info: 255 203 8;
    --color--info--text: 0 64 153;

    --header--height-l: 64px;

    --modal--background: 13 13 13;
    --modal--color: 255 255 255;
    --modal--accent: 254 254 254;
    --modal--border: linear-gradient(0deg, rgba(0, 250, 217, .4) 0%, rgba(0, 220, 217, .0) 100%);
    --modal--border-light: 0 250 217;

    --card--background: 0 64 153;

    --tab--color: rgba(0, 250, 217, .4);
    --tab--background-active: linear-gradient(0deg, rgba(0, 250, 217, .4) 0%, rgba(0, 220, 217, .0) 100%);
    --tab--color-active: 254 254 254;

    --crumbs--background: 67 46 162;
    --crumbs--background-active: 153 68 186;

    --code-of-conduct-content-color: #a8a8a8;

    --button--color: 254 254 254;
    --button--background: 0 64 153;
    --button--color-hover: 255 255 255;
    --button--background-hover: 0 74 176;
    --input-buttons-primary-bg-hover: #B03039;
    --input-buttons-primary-bg-disabled: #B03039;
    --input-buttons-primary-color-disabled: #fff;

    /* Variable Overrides */
    --app-styling-background: #000;
    --app-styling-slate-level-1-trans: rgba(0, 0, 0, 1);
    --color-palette-blue-greys-200: rgba(0, 0, 0, 1);
    --color-palette-blue-greys-200-08: rgba(33, 40, 51, .8);
    --color-palette-blue-greys-400: rgba(33, 40, 51, .6);
    --color-palette-blue-greys-700: rgba(0, 0, 0, 1);
    --default-transition: all 0.2s ease-in-out;
    --color-palette-branding-normal: #DA292A;

    --corner-rounding-s: 0;
    --corner-rounding-m: 0;
    --corner-rounding-l: 0;
    --corner-rounding-xl: 0;
  }

  scroll-behavior: smooth !important;

  & :where(input[type], textarea, select):not(.nui, .multiselect__input) {
    background: var(--theme-dark-color);
  }

  /* Customize Login */
  & .login-wrapper {
    background-image: url(/images/apex-legends/grid-black.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    & .app-wrapper {
      width: 100%;
    }

    & .form-wrapper {
      background: transparent;

      & .login {
        background-image: url(/images/apex-legends/apex-section-bg-black-texture.png);
        background-size: cover;
        background-position: bottom left;
        background-repeat: no-repeat;
        width: 100vw;
        margin: 20px;
        max-width: 600px;
        border: 3px solid var(--theme-color);
        border-radius: 0;
        font-family: var(--cta-font-family);

        & .login-form {
          padding: 0;
          width: 100%;

          & .header {
            margin-bottom: 40px;

            & h1 {
              font-size: calc(56px + .5vw) !important;
              font-weight: 700 !important;
              margin-bottom: 10px;
              font-family: var(--typographic-headings-font-family);
              color: var(--theme-color);
              text-transform: uppercase;
            }
            & p {
              font-size: 18px;
              font-weight: 400;
              color: var(--theme-color);
            }
          }

          & .divider {
            &::before,
            &::after {
              background: var(--theme-color);
            }
            & .label {
              color: var(--theme-color);
            }
          }

          & .return{ color: var(--theme-color); }
          & .return:hover{ color: var(--theme-color)!important; opacity: .8; }
        }
      }

      & .card {
        width: calc(100vw - 50px);

        &::before,
        &::after {
          background: transparent;
          border-radius: 0;
          display: none;
        }
      }

      &::before,
      &::after {
        background: transparent;
        border-radius: 0;
        display: none;
      }
    }
  }

  /* Customize Dashboard */

  & .user-menu {
    & .wrapper {
      background-color: var(--theme-dark-color) !important;
      background-image: url('/images/apex-legends/grid-black.jpg');
      background-attachment: fixed;
      border-radius: 0 !important;

      & img, button {
        border-radius: 0 !important;
      }

      & .bar {
        &::before { display: none; }

        & .inner {
          &::before {
            background: var(--theme-color) !important;
          }

          & button {
            color: var(--theme-white) !important;
            background: var(--theme-dark-color) !important;

            &:hover {
              background: var(--input-buttons-primary-bg-hover) !important;
            }
          }
        }
      }
    }
  }

  &.dashboard {
    & main {
      background-color: var(--theme-dark-color);
      background-image: url(/images/apex-legends/apex-section-bg-black-texture.png);
      background-size: cover;
      background-attachment: fixed;

      & > aside {
        --_background: var(--theme-dark-color);
        background-image: url('/images/apex-legends/grid-black.jpg');
        background-attachment: fixed;

        & .logo {
          background-image: url('/images/apex-legends/apex-section-bg-modal-header.jpg');
        }
      }

      & .hero {
        color: var(--color-white);
      }

      & > section {
        & > .header {
          position: relative;
          isolation: isolate;
          background: hsl(from black h s l / 60%);
          backdrop-filter: blur(3px);

          &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: 0.3;
            background-image: url('/images/apex-legends/grid-black.jpg');
            background-attachment: fixed;
          }

          & .title {
            color: var(--theme-white) !important;
          }
        }
      }

      & .card {
        color: var(--color-white);
        border-radius: 0;

        & i {
          color: var(--theme-white) !important;
        }

        &:hover {
          outline-color: var(--theme-color);
          outline-width: 5px;
        }
      }
    }
  }

  & body {
    font-family: var(--primary-font-family);
    font-weight: 400;
  }

  /* Freeze Scrolling */
  &.frozen{
    overflow: hidden;
  }
}

@font-face {
  font-family: 'Duke_Fill';
  font-weight: 400;
  src: url('/fonts/DukesFill/DukeFill_web.woff2') format('woff2'), url('/fonts/DukesFill/DukeFill_web.woff') format('woff');
}

@font-face {
  font-family: 'TT Lakes W05 Regular';
  src: url('/fonts/TTLakesW05/TTLakesW05Regular.woff2') format('woff2'), url('/fonts/TTLakesW05/TTLakesW05Regular.woff') format('woff');
}

@font-face {
  font-family: "TT Lakes W05 Light";
  src: url('/fonts/TTLakesW05/TTLakesW05Light.woff2') format('woff2'), url('/fonts/TTLakesW05/TTLakesW05Light.woff') format('woff');
}

@font-face {
  font-family: 'TT Lakes W05 Medium';
  src: url('/fonts/TTLakesW05/TTLakesW05Medium.woff2') format('woff2'), url('/fonts/TTLakesW05/TTLakesW05Medium.woff') format('woff');
}

/* Override seravek-web font from cookie consent footer */
@font-face {
  font-family: 'seravek-web';
  src: url('/fonts/TTLakesW05/TTLakesW05Regular.woff2') format('woff2'), url('/fonts/TTLakesW05/TTLakesW05Regular.woff') format('woff');
}