html, body
{
    background-color: black;
    color: white;
    font-family: 'sans-serif';
    margin: 0;
    padding: 0;
}

a {color: aqua;}
a:link {color: aqua;}
a:visited {color: fuchsia;}
a:hover {color: blue;}
a:active {color: red;}

button
{
    background-color: darkgreen;
    color: white;
    font-family: 'sans-serif';
}
button:hover {color: blue;}
button:active {color: red;}

label
{
    background-color:darkgreen;
    color: white;
    font-family: 'sans-serif';
    font-size: 160%;
}
input
{
    background-color:darkblue;
    color: white;
    font-family: 'sans-serif';
    font-size: 80%;
}
textarea
{
    background-color:darkblue;
    color: white;
    font-family: 'sans-serif';
    font-size: 80%;
    /* What idiot thought aligning the label with the bottom of textareas was a good default? */
    vertical-align: top;
}

.container
{
  position: relative;
  text-align: left;
}
.top-left
{
  position: absolute;
  top: 8px;
  left: 16px;
  width: 30%;
}
.top-right
{
  position: absolute;
  top: 8px;
  right: 16px;
  width: 30%;
}
.centre
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  transform: translate(-50%, -50%);
}
.bottom-left
{
  position: absolute;
  bottom: 8px;
  left: 16px;
  width: 30%;
}
.bottom-right
{
  position: absolute;
  bottom: 8px;
  right: 16px;
  width: 30%;
}