:root {
}

body {
  background-color: #f9e300;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#gridcontainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 6vh 6vh 6vh 6vh 6vh 6vw 7vw 6vh 6vh 6vh 6vh 6vh 1fr;
  justify-items: start;
  align-items: end;
}

/* HochhausOOO */

.reihenhaeuserAH {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 5vw;
  line-height: 3.5vw;
  font-weight: 400;
  font-variation-settings: "wdth" 200;
  letter-spacing: -0.45em;
  grid-row-start: 2;
  margin-bottom: 0;
  animation-name: reihenhaeuserAHanimation;
  animation-duration: 30s;
  animation-delay: 5s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.spanreihenhaeuserAH {
  font-size: 5vw;
  font-variation-settings: "wdth" 168;
  letter-spacing: -0.2em;
  padding-left: 0.7vw;
}

@keyframes reihenhaeuserAHanimation {
  0% { transform: translateX(-30vw); }
  35% { transform: translateX(100vw); }
  100% { transform: translateX(100vw); }
}

/* HochhausOOO */

.hochhausOOO {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 30vw;
  line-height: 21vw;
  font-weight: 900;
  font-variation-settings: "wdth" 50;
  grid-row-start: 5;
  margin-bottom: 0;
  /* filter: blur(2px); */
  animation-name: hochhausOOOanimation;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hochhausOOOanimation {
  from { transform: translateX(-20vw); }
  to { transform: translateX(100vw); }
}


/* HochhausAOO */

.hochhausAOO {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 35vw;
  line-height: 24vw;
  font-weight: 500;
  font-variation-settings: "wdth" 50;
  grid-row-start: 10;
  margin-bottom: 0;
  animation-name: hochhausAOOanimation;
  animation-duration: 11s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hochhausAOOanimation {
  0% { transform: translateX(-30vw); }
  20% { transform: translateX(100vw); }
  100% { transform: translateX(100vw); }
}

/* BlockO */

.blockO {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 8vw;
  line-height: 5vw;
  font-weight: 900;
  font-variation-settings: "wdth" 180;
  letter-spacing: -0.4em;
  grid-row-start: 11;
  margin-bottom: 0;
  animation-name: blockOanimation;
  animation-duration: 14s;
  animation-delay: 5s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes blockOanimation {
  0% { transform: translateX(-120vw); }
  20% { transform: translateX(100vw); }
  100% { transform: translateX(100vw); }
}


/* ZweiblockO */

.zweiblockO {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 10vw;
  line-height: 7vw;
  font-weight: 900;
  font-variation-settings: "wdth" 50;
  letter-spacing: -0.06em;
  grid-row-start: 12;
  margin-bottom: 0;
  animation-name: zweiblockOanimation;
  animation-duration: 13s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes zweiblockOanimation {
  0% { transform: translateX(-120vw); }
  20% { transform: translateX(100vw); }
  100% { transform: translateX(100vw); }
}

/* HochhausHHH */

.hochhausHHH {
  color: #f9461c;
  font-family: 'ScienceGothic';
  font-size: 38vw;
  line-height: 26vw;
  font-weight: 900;
  font-variation-settings: "wdth" 80;
  grid-row-start: 13;
  margin-bottom: -10vw;
  animation-name: hochhausHHHanimation;
  animation-duration: 7s;
  animation-delay: 3s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hochhausHHHanimation {
  0% { transform: translateX(-40vw); }
  20% { transform: translateX(100vw); }
  100% { transform: translateX(100vw); }
}


/* Bahn */

.bahn {
  color: #00a1de;
  font-family: 'Gridlite';
  font-variation-settings: "wght" 900, "BACK" 100, "RECT" 100, "ELSH" 1;
  font-size: 6vw;
  font-weight: 700;
  grid-row-start: 7;
  position: relative;
  bottom: -5.8vw;
  left: 8vw;
}

.viadukt {
  color: #62361b;
  font-family: 'ScienceGothic';
  font-size: 10vw;
  font-weight: 300;
  font-variation-settings: "wdth" 200;
  letter-spacing: -0.06em;
  grid-row-start: 8;
  position: relative;
  bottom: -14vw;
  animation-name: viaduktanimation;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

}

@keyframes viaduktanimation {
  from { transform: translateX(-10.9vw); }
  to { transform: translateX(0); }
}