:root {
  --max-text-width: 40rem;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: hsl(var(--foreground-primary));
}

p {
  max-width: var(--max-text-width);
}

.blocklink {
  display: inline-block;
  position: relative;
  padding: 0.25rem 0.75rem;
  margin: 0 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  transition: all 200ms ease-in-out;
  color: hsl(var(--foreground-primary));

  &:hover:not([data-active="true"]) {
    text-decoration: none;
    background-color: hsl(var(--background-secondary));
    border-color: hsl(var(--background-tertiary));
  }

  &[data-active="true"] {
    &::after {
      content: "";
      position: absolute;
      bottom: 0.25rem;
      left: 0.75rem;
      display: block;
      width: calc(100% - 1.5rem);
      height: 1px;
      background-color: hsl(var(--background-tertiary));
    }
  }
}

@media screen and (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-areas:
      "nav main"
      "nav footer";
    grid-template-columns: auto 1fr;
    width: 100%;
  }

  .nav {
    grid-area: nav;
  }
  footer {
    grid-area: footer;
  }
  .content {
    grid-area: main;
  }

  .layout:has(.raw-container) {
    display: contents;
    .nav {
      display: none;
    }
  }
}