@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=JetBrains+Mono:wght@400;700&family=Special+Elite&display=swap');

:root {
  --green: oklch(0.4 0.1 145);
  --text-color: oklch(0.75 0.1 120);

  --areas:
    "terminal"
    "dashboard"
    "manual";
  --columns: auto;
  --col-gap: 1rem;
  --dir: column;
  --gap: 1rem;
  --margin: 0;
  --padding: 1rem;
  --p-i: 0.5rem;
  --p-top: 0.5rem;
  --rows: 1fr auto 1fr;
  --row-gap: 0.5rem;
  --width: 100%;

  @media (min-width: 600px) {
    --areas:
      "terminal dashboard"
      "manual manual";
    --columns: auto auto;
    --col-gap: 2rem;
    --dir: row;
    --gap: 2rem;
    --margin: 2rem;
    --padding: 3rem;
    --p-i: 3rem;
    --p-top: 5vh;
    --rows: auto 1fr;
    --row-gap: 5vh;
    --width: fit-content;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: oklch(0.15 0.25 120);
  color: oklch(0.95 0 0);
}

body::before {
  content: '';
  background:
    url(../img/texture.jpg);
  background-size: cover;
  filter: grayscale(100%);
  inset: 0;
  opacity: 0.2;
  position: absolute;
}

h1 {
  font-family: 'Allerta Stencil', sans-serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.2rem;
  margin: 0;
  margin-block-end: 2rem;
}

main {
  display: grid;
  column-gap: var(--col-gap);
  grid-template-areas: var(--areas);
  grid-template-columns: var(--columns);
  grid-template-rows: var(--rows);
  height: 100dvh;
  justify-items: start;
  margin: 0 auto;
  overflow: hidden;
  padding-block-start: var(--p-top);
  padding-inline: var(--p-i);
  row-gap: var(--row-gap);
  width: 100dvw;
}

.mobile-overlay {
  align-content: center;
  background: oklch(0.15 0 0 / 0.5);
  display: grid;
  height: 100dvh;
  inset: 0;
  padding: 1rem;
  position: absolute;
  text-align: center;
  width: 100dvw;
  z-index: 20;

  .overlay-content {
    background-color: oklch(0.15 0 0 / 0.8);
    box-shadow: inset 0 0 5px oklch(0.5 0 0 / 0.5);
    color: oklch(from var(--text-color) 0.8 0.15 h);
    border-radius: 1rem;
    display: grid;
    font-family: 'JetBrains Mono', monospace;
    justify-items: center;
    padding: 2rem;
    row-gap: 2rem;

    p {
      text-shadow:
        -0.5px 0 oklch(0.6 0.25 30),
        0.5px 0 oklch(0.9 0.15 195),
        0 0 8px oklch(0.9 0.28 143 / 0.8);
    }
  }
}

.hidden {
  display: none;
}