:root {
  --color-bg-dark: #101410;
  --color-bg: #1f271e;
  --color-bg-light: #2e3a2c;
  --color-fg-dark: #e5e7e4;
  --color-fg: #eff0ef;
  --color-fg-light: #fafafa;
  --color-red: #e3598c;
  --color-orange: #e38e59;
  --color-yellow: #d1e359;
  --color-green: #69e359;
  --color-cyan: #59e3b0;
  --color-blue: #59aee3;

  --border-width-narrow: 1px;
  --border-width: 2px;
  --border-width-wide: 4px;

  --spacing-close: 6px;
  --spacing-regular: 10px;
  --spacing-far: 20px;
}

* {
  color: var(--color-fg);

  margin: 0;
}

body {
  background-color: var(--color-bg);

  /* temporary setting before media queries */
  width: 80%;
  margin: auto;
}

header,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-orange);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  border-bottom: var(--border-width) solid var(--color-orange);

  margin-bottom: var(--spacing-regular);

  padding-left: var(--spacing-far);

  width: fit-content;
}

header {
  background-color: var(--color-bg-light);

  border-right: var(--border-width) solid var(--color-orange);
  border-bottom: var(--border-width) solid var(--color-orange);

  font-family: monospace;
  font-size: 4rem;
}

main {
  border-left: var(--border-width) solid var(--color-orange);
  border-bottom: var(--border-width) solid var(--color-orange);

  padding-top: var(--spacing-regular);
  padding-bottom: var(--spacing-far);
}

footer {
  background-color: var(--color-bg-dark);

  border-right: var(--border-width) solid var(--color-orange);

  padding-top: var(--spacing-regular);
  padding-bottom: var(--spacing-far);
  padding-left: var(--spacing-far);
  padding-right: var(--spacing-far);
}

p {
  padding-left: var(--spacing-regular);
  padding-right: var(--spacing-regular);
}

a {
  color: var(--color-blue);
}