:root {
  color-scheme: light dark;
}

@font-face {
  font-family: "Utena";
  src: url("Benguiat.woff");
}

@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("AkzidenzGroteskBE-Regular.woff");
}

@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("AkzidenzGroteskBE-Bold.woff");
  font-weight: bold;
}

@font-face {
  font-family: "Dark Courier";
  src: url("IBMPlexMono-Medium.woff");
}

@font-face {
  font-family: "Dark Courier";
  src: url("IBMPlexMono-Bold.woff");
  font-weight: bold;
}

@font-face {
  font-family: "Dark Courier";
  src: url("IBMPlexMono-MediumItalic.woff");
  font-style: oblique;
}

@font-face {
  font-family: "Dark Courier";
  src: url("IBMPlexMono-BoldItalic.woff");
  font-weight: bold;
  font-style: oblique;
}

body {
  max-width: 700px;
  margin: auto;
  text-align: left;
  font-family:
    "Akzidenz-Grotesk",
    "Adwaita Sans",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  padding: 40px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

* {
  padding: 0;
  margin: 0;
}

hr::before {
  content: "---";
}

hr {
  margin: auto;
  border: none;
  outline: none;
}

a,
a:visited {
  color: light-dark(mediumvioletred, hotpink);
}

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child) {
  padding-top: 30px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Utena", serif;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

code {
  font-family:
    "Dark Courier", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
}

:not(pre) > code {
  padding: 2px 4px;
}

pre:has(code) {
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.1);

  padding: 12px 24px;
  color: black;
  font-size: 1em;
  overflow-x: scroll;
}

article {
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.1);

  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

table {
  margin-top: 10px;
  margin-bottom: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

th,
td {
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px;
}

.post-info {
  font-family: "Adwaita Mono", monospace;
  opacity: 0.8;
}

.tag {
  border: 1px solid black;

  background-color: white;
  color: black;

  width: min-content;
  padding: 1px 6px;
}

.creation-date {
  padding: 1px 6px;
}

.tag::before {
  content: "#";
  opacity: 0.6;
  margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
  :not(pre) > code {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
  }

  pre:has(code),
  article,
  th,
  td {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
  }
}