:root {
  --colored-bg: rgba(255,139,162, 0.1);
  --text-color: rgba(253, 252, 252, 1);
  --text-color-2: rgba(253, 252, 252, 0.5);
}

@font-face {
  font-family: ubuntu-mono-r;
  src: url("https://cdn.glitch.global/a4d40f40-1fca-4e1d-9477-3329c69429af/UbuntuMono-R.ttf?v=1688922619639");
}

@font-face {
  font-family: ncm-sans10-r;
  src: url("/fonts/NewCMSans10-Regular.otf");
}

@font-face {
  font-family: inc-r;
  src: url("/fonts/Inconsolata/Inconsolata-Regular.ttf");
}

body {
  background-color: #0a0506;
  color: var(--text-color);
  font-family: inc-r;
  font-size: 17px;
  margin: 0;
}

a {
  color: #d33c5a;
}

li {
  margin-bottom: 8px;
}

hr {
  color: #412225;
  border-style: solid;
}

.nav-menu {
  background-color: var(--colored-bg);
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.page-button {
  margin-left: 10px;
  margin-right: 4px;
}

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

.card {
  color: var(--text-color);
  text-decoration: none;
}

.card > div {
  background-color: var(--colored-bg);
  padding: 20px;
}

.card > div > .title {
  margin-top: 3px;
  margin-bottom: 0;
}

.card > div > .date {
  margin-top: 3px;
  margin-bottom: 3px;
  color: var(--text-color-2);
}

.card > div > .description {
  margin-bottom: 3px;
}

#background {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/media/amelia.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 30% 20%;
  background-attachment: fixed;
  opacity: 0.2;
}

#chloe {
  max-width: 95%;
  position: absolute;
  left: 0;
  bottom: 0;
  image-rendering: crisp-edges;
}