html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

@font-face {
  font-family: 'erste_hilfe_auf_zackregular';
  src: url('assets/fonts/ErsteHilfeAufZack-Regular.ttf') format('truetype'),
       url('assets/fonts/ErsteHilfeAufZack-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'erste_hilfe_spielplatzregular';
  src: url('assets/fonts/ErsteHilfeSpielplatz-Regular.ttf') format('truetype'),
       url('assets/fonts/ErsteHilfeSpielplatz-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'erste_hilfe_frechregular';
  src: url('assets/fonts/ErsteHilfeFrech.ttf') format('truetype'),
       url('assets/fonts/ErsteHilfeFrech.otf') format('opentype');
}
@font-face {
  font-family: 'karl';
  src: url('assets/fonts/KarlST_Regular.ttf') format('truetype'),
       url('assets/fonts/KarlST_Regular.otf') format('opentype');
}

/* Common hover animation */
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(var(--rotate-start)); }
10% { transform: translate(-1px, -2px) rotate(calc(var(--rotate-start) + 1deg)); }
20% { transform: translate(-3px, 0px) rotate(calc(var(--rotate-start) - 1deg)); }
30% { transform: translate(3px, 2px) rotate(var(--rotate-start)); }
40% { transform: translate(1px, -1px) rotate(calc(var(--rotate-start) + 1deg)); }
50% { transform: translate(-1px, 2px) rotate(calc(var(--rotate-start) - 1deg)); }
60% { transform: translate(-3px, 1px) rotate(var(--rotate-start)); }
70% { transform: translate(3px, 1px) rotate(calc(var(--rotate-start) + 1deg)); }
80% { transform: translate(-1px, -1px) rotate(calc(var(--rotate-start) - 1deg)); }
90% { transform: translate(1px, 2px) rotate(var(--rotate-start)); }
100% { transform: translate(1px, -2px) rotate(calc(var(--rotate-start) + 1deg)); }
}

.FAK, .Blog, .Font, .Guestbook, .imprint {
  color: rgb(5, 255, 0, 100%);
  position: fixed;
  font-family: 'erste_hilfe_frechregular';
  transform-origin: center;
}
.FAK {
  top: 7%;
  left: 15%;
  transform: rotate(-15deg);
  --rotate-start: -15deg;
}
.Blog {
  top: 60%;
  left: 70%;
  transform: rotate(-12deg);
  --rotate-start: -12deg;
}
.Font {
  top: 40%;
  left: 10%;
  transform: rotate(-30deg);
  --rotate-start: -30deg;
}
.Guestbook {
  top: 10%;
  left: 50%;
  transform: rotate(10deg);
  --rotate-start: 10deg;
}
.imprint {
  top: 70%;
  left: 10%;
  transform: rotate(5deg);
  --rotate-start: 5deg;
}

.FAK:hover, .Blog:hover, .Font:hover, .Guestbook:hover, .imprint:hover {
  animation: shake 1.5s infinite;
  animation-timing-function: ease-in-out;
  animation-delay: calc(1s + 3s * var(--random));
}

.FAK1, .FAK2, .FAK3, .Blog1, .Blog2, .Blog3, .Font1, .Font2, .Guestbook1, .Guestbook2, .Guestbook3, .imprint1, .imprint2, .imprint3 {
  display: inline-block;
}

.FAK1 {
  font-size: 5vw;
  letter-spacing: -0.05em;
}
.FAK2 {
  font-size: 15vw;
  margin-left: -0.0em;
  vertical-align: -0.2em;
}
.FAK3 {
  font-size: 5vw;
  margin-left: -0.1em;
}
.Blog1 {
  font-size: 6vw;
  margin-right: -0.3em;
}
.Blog2 {
  font-size: 15vw;
  vertical-align: -0.07em;
}
.Blog3 {
  font-size: 6vw;
  letter-spacing: -0.05em;
  margin-left: -0.2em;
}
.Font1 {
  font-size: 16vw;
  margin-right: -0.3em;
  vertical-align: -0.05em;
}
.Font2 {
  font-size: 6vw;
  letter-spacing: -0.05em;
}
.Guestbook1 {
  font-size: 6vw;
  margin-right: -0.3em;
  vertical-align: -0.02em;
}
.Guestbook2 {
  font-size: 14vw;
  vertical-align: -0.10em;
}
.Guestbook3 {
  font-size: 6vw;
  letter-spacing: -0.05em;
  margin-left: -1em;
  margin-right: -0.2em;
}
.imprint1 {
  font-size: 6vw;
  letter-spacing: -0.05em;
}
.imprint2 {
  font-size: 14vw;
  margin-left: -0.2em;
  vertical-align: -0.25em;
}
.imprint3 {
  font-size: 6vw;
  letter-spacing: -0.05em;
  margin-left: -0.3em;
}

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* z-index: 100; */
}

.home {
  color: rgba(5, 255, 0, 100%);
  font-family: 'erste_hilfe_auf_zackregular';
  font-size: 20em;
  animation: expand-contract 2s infinite ease-in-out;
  /* z-index: 200; */
}
@keyframes expand-contract {
  0%, 100% {
      font-size: 27em;
  }
  50% {
      font-size: 29em;
  }
}