@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/archivo-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/archivo-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/archivo-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/archivo-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/archivo-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/archivo-v18-latin-regular.svg#Archivo') format('svg'); /* Legacy iOS */
}

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; */
/* } */


.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: #9B233C;
  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: rgba(10, 95, 90, 1);
  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: ###9B233C;
  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: ##9B233C;
  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;
  }
}

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

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

.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: rgba(10, 95, 90, 1);
  font-weight: normal;
  line-height: 1.3;
}

@media only screen and (max-width: 575px) {

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

.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: rgba(10, 95, 90, 1);
  font-weight: normal;
  line-height: 1.3;
}

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

}