body {
  background-color: #ffffff;
  /* position: fixed;  */
  /* overflow-x: scroll;
  overflow-y: scroll; */
  width: 100%;
}

.center {
  display: block;
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
}

.background {
  display: block;
  margin-top: 3vh;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 100%;
}

.background_img {
  display: block;
  margin-top: calc(((100vh - 97vmin) / 2) - 5vh);
  margin-left: auto;
  margin-right: auto;
  height: 97vmin;
  width: 97vmin;
}

/* .background_img { */
  /* display: flex; */
  /* margin-top: 1%; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* height: 100%; */
  /* width: auto; */
  /* z-index:0; */
/* } */

.logo {
  display: block;
  position: absolute;
  /* top: 8px; */
  /* right: 16px; */
  right: 5vw;
  top: 2vh;
  position-anchor: 100% 100%;
  height: auto;
  width: 20%;
}

.tip {
  display: block;
  position: absolute;
  left: 5%;
  top: 5%;
  position-anchor: 100% 100%;
  text-align: left;
  vertical-align: top;
  font-family: 'Archivo', serif;
  font-size: 16px;
  color: #FF0000;
  font-weight: normal;
  line-height: 1.3;
}



.line__1,
.line__2 {
  display: block;
  position: absolute;
  left: 5%;
  top: 4vh;
  position-anchor: 100% 100%;
  text-align: left;
  vertical-align: top;
  font-family: 'Archivo', serif;
  font-size: 16px;
  color: #FF0000;
  font-weight: bold;
  line-height: 1.3;
  white-space: nowrap; /*keep text in one line*/
  overflow: hidden; /*hide text behind the cursor*/
}

.line__1 {
  /* border-right: 2px solid rgba(17, 17, 17, 0.9); */
  display: block;
  position: absolute;
  left: 5%;
  top: 2vh;
  position-anchor: 100% 100%;
  text-align: left;
  vertical-align: top;
  font-family: 'Archivo', serif;
  font-size: 20px;
  color: #FF0000;
  font-weight: normal;
  line-height: 1.0;
  animation: animated-text__1 5s steps(60, end) 1s 1 normal both; /*,*/
    /* animated-cursor__1 900ms steps(30, end) 8; */
  animation-delay: 0s;
}

.line__2 {
  /* border-right: 2px solid rgba(17, 17, 17, 0.9); */

  /* define animation types for text + cursor */
  display: block;
  position: absolute;
  left: 5%;
  top: 3vh;
  position-anchor: 100% 100%;
  text-align: left;
  vertical-align: top;
  font-family: 'Archivo', serif;
  font-size: 16px;
  color: #FF0000;
  font-weight: normal;
  line-height: 1.3;
  white-space: nowrap; /*keep text in one line*/
  overflow: hidden; /*hide text behind the cursor*/
  
  
  animation: animated-text__2 3s steps(30, end) 1s 1 normal both; /*+,*/
    /* animated-cursor__2 900ms steps(30, end) infinite; */
  -webkit-animation-delay: 0s;
  animation-delay: 2s;
}

@keyframes animated-cursor__1 {
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}

@keyframes animated-cursor__2 {
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}

@keyframes animated-text__1 {
  from {
    width: 0;
  }
  to {
    width: 50rem;
  }
}

@keyframes animated-text__2 {
  from {
    width: 0;
  }
  to {
    width: 29rem;
  }
}

.identifier {
  display: block;
  position: absolute;
  left: 5vw;
  bottom: 2vh;
  position-anchor: 100% 100%;
  height: auto;
  width: 5vw;
}

.impressum {
  display: block;
  position: absolute;
  right: 5vw;
  bottom: 2vh;
  position-anchor: 100% 100%;
  text-align: right;
  vertical-align: bottom;
  font-family: 'Archivo', serif;
  font-size: 16px;
  color: #47307c;
  font-weight: normal;
  line-height: 1.3;
}