@layer base {
  :root {
    --border-radius: 8px;
  }

  html {
    font-size: 125%;
  }

  body {
    display: grid;
    grid-template-columns: 1fr min(80ch, 80vw) 1fr;
    grid-template-rows: min-content 1fr min-content;
    padding-inline: 4vw;

    > header {
      grid-column: 1/-1;
    }

    > main {
      grid-column: 2/3;
    }

    > footer {
      grid-column: 1/-1;
      margin-block-start: 2ex;

      search form {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1ex;

        input {
          min-width: 0;
        }
      }
    }
  }

  .h-feed {
    display: flex;
    flex-direction: column;
    gap: 2ex;
  }
}

@layer components {
  .h-entry {
    pre {
      padding: 1rem;
    }
  }
}