:root {
  --background-colour: black;
  --foreground-colour: white;
  --link-colour: mediumpurple;
}

@media screen and (max-width: 800px) {
    section {
        max-width: 800px;
        position: absolute;
        margin: 20px 20px 20px 20px;
    }
}

@media screen and (min-width: 801px) {
    section {
        max-width: 400px;
        position: absolute;
        top: 20px;
        right: 40px;
    }
}

#home {
    background-image: url('/images/spooky.gif');
}

#error {
    background-image: url('/images/crash.gif');
}

html {
  background-position: center;
  background-size: cover;
  height: 100%;
}

body {
    color: var(--foreground-colour);
    font-family: 'Fira Mono', monospace;
}

h1 {
    font-size: 3em;
}

p {
    font-size: 1.1em;
}

h1, p {
    background-color: var(--background-colour);
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 0 0 1px 0;
}

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