@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap");

:root {
  --color-foreground: #000;
  --color-background: oklch(0.94 0.04 127deg);
  --color-primary: green;
}

@layer base, component;

@layer base {
  html {
    font-feature-settings: "palt" 1;
    font-family: sans-serif;
    color: var(--color-foreground);
    background-color: var(--color-background);
    scroll-behavior: smooth;
    padding: 1em;
    line-height: 1.5;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100vh;
  }

  a {
    color: oklch(from var(--color-primary) 0.4 c h);
  }
}

@layer component {
  .c-logo {
    rotate: 3deg;
    filter: drop-shadow(0.4rem 0.4rem 0 white);
    inline-size: min(80%, 400px);
    margin-inline: auto;
  }

  .c-charactors {
    inline-size: min(90%, 600px);
    margin-inline: auto;
    display: block;
  }

  .c-description {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
    order: -1;

    > * {
      display: inline-block;
    }
  }

  .c-nibancha-kun {
    position: fixed;
    width: min(15vw, 100px);
    height: auto;
    inset-inline-end: 3vw;
    inset-block-end: 0;
    z-index: 1;
  }

  .c-sns-list {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 1em 2em;
    margin-block-start: 2em;

    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }

    :where(a) {
      display: flex;
      gap: 0.25em;
      align-items: center;
      font-family: "Barlow Condensed", sans-serif;
      color: inherit;
      text-decoration: none;
      font-size: 2rem;
    }
  }

  .c-sns-list__logo {
    width: 2em;
    height: auto;
  }

  .c-videos {
    display: grid;
    gap: 1em;
    margin-block-start: 2em;
    :where(iframe) {
      height: auto;
      aspect-ratio: 16/9;
      max-width: 100% !important;
    }
  }
}