: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: 5rem;
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    align-content: center;
    justify-content: space-between;
    border-bottom: 15px solid var(--accent);
    background-color: var(--bg);
    text-align: right;
    overflow: hidden;
    flex-shrink: 0;
    
    & a {
        display: flex;
        align-items: flex-start;
    }
    & img {
      height: 3rem;
    }
}

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;
  }
}