@font-face {
  font-family: "PressStart2P";
  src:
    url("/static/fonts/PressStart2P-Regular.ttf");
}
@font-face {
  font-family: "ChakraPetch";
  src:
    url("/static/fonts/ChakraPetch-Regular.ttf");
  font-weight: regular;
}
@font-face {
  font-family: "ChakraPetch";
  src:
    url("/static/fonts/ChakraPetch-Bold.ttf");
  font-weight: bold;
}

*, :after, :before {
  box-sizing: border-box;
}

:root {
  --max-width: 1240px;
  --primary-color: rebeccapurple;
  --contrast-color: var(--contrast-color, white);
  --font-family-title: "PressStart2P", monospace;
  --font-family-body: "ChakraPetch", monospace;
  --transition-time: 30s;

  background-color: var(--primary-color);
  transition: background-color var(--transition-time) linear;
}

header > .inner-wrapper {
  padding: .5rem 1rem;
}

body {
  font-family: var(--font-family-body, monospace);
  color: var(--primary-color, gray);
  transition: color var(--transition-time) linear;
}

aside {
  padding: 1rem;
  border: 3px double var(--primary-color);
  border-radius: 3px;
  transition: border-color var(--transition-time) linear;
}

a,
a:visited,
a:active {
  color: var(--primary-color, gray);
  transition: color var(--transition-time) linear;
}

h1, h2, h3, .head {
  margin-block-start: 2em;
  font-family: var(--font-family-title, monospace);
}

h1:first-child,
h2:first-child,
h3:first-child,
.head:first-child {
  margin-block-start: 0px;
}

header .head {
  color: var(--contrast-color, white);
}

footer {
  color: var(--contrast-color, white);
  padding: .5rem 1rem;
  text-align: right;
}

.content {
  padding: 1rem;
}

.inner-wrapper {
  max-width: var(--max-width, 1024px);
  margin-inline: auto;
}

section > .inner-wrapper {
  background-color: var(--contrast-color, white);
}

.-bordered {
  padding: 1px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  transition: border-color var(--transition-time) linear;
}

@media (min-width: 768px) {
  .-w-aside {
    display: grid;
    grid-template-columns: 250px auto;
    gap: 2rem;
  }
}