body, html {
  height: 100%;
  margin: 0;
  color: white;
  background-color: black;
}

.bg {
  /* The image used */
  background-image: url("sanctum.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: black;
}

.container{
  display: table;
  height: 100%;
  width: 100%;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 a, h1 a:visited { text-decoration: none; color: #FFFFFF;}
h1 a:hover { color: #DDDDDD; text-decoration: underline;}
.highlight { text-align: center; color: #AAAAAA; font-size: 130%;}
.highlight a, .highlight a:visited { text-decoration: none; color: #AAAAAA;}
.highlight a:hover { color: #DDDDDD; text-decoration: underline;}
form { max-width: 30em; margin: 0 auto; margin-bottom: 1em; text-align: justify; padding: 0.5em 1em; border: 3px dotted #ddddff; font-size: 110%;}
input[type=button], input[type=submit], input[type=reset] { width: 100%; background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; font-size: 110%; }
input[type=text] { width: 100%; font-size: 110%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
input[type=text]:focus { border: 3px solid #555; }
input[type=password] { width: 100%; font-size: 110%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
input[type=password]:focus { border: 3px solid #555; }
input[type=checkbox] { transform: scale(2); margin: 10px; }
input[type=radio] { transform: scale(2); margin: 10px; font-size: 110%; }
select { font-size: 110%; padding: 12px 20px; margin: 8px 0; margin-bottom: 1em; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block;
    -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
    width: 100%;
}