* {
  box-sizing: border-box;
}

:root {
  --primary: #1e104e;
  --accent1: #f02f2f;
  --accent2: #ff653f;
  --accent3: #0f8a04;
  --bg: #eee;
  --bg-darker: #bbb;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: min(90%, 800px);
  margin: 1rem auto;
  background-color: var(--bg);
}

#banner {
  max-height: 200px;
  image-rendering: pixelated;
  object-fit: contain;
}

h1,
h2 {
  color: var(--primary);
  display: block;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: var(--accent1);
}

a:hover {
  text-decoration: underline;
  transition: all 0.5s;
}

a:visited {
  color: var(--accent2);
}

a[target="_blank"]::after {
  content: " ↗";
  font-weight: bold;
}

img {
  width: 100%;
}

hr {
  border: none;
  border-top: 2px solid var(--primary);
}

.wrapper a {
  margin-right: 1rem;
  display: inline-block;
}