:root {
  --content-width: 900px;
  --aside-width: 180px;

  --text-size: 14px;
  --big-text-size: 1.5rem;

  --background: #0e191a;
  --text-color: white;
  --accent-1: #b5e61d;
  --accent-2: #eb53d3;
  --accent-3: #c84630;
  --horizontal-pad: 1rem;
  --vertical-pad: 0.5rem;
}

/*** RESET ***/

html,
body,
ul,
ol {
  padding: 0;
  margin: 0;
}

html {
  font-family: monospace;
  font-size: var(--text-size);
  color: var(--text-color);
}

body {
  background-image: url("../assets/tealgrey.gif");
  background-repeat: repeat;
}

/*** CONTENT ***/

body {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);

  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--vertical-pad));
}

nav,
#container > * {
  background-color: var(--background);
}

nav > ul,
#container > * {
  padding: var(--vertical-pad) var(--horizontal-pad);
}

nav > div {
  height: 120px;
  overflow: hidden;
}

nav > div > img {
  max-width: 100%;
  height: auto;
  margin-top: -40px;
}

nav a {
  font-size: var(--big-text-size);
}

#container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: calc(2 * var(--horizontal-pad));
}

#container > main {
  flex: 1;
}

#container > aside {
  flex: 0 0 var(--aside-width);
  min-height: 180px;

  border-color: var(--accent-2);
  border-width: 0px 3px 3px 0px;
  border-style: dashed;
}

/*** MISC ***/

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

a:hover {
  color: var(--accent-2);
}

a.active {
  font-weight: bold;
}

ul {
  list-style-type: none;
}

code {
  color: var(--accent-3);
}