#wait {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  cursor: wait; }
  #wait .coin-border {
    position: absolute;
    top: calc(50% - 5.25em);
    left: calc(50% - 5.25em);
    background: linear-gradient(45deg, #ffffff 0%, #009ed2 50%, #ffffff 100%);
    border-radius: 10em;
    background-size: contain;
    width: 10.5em;
    height: 10.5em;
    animation-name: wait-coin-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    transform-style: preserve-3d; }
  #wait .coin {
    position: absolute;
    top: calc(50% - 5em);
    left: calc(50% - 5em);
    background: url("../Images/Logo.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 10em;
    background-size: 90%;
    width: 10em;
    height: 10em; }

@keyframes wait-coin-spin {
  0% {
    transform: rotateZ(0deg); }
  25% { }
  50% { }
  75% { }
  100% {
    transform: rotateZ(360deg); } }

@keyframes wait-coin-explode {
  from {
    transform: scale(100%);
    opacity: 1; }
  to {
    transform: scale(1000%);
    opacity: 0; } }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

#background {
  background: url("../Images/Background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.3; }

#container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid; }

form {
  display: grid;
  grid-template-columns: 20em;
  grid-template-rows: 3fr 3fr;
  grid-template-areas: "logo" "credentials";
  grid-gap: 3em;
  justify-content: center; }

header {
  grid-area: logo;
  display: grid;
  align-items: center;
  justify-content: center;
  align-self: end; }

article {
  align-self: start;
  grid-area: credentials;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, min-content) min-content;
  grid-gap: 0.5em;
  align-items: center;
  justify-content: center;
  position: relative; }
  article div {
    position: relative; }
  article input {
    padding: 1em;
    border: 1px solid #aaa;
    border-radius: 0.25em;
    font: inherit;
    width: 100%;
    box-sizing: border-box; }
  article button {
    padding: 1em;
    background: #009ed2;
    border: 0;
    border-radius: 0.5em;
    color: #fff;
    font: inherit;
    font-weight: bold;
    cursor: pointer; }
    article button:hover {
      background-color: rgba(0, 158, 210, 0.8); }
  article .field-validation-error {
    display: block;
    background: rgba(210, 52, 0, 0.5);
    color: #000;
    border: 1px solid #d23400;
    padding: 0.5em;
    font-size: 110%;
    margin: 0.5em; }