main.landing {
  --size: clamp(2.8rem, 8.8svw, 3.8rem);

  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;

  .logo {
    width: calc(var(--size) * 4);
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: title 1s cubic-bezier(0.17, 0.84, 0.44, 1) 3.75s 1 normal backwards;
    scale: 1;

    .title {
      font-weight: 300;
      font-size: var(--size);
      max-width: 12em;
      text-align: center;
      margin: 0;
      margin-top: .25em;
      margin-bottom: .2em;
      line-height: 1;
      color: var(--fg-bright);
      strong {
        font-weight: 300;
        color: var(--theme);
      }
    }

    .subtitle {
      line-height: 1;
      font-size: calc(var(--size) * .46);
      max-width: 16.6em;
      text-align: center;
      color: var(--fg-grey);
      font-weight: 200;
      margin: calc(var(--size) * .125) 0;
    }

    em {
      font-size: calc(var(--size) * .46);
      margin-bottom: 2em;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: calc(var(--size) * .4);
      column-gap: 1.5rem;
      row-gap: .5rem;

      .button {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 12rem;
        font-size: .9rem;
        border-radius: 1000px;
        padding: .8rem;
        transition: border-color .2s, scale .2s;
        border: 1px solid var(--fg-grey);
        color: var(--fg-bright);
        scale: 1;
        &:hover {
          border-color: var(--theme);
          scale: 1.025;
        }
      }
    }
  }
}

@keyframes title {
  from {
    opacity: 0;
    scale: .98;
    translate: 0px 5px;
  }
}