@charset "UTF-8";

@layer elements, custom;

@layer elements {

  main {

    a[target='_blank']::after {
      content: 'arrow_outward';
      display: inline-block;
      font-family: 'Material Symbols Outlined';
      font-size: 0.75em;
      margin-inline-start: 0.5ex;
    }

    .changelog .icon {
      color: var(--clr-primary);
      vertical-align: middle;
    }

    .full-width {
      grid-column: 1 / -1;
    }

    &.server-list {
      --size-padding-block: calc(var(--root-size-gap) * 1.5);
      --size-padding-inline: var(--size-padding-block);
      display: grid;
      gap: var(--size-gap);
      grid-template-columns: repeat(
        min(3, sign(100dvi - var(--size-container-max)) * 2 + 3),
        minmax(0, 1fr)
      );
      inline-size: min(100%, var(--size-container-max));
      justify-self: center;

      h1 {
        font-size: clamp(1rem, 4rem, 10dvi);
        inline-size: min(26rem, 100%);
        margin-block-end: calc(var(--size-gap) * -1);
        padding-block: 0;
        text-fit: grow consistent;
      }

      h2 {
        font-size: 1.25rem;
      }

      h3 {
        font-size: 1rem;
      }

      a {
        font-weight: 500;
      }
    }
  }
}

@layer custom {

  .server-list {

    > :not(.card) p {
      --clr-text: var(--clr-muted);
    }

    body:has(&) header {
      position: relative;
      z-index: 10;
    }

    > div:first-of-type {
      display: grid;
      gap: 3rem;
    }

    h1 {
      anchor-name: --title;

      &::after {
        background-image: radial-gradient(
          farthest-side at 50% 0%,
          oklch(from var(--clr-primary) l calc(c / (2 - var(--dark-mode))) h / 0.25),
          oklch(from var(--clr-primary) l calc(c / (2 - var(--dark-mode))) h / 0)
        );
        block-size: max(30rem, 75dvb);
        content: '';
        inline-size: 100dvi;
        pointer-events: none;
        position-anchor: --title;
        position-area: center;
        position: absolute;
        z-index: -1;
      }
    }
  }

  @scope (stamp-tag) {

    :scope {
      --clr-text: var(--clr-this);
      --clr-this: light-dark(#c13c38, #6e2825);
      --size-padding: 0.2em;
      all: initial;
      border-radius: 0.5em;
      border: solid 0.2em var(--clr-this);
      color: var(--clr-this);
      display: inline-block;
      font-family: inherit;
      font-size: 0.4em;
      font-weight: 900;
      mask: url('/assets/img/grunge.svg') luminance 50% 50% / cover no-repeat;
      padding-block: var(--size-padding);
      padding-inline: calc(var(--size-padding) * 1.5);
      pointer-events: none;
      position-anchor: --title;
      position-area: span-inline-end;
      position: absolute;
      rotate: -20deg;
      text-box-trim: trim-both;
      text-transform: uppercase;
      translate: -50% -75%;
    }
  }
}