@layer base, site;

@font-face {
  font-family: "Berkeley Mono";
  src: url("/fonts/berkeley-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
    --paean-black: rgb(73, 66, 72);
    --wevet: hsl(17 17% 92%);
    --pissenlit:  #fed85d;

    --color-primary: var(--pissenlit);
    --color-background: var(--wevet);
    --spacing: 1rem;

    --font-base: "Jost", system-ui, sans-serif;
    --font-code: "Berkeley Mono", ui-monospace, monospace;
    --font-size-base: 1rem;
}

@layer base {
  *,
  ::after,
  ::before {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }

  html {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    font-size: var(--font-size-base);
    font-family: var(--font-base);
  }

  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--spacing);
    border: 1rem solid var(--paean-black);
    display: grid;
    place-content: center;
  }
}

@layer site {
    .pissenlit {
        text-align: center;
    }
}