:root {
  --bg: oklab(28.416999999999998% 0.00408 0.00686);
  --border: rgba(81, 74, 69, 1);
  --accent: oklch(35.656% 0.08399 38.765);
}

#loading {
  z-index: 999;
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #2e2926;
  display: grid;
  place-items: center;
}

#loading img {
  mask-composite: intersect;
  mask-image: linear-gradient(90deg, #000 90%, transparent), linear-gradient(270deg, #000 90%, transparent), linear-gradient(0deg, #000 90%, transparent), linear-gradient(180deg, #000 90%, transparent);
  max-width: 100vw;
}

.hidden {
  display: none !important;
}

html {
  height: 100%;
}

select {
  border: none;
  border-radius: 5px;
  text-align: center;
  font-size: 1.5rem;
  appearance: none;
  color: white;
}

body {
  background-image: url('/img/WSL-BG.jpg');
  background-size: cover;
  font-family: Centra No2 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

aside h2 {
  font-family: Centra No2 Black;
  font-feature-settings: normal;
  font-size: 3rem;
  font-variation-settings: normal;
  font-weight: 900;
  color: white;
}

aside {
  height: calc(5rem - 11px);
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  align-content: center;
  justify-content: space-between;
  background-color: var(--bg);
  text-align: right;
  overflow: hidden;
  flex-shrink: 0;

  position: relative;
  padding-bottom: calc(0.5rem + 4px);

  & a {
    display: flex;
    align-items: flex-start;
  }

  & img {
    height: 3rem;
  }

  &::before {
    content: "";
    background-image: linear-gradient(to right in oklab, rgb(239, 83, 39) 0px, rgb(187, 41, 187) 30%);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% + -4px);
    height: 15px;
  }
}

main a {
  position: relative;

  &::after {
    content: "";
    background-image: url("/img/tab.svg");
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: -1.5rem;
    top: 50%;
    translate: 0 -50%;
    background-color: transparent;
    background-size: contain;
  }
}

option,
select {
  text-align: center;
  text-align-last: center;
  font-family: Centra No2 !important;
  appearance: none;
}

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }

  article {
    view-transition-name: content;
  }

  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }

  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }

  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}