html,
body {
  height: 100%;
  width: 100%;
}

#graffiti {
  height: 100%;
  width: 100%;
  display: block;
  image-rendering: pixelated;
}

#content {
  position: absolute;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;

  &.hidden {
    display: none;
  }
}

#description {
  position: absolute;
  top: 3vh;
  left: 2vw;

  #description-main {
    max-width: calc(min(32ch, 94vw));
    text-indent: 4ch;
    line-height: 1.25;

    text-align: justify;
    text-transform: uppercase;

    font-size: clamp(0.975rem, 0.392rem + 2.5909vw, 2.4rem);
    letter-spacing: -1%;
    font-variation-settings:
      "wght" 700,
      "wdth" 125;

    p {
      display: inline;
      margin: 0;
      background-color: var(--rhizo-bg);
      padding-inline: 0.5ch;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
  }
}

#links {
  position: absolute;
  top: 30vh;
  right: 0;
  width: 25vw;

  .link {
    display: flex;
    align-items: center;
    margin-block: 0.1em;
    padding-inline: 0.15em;
    gap: 0.25em;
    max-width: fit-content;

    font-size: clamp(1.44rem, 0.8509rem + 2.6182vw, 2.88rem);
    letter-spacing: -1%;
    font-variation-settings:
      "wght" 200,
      "wdth" 95;

    color: var(--rhizo-fg);
    background-color: var(--rhizo-bg);
    text-decoration: none;

    svg {
      height: 0.75em;
      width: auto;
    }

    @media not (prefers-reduced-motion) {
      transition: font-variation-settings 75ms ease-out;
    }
    &:hover {
      @media not (prefers-reduced-motion) {
        transition: font-variation-settings 600ms ease-out;
      }
      font-variation-settings:
        "wght" 900,
        "wdth" 125;
    }

    &:nth-of-type(2) {
      margin-left: -5vw;
    }
  }
}

#community {
  position: absolute;
  bottom: 15vh;
  right: 5vw;
  width: 30vw;

  font-size: clamp(0.6944rem, 0.4104rem + 1.2626vw, 1.3889rem);
  letter-spacing: -1%;
  font-variation-settings:
    "wght" 400,
    "wdth" 100;

  text-indent: -3ch;

  p {
    display: inline;
    margin: 0;
    background-color: var(--rhizo-bg);
    padding-inline: 0.5ch;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .link {
    text-indent: 0;
    display: flex;
    align-items: center;
    margin-block: 0.1em;
    padding-inline: 0.15em;
    gap: 0.25em;
    max-width: fit-content;

    margin: 0;
    margin-left: 1ch;

    font-size: clamp(1.44rem, 0.8509rem + 2.6182vw, 2.88rem);
    letter-spacing: -1%;
    font-variation-settings:
      "wght" 450,
      "wdth" 90;

    color: var(--rhizo-fg);
    background-color: var(--rhizo-bg);
    text-decoration: none;

    svg {
      height: 0.75em;
      width: auto;
    }
    @media not (prefers-reduced-motion) {
      transition:
        background-color 75ms ease-in-out,
        color 75ms ease-in-out;
    }
    &:hover {
      @media not (prefers-reduced-motion) {
        transition:
          background-color 500ms ease-in-out,
          color 500ms ease-in-out;
      }
      color: var(--rhizo-bg);
      background-color: var(--rhizo-fg);
    }
  }
}

#logo {
  position: absolute;
  inset: 0;

  display: grid;
  place-content: center;

  svg {
    background-color: var(--rhizo-bg);
    color: var(--rhizo-fg);
    width: 20vw;
    height: auto;
  }
}