body {
  --block-background-size: 5rem;
  --container-border-radius: 0.5rem;

  background-color: darkgray;
  background-image: url("/img/stone.png");
  background-repeat: repeat;
  background-size: var(--block-background-size);
  image-rendering: pixelated;
}

a {
  color: gold;
}

a:visited {
  color: inherit;
}

button {
  cursor: pointer;
}

.header {
  background-color: saddlebrown;
  background-image: url("/img/spruce_log.png");
  background-size: var(--block-background-size);
  background-repeat: repeat;
  border-radius: var(--container-border-radius);
  border: 0.1rem solid black;

  margin-bottom: 1rem;
  padding: 1rem;

  color: lightgray;

  display: flex;
  justify-content: space-between;
}

.header h1 {
  margin: 0;
}

.header h1 a {
  text-decoration: none;
}

.header h1 a:visited {
  color: inherit;
}

.header .header-end {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.header .account-actions {
  display: flex;
}

.page {
  max-width: 900px;
  margin: auto;
}

.page-container {
  display: flex;
  gap: 1rem;
}

.sidenav {
  background-color: burlywood;
  background-image: url("/img/spruce_sign.png");
  background-size: 100% auto;
  image-rendering: pixelated;
  border: 0.1rem solid darkgoldenrod;
  border-radius: var(--container-border-radius);

  margin: 0;
  padding: 1rem;

  list-style: none;
  text-align: center;
  color: white;
}

.sidenav a.current {
  font-weight: bold;
}

.page-content {
  background-image: url("/img/spruce_leaves.png");
  background-color: #17472e;
  background-blend-mode: multiply;
  background-repeat: repeat;
  background-size: var(--block-background-size);
  border-radius: var(--container-border-radius);
  border: 0.1rem solid black;

  color: white;

  flex: 1;
  padding: 1rem;
}

.pointer {
  cursor: pointer;
}

.pointer:hover {
  text-decoration: underline;
}

.floating-box {
  position: absolute;
  right: 1rem;
  top: 0;
  padding: 1rem;

  border: 0.1rem solid;
  border-radius: var(--container-border-radius);
  background-color: lightsteelblue;
  border-color: steelblue;
  color: black;
}

.floating-box.error {
  background-color: pink;
  border-color: crimson;
}