:root {
  --light-color: hsl(240, 50%, 85%);
  --highlight-color: hsl(240, 50%, 75%);
  --dim-color: hsl(240, 25%, 25%);
  --dark-color: hsl(240, 20%, 15%);
}

@font-face {
  font-family: "BerkeleyMono";
  src: url(fonts/BerkeleyMono-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "BerkeleyMono";
  src: url(fonts/BerkeleyMono-Bold.woff2) format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: "BerkeleyMono";
  src: url(fonts/BerkeleyMono-Oblique.woff2) format("woff2");
  font-style: italic;
}

@font-face {
  font-family: "Acme";
  src: url(fonts/Acme-Regular.ttf) format("truetype");
}

* {
  box-sizing: border-box;
}

html body {
  margin: 0;
  background-color: var(--dark-color);
  font-family: "Arial", sans-serif;
  color: var(--light-color);
}

nav-bar {
  display: flex;
  width: 100%;
  background-color: var(--dim-color);
  box-shadow:
    rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
  font-family: "Acme", sans-serif;
  margin-bottom: 1rem;
}

nav-bar::part(navbar) {
  max-width: 1024px;
  margin: auto;
}

nav-bar a,
nav-bar::part(toggle) {
  padding: 1rem;
  text-decoration: none;
  color: var(--light-color);
}

nav-bar::part(toggle-line) {
  background-color: var(--light-color);
}

nav-bar .link {
  text-decoration: none;
  color: var(--light-color);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0.25rem;
}

nav-bar .link:hover {
  background-color: var(--dark-color);
}

nav-bar .link.active {
  background-color: var(--dark-color);
}

.main-content {
  max-width: 1024px;
  margin: auto;
}

.section-header {
  text-align: center;
  color: var(--light-color);
  font-family: "Acme", sans-serif;
}

.content-card {
  padding: 1rem;
  background-color: var(--dim-color);
  box-shadow:
    rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px,
    rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px,
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.content-title {
  font-family: "Acme", sans-serif;
  font-size: 2rem;
  text-align: center;
  margin: unset;
}

.content-subtitle {
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}

.content-link {
  color: inherit;
}

/* List items */
.list-items {
  list-style: none;
  padding: 0;
}

.list-item:not(:last-child) {
  margin-bottom: 1em;
}

.list-item-title {
  width: 100%;
  text-align: left;
  font-family: Acme, sans-serif;
  font-weight: bold;
}

.list-item-line {
  display: flex;
}

.list-item-subtitle {
  width: 100%;
  text-align: left;
  font-style: italic;
}

.list-item-value {
  width: 100%;
  text-align: right;
  font-style: italic;
}

@media print {
  :root {
    --light-color: hsl(240, 0%, 85%);
    --highlight-color: hsl(240, 0%, 75%);
    --dim-color: hsl(240, 0%, 25%);
    --dark-color: hsl(240, 0%, 15%);
  }

  html body {
    padding-top: 0px;
    color: var(--dark-color);
  }

  /* biome-ignore lint/style/noDescendingSpecificity: ignoring */
  a {
    padding-top: 0px;
    color: var(--dark-color);
  }

  .content-card {
    /* biome-ignore lint/complexity/noImportantStyles: ignoring */
    box-shadow: none !important;
  }

  nav-bar {
    display: none;
  }
}