@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(../fonts/GloriaHallelujah.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(../fonts/Nunito-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/Roboto-Black.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(../fonts/RobotoMono-Regular.ttf) format('truetype');
}
/*
 * main styles for all pages
*/
* {
  box-sizing: border-box;
}
html,
body,
.page {
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  font-family: 'Nunito', sans-serif;
}
tt {
  font-family: 'Roboto Mono';
  font-size: 0.9em;
}
a {
  text-decoration: none;
  color: #c06;
}
.footer {
  width: 100%;
  margin: 0;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: #eee;
  text-align: right;
  line-height: 1rem;
}
.footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.footer ul li {
  display: inline-block;
}
.footer ul li:not(:first-child) {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 0.05rem solid;
}
.footer ul li.pending {
  color: #ff0080;
}
body {
  background-color: #eee;
  color: #333;
}
body .page {
  display: flex;
  align-items: center;
  justify-content: center;
}
body .page .main .spruecheklopfr {
  width: 48rem;
  position: relative;
  top: -2rem;
  left: 1rem;
  z-index: 5;
}
body .page .main .spruecheklopfr h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 6rem;
  position: relative;
  left: 0.4rem;
  white-space: nowrap;
  color: #333;
  transform: rotate(-5deg);
}
body .page .main .spruecheklopfr h1 .version {
  font-family: 'Gloria Hallelujah', sans-serif;
  font-size: 2rem;
  position: relative;
  top: -3.6rem;
}
body .page .main .spruecheklopfr h1:before,
body .page .main .spruecheklopfr h1:after {
  position: absolute;
  background: #eee;
  content: attr(data-content);
  clip: rect(0, 900px, 0, 0);
}
body .page .main .spruecheklopfr h1:before {
  left: 0.1rem;
  top: 0;
  text-shadow: 0.1rem 0 #9f3;
  animation: glitch-anim-2 7s infinite linear alternate-reverse;
}
body .page .main .spruecheklopfr h1:after {
  left: -0.1rem;
  top: 0;
  text-shadow: -0.1rem 0 #c06;
  animation: glitch-anim 4s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% {
    clip: rect(3px, 9999px, 93px, 0);
  }
  5% {
    clip: rect(53px, 9999px, 78px, 0);
  }
  10% {
    clip: rect(10px, 9999px, 75px, 0);
  }
  15% {
    clip: rect(32px, 9999px, 40px, 0);
  }
  20% {
    clip: rect(65px, 9999px, 62px, 0);
  }
  25% {
    clip: rect(31px, 9999px, 14px, 0);
  }
  30% {
    clip: rect(94px, 9999px, 87px, 0);
  }
  35% {
    clip: rect(81px, 9999px, 41px, 0);
  }
  40% {
    clip: rect(45px, 9999px, 50px, 0);
  }
  45% {
    clip: rect(82px, 9999px, 41px, 0);
  }
  50% {
    clip: rect(71px, 9999px, 3px, 0);
  }
  55% {
    clip: rect(75px, 9999px, 60px, 0);
  }
  60% {
    clip: rect(20px, 9999px, 49px, 0);
  }
  65% {
    clip: rect(67px, 9999px, 92px, 0);
  }
  70% {
    clip: rect(47px, 9999px, 55px, 0);
  }
  75% {
    clip: rect(63px, 9999px, 90px, 0);
  }
  80% {
    clip: rect(70px, 9999px, 92px, 0);
  }
  85% {
    clip: rect(41px, 9999px, 60px, 0);
  }
  90% {
    clip: rect(56px, 9999px, 79px, 0);
  }
  95% {
    clip: rect(21px, 9999px, 68px, 0);
  }
  100% {
    clip: rect(15px, 9999px, 72px, 0);
  }
}
@keyframes glitch-anim-2 {
  0% {
    clip: rect(65px, 9999px, 99px, 0);
  }
  5% {
    clip: rect(86px, 9999px, 70px, 0);
  }
  10% {
    clip: rect(79px, 9999px, 60px, 0);
  }
  15% {
    clip: rect(15px, 9999px, 88px, 0);
  }
  20% {
    clip: rect(24px, 9999px, 5px, 0);
  }
  25% {
    clip: rect(35px, 9999px, 3px, 0);
  }
  30% {
    clip: rect(56px, 9999px, 11px, 0);
  }
  35% {
    clip: rect(2px, 9999px, 38px, 0);
  }
  40% {
    clip: rect(60px, 9999px, 50px, 0);
  }
  45% {
    clip: rect(27px, 9999px, 4px, 0);
  }
  50% {
    clip: rect(79px, 9999px, 12px, 0);
  }
  55% {
    clip: rect(23px, 9999px, 8px, 0);
  }
  60% {
    clip: rect(65px, 9999px, 55px, 0);
  }
  65% {
    clip: rect(19px, 9999px, 7px, 0);
  }
  70% {
    clip: rect(43px, 9999px, 17px, 0);
  }
  75% {
    clip: rect(65px, 9999px, 91px, 0);
  }
  80% {
    clip: rect(45px, 9999px, 66px, 0);
  }
  85% {
    clip: rect(3px, 9999px, 2px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 81px, 0);
  }
  95% {
    clip: rect(29px, 9999px, 20px, 0);
  }
  100% {
    clip: rect(82px, 9999px, 28px, 0);
  }
}
body .page .main .spruecheklopfr .ticker {
  width: 50.8rem;
  height: 3rem;
  position: relative;
  left: -3.5rem;
  font-size: 2rem;
  margin-top: 10rem;
  overflow: hidden;
  transform: rotate(3deg);
}
body .page .main .spruecheklopfr noscript {
  font-size: 1.2rem;
}
body noscript,
body .loadmsg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .loadmsg svg circle {
  stroke: #333;
}
body .quotes {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 0;
}
body .quotes p.pending {
  color: #ff0080;
}
body .quotes .quote-list {
  margin-bottom: 2rem;
}
body .quotes .quote-list a.quote {
  color: inherit;
}
body .quotes .quote-list a.quote.pending {
  color: #ff0080;
}
body .quotes .quote-list input[type=text] {
  font-family: 'Roboto Mono';
  font-size: 0.8rem;
  width: 100%;
  border: 0.05rem solid;
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
  outline: none;
}
body form p label {
  font-weight: bold;
}
body form p textarea {
  height: 6rem;
}
body form p textarea,
body form p input[type=text] {
  font-family: 'Roboto Mono';
  font-size: 0.9rem;
  width: 100%;
  border: 0.05rem solid;
  border-radius: 0.4rem;
  padding: 0.2rem;
}
body form p.buttons {
  text-align: right;
}
body form p.buttons input[type=submit],
body form p.buttons input[type=button],
body form p.buttons a.button {
  font-family: Nunito;
  font-size: 0.8em;
  font-weight: bold;
  background-color: transparent;
  color: #333;
  border: 0.05rem solid;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
}
body form p.buttons input[type=submit]:not(:first-child),
body form p.buttons input[type=button]:not(:first-child),
body form p.buttons a.button:not(:first-child) {
  margin-left: 0.4rem;
}
body form p input[type=checkbox] {
  margin-left: 0.4rem;
}
body form p.error label {
  color: #ff0080;
}
body form p.error textarea {
  border-color: #ff0080;
}
body .page .message {
  color: #c06;
}
body .page .error {
  color: #c06;
}