:root {
  --offwhite: #E0E0E0;
  --cyblack: #031D27;
  --marblack: #27031d;
  --grid: linear-gradient(to right, rgba(0,0,0, 0.6) 0 100%), url('/assets/grid.gif');
  --grid-dark: linear-gradient(to right, rgba(39,3,29, 0.6) 0 100%), url('/assets/grid.gif');

  /* light colours */
  --stripe-one: #AAD6BE;
  --stripe-two: #7CC3C5;
  --stripe-three: #428396;
  --link-one: green;
  --link-two: olivedrab;
  --link-three: cyan;
  --shade: var(--cyblack);

  /* dark colours */
  --stripe-one-dark: #5B429D;
  --stripe-two-dark: #642566;
  --stripe-three-dark: #471143;
  --link-one-dark: pink;
  --link-two-dark: palevioletred;
  --link-three-dark: deeppink;
  --shade-dark: var(--marblack);

  /* theme properties */
  --primary: var(--stripe-one);
  --secondary: var(--stripe-two);
  --tertiary: var(--stripe-three);
  --main-text: var(--cyblack);
  --dark: var(--shade);
  --link: var(--link-one);
  --link-visited: var(--link-two);
  --link-hover: var(--link-three);
  --bg-grid: var(--grid);
}

body {
  color: var(--main-text);
  font-size: 12pt;
  font-family: "Courier New", Courier, monospace;
  background-color: var(--offwhite);
  background-image: url("/assets/light-bg.png");
  background-repeat: repeat-y;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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

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

a:hover {
  color: var(--link-hover);
}

.header {
  width: 1000px;
  height: 333px;
  display: block;
  margin: auto;
  margin-bottom: 0px;
}

.nav {
  width: 1000px;
  height: 100px;
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

.main {
  margin: auto;
  width: 1000px;
  padding: 10px;
  background-color: var(--primary);
  border: solid 10px var(--tertiary);
  border-radius: 20px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clickable {
  cursor: pointer;
}

button, input, select {
  color: var(--cyblack);
  font-family: "Courier New", Courier, monospace;
}

.flag {
  height: 30px;
  width: 60px;
}

.arrow-list {
  list-style-type: none;
}

.arrow-list li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
}

.arrow-list li::before {
  content: '\2192';
}

.theme-switch {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.theme-icon {
  width: 75px;
  border-radius: 20px;
}