:root {
  scrollbar-gutter: stable both-edges;
  --ugly-font: sans-serif;
  --ugly-black: hsl(210 3% 3%);
  --ugly-white: hsl(210 3% 95%);
  --ugly-gray: hsl(210 3% 25%);
  --ugly-orange: orangered;
}

body {
  width: 100%;
  margin: 0;
  font-family: var(--ugly-font);
  background-color: var(--ugly-black);
}

main {
  color: var(--ugly-gray);
}

header {
  padding: 5rem 0 0 0;
}

article,
footer {
  margin: 0 auto;
  /* width: calc(100% * 11/13); */
}

footer {
  font-size: max(1rem, 2vh);
  cursor: default;
  padding: 3rem 0;
  text-align: center;
}

a:link,
a:visited {
  color: var(--ugly-white);
}

a:hover,
a:active {
  color: var(--ugly-gray);
}

#logo {
  display: flex;
  width: 325px;
  height: auto;
  user-select: none;
}

a#logo:hover,
a#logo:active {
  background-color: var(--ugly-white);
}