/* variables */

:root {
  --background: #000000;
  --text: #c0c0c0;
  --highlight: #33f9ff;
  --glow: #d8fffc;
}

/* main settings */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background);
  background-image: url('bg.jpg');
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  font-family: 'courier new', monospace;
}

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

a:hover, a:focus {
  background: var(--glow);
  color: black;;
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* main blocks */
header {
  background-color: var(--background);
}

h1, h2, h3 {
  color: var(--highlight);
  text-align: center;
  text-shadow: 0 0 3px var(--glow);
  margin: 20px;
}

h2, h3 {
  text-align: left;
  margin: 16px 0;
}

main {
  background-color: var(--background);
  border: 2px solid var(--highlight);
  box-shadow: 0 0 15px var(--glow);
  width: 70%;
  margin: 0 auto 40px auto;
  display: flex;
  flex-direction: row;
}

/* navigation */

nav ul {
  list-style-type: none;
}

nav ul li a {
  padding: 20px;
  display: block;
}

/* content */

.content {
  padding: 0 20px;
}

.content p {
  margin: 16px 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--highlight);
  box-shadow: 0 0 5px var(--glow);
}

.content ol {
  padding-left: 40px;
}

.content ul {
  padding-left: 20px;
  list-style-type: circle;
}

/* smaller screens */

@media screen and (max-width: 1000px) {
  main {
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  main {
    width: 100%;
    border: 0;
    margin: 0;
    box-shadow: none;
    flex-direction: column;
  }

  nav ul li a {
    padding: 10px 20px;
  }
}