.h3 {
  color: white;
}

h3:link {
  color: white;
}

h3:visited {
  color: white;
}

h3:hover {
  color: white;
}

h3:active {
  color: white;
}

h3:link {
  color: white;
}

body {
  background-color: black;
  padding: 0px;
  font: 26px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: white;
}

a {
  color: white;
}

.login-div {
  position: relative;
  display: inline-block;
  width: 960px;
}


#login-hint {
  position: absolute;
  left: 220px;
  top: 353px;
  visibility: hidden;
}

#login-hint-map {
  z-index: 1000;
  position: absolute;
  top: 370px;
  left: 245px;
  width: 90px;
  height: 80px;
}

.login-image-div:hover {
  float: left;
  width: 240px;
  height: 90px;
  background: url("/pictures/userpass/background03_5x2.png")
}

.login-mask {
  border: none;
  margin: 0;
  padding-inline: 5px;
  background: #212121;
  color: #36cb09;
  width: 311px;
  height: 27px;
}

#login-button {
  vertical-align: middle;
  text-align: center;
  border: 0;
  padding-inline: 2px;
  background: #36cb09;
  color: #212121;
  width: 75px;
  height: 33px;
  font-weight: bold;
  position: absolute;
  left: 566px;
  top: 301px;
}

.login-mask:focus {
  border: none;
  outline: none;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

#user {
  position: absolute;
  left: 320px;
  top: 154px;
}


#password {
  position: absolute;
  left: 319px;
  top: 246px;
}

#credentials-error {
  position: absolute;
  left: 315px;
  top: 300px;
  color: #36cb09;
}

.math-div {
  position: relative;
  display: inline-block;
  width: 960px;
}

.math-mask {
  border: none;
  margin: 0;
  padding-inline: 5px;
  background: #FFFFFF;
  color: black;
  width: 144px;
  height: 22px;
}

.math-mask:focus {
  border: none;
  outline: none;
}

#abgeben-button {
  vertical-align: middle;
  text-align: center;
  padding-inline: 2px;
  background: white;
  color: #212121;
  width: 75px;
  height: 33px;
  font-weight: bold;
  position: absolute;
  left: 529px;
  top: 405px;
}

#wrong-solution {
  position: absolute;
  left: 613px;
  top: 343px;
  color: red;
  font-size: xx-large;
}

#nullstelle {
  position: absolute;
  left: 446px;
  top: 346px;
}

.hidden_content {
  color: black;
}

.hidden_link:link {
  color: black;
}

.hidden_link:visited {
  color: black;
}

.hidden_link:hover {
  color: black;
}

.hidden_link:active {
  color: black;
}

.hidden_link:link {
  color: black;
}

.userdata-div {
  position: relative;
  display: inline-block;
  width: 960px;
}

.userdata-mask {
  margin: 0;
  padding-inline: 5px;
  background: #FFFFFF;
  color: black;
  width: 300px;
  height: 22px;
}

.userdata-submit-mask {
  margin: 0;
  padding-inline: 5px;
  background: lightgrey;
  color: black;
  width: 150px;
  height: 24px;
}

.userdata-lable-mask {
  color: black;
  font-size: small;
}

#firstname_label {
  position: absolute;
  left: 300px;
  top: 170px;
}

#firstname {
  position: absolute;
  left: 300px;
  top: 200px;
}

#familyname_label {
  position: absolute;
  left: 300px;
  top: 230px;
}

#familyname {
  position: absolute;
  left: 300px;
  top: 260px;
}

#email_label {
  position: absolute;
  left: 300px;
  top: 290px;
}

#email {
  position: absolute;
  left: 300px;
  top: 320px;
}

#phonenumber_label {
  position: absolute;
  left: 300px;
  top: 350px;
}

#phonenumber {
  position: absolute;
  left: 300px;
  top: 380px;
}

#submit_data {
  position: absolute;
  left: 300px;
  top: 440px;
}

#typewriter {
  position: absolute;
  left: 275px;
  top: 50px;
  width: 410px;
  text-align: left;
}

.type {
  font-size: 17px;
  color: #0000;
  background:
    linear-gradient(-90deg, black 5px, #0000 0) 10px 0,
    linear-gradient(black 0 0) 0 0;
  background-size: calc(var(--n)*1ch) 200%;
  -webkit-background-clip: padding-box, text;
  background-clip: padding-box, text;
  background-repeat: no-repeat;
  animation:
    b .2s infinite steps(1),
    t calc(var(--n)*.03s) steps(var(--n)) forwards;
}

@keyframes t {
  from {
    background-size: 0 200%
  }
}

@keyframes b {
  50% {
    background-position: 0 -100%, 0 0
  }
}