* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: beige;
  nav {
    display: flex;
    gap: 2rem;
    padding: 1rem;

    a {
      text-decoration: none;
      color: white;
      font-weight: bold;
      padding: 0.25rem;
        border-radius: 0.25rem;
    }
    a:hover {
        background-color: white;
        color: black;
        padding: 0.25rem;
        transition: background-color 250ms ease, color 250ms ease;
    }
  }
}

.page {
  display: grid;
  grid-template-columns: 350px 1fr;
  grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";

  gap: 1rem;
  min-height: 100vh;
  padding: 1rem;
}

.header {
    /* change grid-area for some other value that is inside grid-templates areas */
  grid-area: header;
  background: rgb(70, 70, 181);
  padding: 1rem;
  box-shadow:
    0 4px 8px oklch(20.019% 0.00002 271.152 / 0.606),
    0 12px 24px oklch(0.2 0 0 / 0.08),
    0 24px 48px oklch(0.2 0 0 / 0.06);
}

.footer {
  grid-area: footer;
  padding: 1rem;
  background: red;
  box-shadow:
    0 4px 8px oklch(20.019% 0.00002 271.152 / 0.606),
    0 12px 24px oklch(0.2 0 0 / 0.08),
    0 24px 48px oklch(0.2 0 0 / 0.06);
}

.sidebar {
  grid-area: sidebar;
  background-color: rgb(24, 158, 24);
  padding: 1rem;
  box-shadow:
    0 4px 8px oklch(20.019% 0.00002 271.152 / 0.606),
    0 12px 24px oklch(0.2 0 0 / 0.08),
    0 24px 48px oklch(0.2 0 0 / 0.06);
}

.main {
  grid-area: main;
  background: rgb(178, 178, 15);
  padding: 2rem;
  box-shadow:
    0 4px 8px oklch(20.019% 0.00002 271.152 / 0.606),
    0 12px 24px oklch(0.2 0 0 / 0.08),
    0 24px 48px oklch(0.2 0 0 / 0.06);
}