/* Theme */
:root {
  --color-bg: #2a2d2a;
  --color-bg-alt: #656b47;
  --color-bg-highlight: #353b35;
  --color-bg-highlight-alt:	#435643;
  --color-fg:	#c8e4c8;
  --color-fg-alt: #b3d6b3;
  --color-fg-highlight: #b1c44f;
  --color-bright: #fbfbf8;
}

/* Font */
@font-face {
  font-family: "monaspace-argon";
  src: url("/fonts/monaspace-argon.woff2");
}

@font-face {
  font-family: "monaspace-krypton";
  src: url("/fonts/monaspace-krypton.woff2");
}

@font-face {
  font-family: "monaspace-neon";
  src: url("/fonts/monaspace-neon.woff2");
}

@font-face {
  font-family: "monaspace-radon";
  src: url("/fonts/monaspace-radon.woff2");
}

@font-face {
  font-family: "monaspace-xenon";
  src: url("/fonts/monaspace-xenon.woff2");
}

/* Default Styling */
body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  color-scheme: only dark;
  font-family: "monaspace-neon", monospace;
  font-size: 0.8rem;
}

a {
  color: var(--color-fg-highlight);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Main Layout */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: 2px;
  min-height: 100dvh;
  margin: 0;
}

/* Header Layout */
header {
  width: 100%;
  background-color: var(--color-bg-highlight);
}

header > nav {
  margin: 1rem;
  display: flex;
  justify-content: center;
}

header > nav > ul {
  margin-block: auto;
}

header > nav > ul > li {
  margin-top: 0.2rem;
}

/* Header Styling */
header {
  font-size: 1rem;
  user-select: none;
  border-bottom: 0.1rem solid var(--color-bg-highlight-alt);
}

header > nav > ul {
  list-style-type: none;
  font-family: "monaspace-argon", monospace;
  font-weight: bold;
  font-size: 0.8rem;
}

/* Footer Layout */
footer {
  width: 100%;
  background-color: var(--color-bg-alt);
}

footer > div {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 80%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
}

/* Footer Styling */
footer {
  font-size: 0.8rem;
  color: var(--color-bright);
}

footer > div > span::selection {
  background-color: var(--color-bg);
}

/* Content Layout */
main {
  width: 100%;
}

main > div {
  margin-top: 1rem;
  margin-inline: auto;
  width: 50%;
}

main > div > time {
  width: 100%;
}

/* Content Styling */
main > div > h1 {
  text-align: center;
  color: var(--color-bright);
  font-size: 1.5rem;
}

main > div > article > h1 {
  margin-top: 1.5rem;
  font-size: 1rem;
}

main > div > article > p {
  line-height: 1.3rem;
  text-align: justify;
  text-justify: auto;
}

main > div > time {
  display: block;
  text-align: center;
}

/* Time styling */
time {
  font-family: "monaspace-argon", monospace;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--color-fg-alt);
}

/* Logo */
#logo {
  background-color: var(--color-bg);
  width: 9rem;
  height: 9rem;
  display: block;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid var(--color-bg-highlight-alt);
  border-radius: 1rem;
  user-select: none;
}

#logo:hover {
  text-decoration: none;
  background-color: var(--color-bg-highlight-alt);
}

#logo > span {
  display: block;
  font-size: 6rem;
  width: 100%;
  text-align: center;
}

#logo > div {
  font-weight: bold;
  font-family: "monaspace-krypton", monospace;
  position: relative;
  top: -1.25em;
  width: 100%;
  text-align: center;
}