html, body {
margin: 0;
padding: 0;
}

@font-face {
  font-display: swap; 
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/catamaran-v19-latin-regular.woff2') format('woff2'), 
       url('fonts/catamaran-v19-latin-regular.ttf') format('truetype');
}

@font-face {
  font-display: swap; 
  font-family: 'CatamaranBold';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/catamaran-v19-latin-900.woff2') format('woff2'), 
       url('fonts/catamaran-v19-latin-900.ttf') format('truetype'); 
}
.catamaran {
 font-family: 'Catamaran', sans-serif;
}
.catamaranb {
 font-family: 'CatamaranBold', sans-serif;
}

#logolevel {
 padding: 19px 0 15px 0;
 background-color: #f1f2f1;
}
#logolevel img {
 display: block;
 height: 55px;
 width: auto;
 margin: 0 auto;
}

.tfx {
 transition: all .8s;
}
.tfxs {
 transition: all .2s;
}

#yeah {
 font-family: 'Arial',sans-serif;
 padding: 12px 0;
 text-align: center;
 font-size: 120%;
 color: #fff;
 background-color: #111;
 margin: 0;
}


#quizzarea,
#larea {
 text-align: center;
 padding: 15px 4px;
 background-color: #A1FFFF;
}
#larea {
 background-color: #444;
 padding: 17px 4px 15px 4px;
}
#larea p {
  display: inline-block;
  padding: 8px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 60%;
  width: 18px;
  margin: 5px;
  vertical-align: middle;
  font-family: 'Arial', sans-serif;
}
.letterclick {
 cursor: pointer;
}
.letterclick:hover {
 background-color: #000 !important;
 color: #fff;
}

.newround {
 display: block;
 width: 220px;
 padding: 15px;
 color: #fff;
 font-weight: bold;
 background-color: #619FF8;
 text-align: center;
 font-size: 115%;
 border-radius: 3px;
 box-shadow: 1px 3px rgba(0,0,0,.6);
 font-family: sans-serif;
 text-decoration: none;
 margin: 19px auto;
}

.loader {
  border: 12px solid #f3f3f3; /* Light grey */
  border-top: 12px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 1.5s linear infinite;
  margin: 12px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#quizzarea .elet {
  display: inline-block;
  padding: 10px;
  font-size: 26px;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  width: 26px;
  margin: 7px;
  font-weight: bold;
  font-family: monospace;
  text-transform: uppercase; 
  border: 1px solid #65C4C4;
}

#top p.green {
  position: fixed;
  top: 38px;
  left: 3%;
  z-index: 1000;
  padding: 18px;
  font-size: 90%;
  background-color: #A1FFFF;
  border: 1px solid #78ACAC;
  font-family: sans-serif;
  font-weight: bold;
    border-radius: 8px;
}

#top p.red {
  position: fixed;
  top: 38px;
  left: 3%;
  z-index: 1000;
  padding: 18px;
  font-size: 90%;
  background-color: #FFA1B1;
  border: 1px solid #F94D6A;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 8px;
}

em {
 font-style: normal;
}

.elet-temp-2 {
 background-color: #FFE7A1 !important;
 border: 0 solid !important;
 color: #FFE7A1 !important;
 padding: 1px !important;
 display: none !important;
}

#punktlevel {
 position: fixed;
 height: 33px;
 z-index: 100;
 top: 0;
 width: 100%;
 background-color: #FFA1B1;
 text-align: center;
 box-shadow: 0 5px 6px rgba(0,0,0,.8);
}
#punktlevel div {
 color: #fff;
 display: inline-block;
 width: 31%;
 vertical-align: middle;
 font-size: 17px;
 padding: 7px 0;
 font-weight: bold;
 font-family: sans-serif;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6)
}
.levelnext {
 height:33px;
}

.textinfos {
 background-color: #444;
 padding: 40px 0;
}

.fteu {
 padding: 68px 0;
 background: #000;
 text-align: center;
}
.fteu h3 {
 color: #fff;
 font-size: 133%;
 font-family: 'CatamaranBold', sans-serif;
}
.fteu a {
 font-family: 'Catamaran', sans-serif;
 color: #888;
 padding: 6px;
 font-size: 110%;
}

#sharex {
  text-align: center;
  margin: 32px 0;
}
#sharex span {
 color: #444;
 font-size: 90%;
}

.textinfos * {
 color: #fff;
}
.textinfos h1,
.textinfos h2 {
  font-size: 150%;
  line-height: 1.25;
  margin: 30px auto 20px auto;
  text-align: center;
  padding: 0 6px;
  font-family: 'CatamaranBold',  sans-serif;
}
.textinfos p {
 margin: 0 auto 20px auto;
 width: 94%;
 max-width: 728px;
 line-height: 1.55;
 font-family: sans-serif;
 font-size: 110%;
   font-family: 'Catamaran',  sans-serif;
}

.shares {
 margin: 0 12px;
 text-align: center;
}

.lwh {
 text-align: center;
 margin: 32px 0 24px 0;
}

.shares a {
 display: inline-block;
 vertical-align: top;
 width: 48px;
 height: 48px;
 background-color: #ccc;
 border-radius: 6px;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 60%;
 margin: 0 10px;
}
.shares a.pi {
 background-image: url(../icons/pi.svg);
}
.shares a.xtw {
 background-image: url(../icons/tw.svg);
}
.shares a.fb {
 background-image: url(../icons/fb.svg);
}
.shares a:hover {
 background-color: #fff;
}

.cufe {
 height: 60px;
}

.good-p {
  width: 66%;
  padding: 20px 20px 20px 100px;
  max-width: 680px;
  margin: 18px auto;
  font-size: 120%;
  line-height: 1.5;
  background-color: #FFE0E5;
  background-position: left 14px center;
  background-repeat: no-repeat;
  background-size: 56px;
}
.good-p strong {
 color: #A15562;
 font-family: 'CatamaranBold', sans-serif;
 
}

.game-time {
 background-image: url(../icons/clock.svg);
}
.game-pos {
 background-image: url(../icons/platz.svg);
}
.game-pos1 {
 background-image: url(../icons/platz1.svg);
}
.game-angry {
 background-image: url(../icons/angryb.svg);
}
.game-cap {
 background-image: url(../icons/cappy.svg);
}

.standard {
  width: 92%;
  margin: 25px auto;
  display: block;
  max-width: 970px;
}
.standard p {
   font-size: 115%;
  line-height: 1.45;
  font-family: 'Catamaran', sans-serif;
}

@media(max-width: 980px) {
#quizzarea .elet {
  padding: 4px;
  font-size: 14px;
  margin: 4px 1px;
  width: 15px; 
 }
 
#larea p {
  display: inline-block;
  padding: 6px;
  font-size: 14px;
  border-radius: 60%;
  width: 16px;
  margin: 4px;
  vertical-align: middle;
  font-family: 'Arial', sans-serif;
}

}