html, body
{
    background-color: black;
    color: white;
    font-family: 'sans-serif';
    font-size: 100%;
    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;
  height: 33%;
  width: 30%;
}
.top-right
{
  position: absolute;
  top: 8px;
  right: 16px;
  height: 33%;
  width: 30%;
}
.centre
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  transform: translate(-50%, -50%);
}
.bottom-left
{
  position: absolute;
  bottom: 8px;
  left: 16px;
  height: 33%;
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: end;
}
.bottom-right
{
  position: absolute;
  bottom: 8px;
  right: 16px;
  height: 33%;
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: end;
}

.hoverWrapper0:hover #hoverShow0
{
  display: block;
  border-style: solid;
  border-color: fuchsia;
}
.hoverWrapper0 #hoverShow0
{
  display: none;
  background-color: black;
  text-align: left;
  position: absolute;
  height: 100%;
  width: 100%;
  border-style: solid;
  border-color: fuchsia;
}
.TTitem
{
  border-style: solid;
  border-color: fuchsia;
  background-color:green;
  color: white;
  font-family: 'sans-serif';
  font-size: 100%;
  margin: 0;
  padding: 1%;
}