/* Schriftarten auf dieser Seite */
/* 	font-family: 'Sansita', sans-serif; */
/* font-family: 'Zilla Slab Highlight', cursive; */
/* font-family: 'Nerko One', cursive; */
/* font-family: 'Permanent Marker', cursive;*/
/* font-family: 'Goldman', cursive; */

body {
background-image: url(../../../../../seiten/games/quiz/quizImg/quiz.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

* {box-sizing: border-box;}

/* ==== Überschrift ITS QUIZ TIME ==== */
.quizUeberschrift {
  font-family: 'Zilla Slab Highlight', cursive;
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  background-color: #F86624;
  box-shadow: 10px 10px 10px black;
  color: #140701;
  opacity: 0.9;
  transform: skew(-30deg);
  font-size: 3rem;
  padding-top: 10px;
  letter-spacing: 2px;
}
.container > div > div > p {
  text-align: center;
  vertical-align: middle;
}

/* === Start-Button === */
.container > div > div > div {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.ppp, container > div > div > div > p {
  padding-top: 1px;
  background-image: linear-gradient(45deg, #2ab7ca 50%, #2ab7ca 51%, #fed766 49% );
  width: 200px;
  height: 70px;
  filter: blur(1px);
  border: solid 2px #fe4a49;
  font-family: 'Zilla Slab Highlight', cursive;
  vertical-align: middle;
  margin: 0px;
  font-size: 2rem;
  color: #3f403f;
  opacity: 0.8;
  transition: 0.4s;
  box-shadow: 5px 5px 5px black;
  cursor: pointer;
}
.ppp:hover, container > div > div > div > p:hover {
background: radial-gradient(circle, rgba(254,74,73,1) 0%, rgba(42,183,202,1) 14%, rgba(57,185,195,1) 43%, rgba(254,215,102,1) 75%);
color: #141514;
box-shadow: 0px 2px 2px black;
filter: blur(0);
margin-left: 5px;
border: solid 3px #fe4a49;
}

.sieben { font-size: 3rem;}
/* === Einleitungstext === */
.einleitungsText {
background-color: rgba(0, 0, 0, 0.1);
border: solid 2px #fe4a49;
}
.einleitungsText > span {
font-family: 'Nerko One', cursive;
font-size: 2rem;
font-weight: bold;
}
.einleitungsText > span:nth-child(1n) {
  color: #2ab7ca;
  text-shadow: 1px 1px 1px black;
}
.einleitungsText > span:nth-child(2n) {
  color: #F86624;
  text-shadow: 1px 1px 1px black;
}
.einleitungsText > span:nth-child(3n) {
  color: #fe4a49;
  text-shadow: 1px 1px 1px black;
}

/* === Ausgabetext Frage & Antwortmöglichkeiten === */
.ausgabeFrage {
font-size: 1.5rem;
margin-top: 20px;
font-family: 'Goldman', cursive;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
color: #2b2d42;
text-shadow: 3px 1px 1px #74a4bc;
letter-spacing: 2px;
height: 100px;
}
.ausgabeAntwort {
font-size: 1.5rem;
margin-top: 0px;
font-family: 'Goldman', cursive;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
color: #74a4bc;
text-shadow: 3px 1px 1px #2b2d42;
letter-spacing: 2px;
height: 150px;
}

#time {
  height: 100px;
}
#content {
  display: flex;
  flex-direction: column;
  margin: 0px;
  vertical-align: middle;
}

.button1 {
width: 120px;
height: 150px;
background-image: linear-gradient(163deg, #2ab7ca, #56CDDC, #BBEBF1 );
font-family: 'Permanent Marker', cursive;
opacity: 0.9;
font-size: 5rem;
color: #2B2D42;
text-shadow: 2px 2px 5px #F86624;
box-shadow: 20px 22px 10px #1B1B22;
border-radius: 20px;
cursor: pointer;
transition: 0.5s;
filter: blur(2px)
}

.button1:hover {
  box-shadow: 5px 5px 2px #09090B;
  transform: skew(-2deg);
  filter: blur(0px);
}
.button1:active {
  box-shadow: 5px 5px 2px #09090B;
  color: #F86624;
  text-shadow: 2px 2px 1px #11040D;
  font-size: 6rem;
}

.button2 {
width: 120px;
height: 150px;
background-image: linear-gradient(163deg, #fed766, #FEE59A, #FFF5D7 );
font-family: 'Permanent Marker', cursive;
opacity: 0.9;
font-size: 5rem;
color: #2B2D42;
text-shadow: 2px 2px 5px #F86624;
box-shadow: 20px 22px 10px #1B1B22;
border-radius: 20px;
cursor: pointer;
transition: 0.5s;
filter: blur(2px)
}
.button2:hover {
  box-shadow: 5px 5px 2px #09090B;
  transform: skew(-2deg);
  filter: blur(0px);
}
.button2:active {
  box-shadow: 5px 5px 2px #09090B;
  color: #F86624;
  text-shadow: 2px 2px 1px #11040D;
  font-size: 6rem;

}
.button3 {
width: 120px;
height: 150px;
background-image: linear-gradient(163deg, #fe4a49, #FE8585, #FEC2C2 );
font-family: 'Permanent Marker', cursive;
opacity: 0.9;
font-size: 5rem;
color: #2B2D42;
text-shadow: 2px 2px 5px #F86624;
box-shadow: 20px 22px 10px #1B1B22;
border-radius: 20px;
cursor: pointer;
transition: 0.5s;
filter: blur(2px);
}
.button3:hover {
  box-shadow: 5px 5px 2px #09090B;
  transform: skew(-2deg);
  filter: blur(0px);
}
.button3:active {
  box-shadow: 5px 5px 2px #09090B;
  color: #F86624;
  text-shadow: 2px 2px 1px #11040D;
  font-size: 6rem;
}

.punkteanzeige {
  width: 300px;
  height: 70px;
  background-image: linear-gradient(163deg, #26547C, #3574AC );
  font-family: 'Permanent Marker', cursive;
  opacity: 0.9;
  font-size: 2rem;
  color: #06D6A0;
  text-shadow: 2px 2px 5px #F86624;
  box-shadow: 20px 22px 10px #1B1B22;
  border-radius: 20px;
  transition: 0.5s;
  padding-bottom: 50px;
  margin-bottom: 10px;
  }
.richtigeAntwort {
  width: 300px;
  height: 70px;
  background-image: linear-gradient(163deg, #26547C, #3574AC );
  font-family: 'Permanent Marker', cursive;
  opacity: 0.9;
  font-size: 1.2rem;
  color: #F86624;
  text-shadow: 2px 2px 5px #06D6A0;
  box-shadow: 20px 22px 10px #1B1B22;
  border-radius: 20px;
  transition: 0.5s;
  padding-bottom: 50px;
  margin-top: 10px;
  }
.neustart {
  width: 300px;
  height: 75px;
  background-color: black;
  color: white;
  opacity: 0.8;
  font-family: 'Zilla Slab Highlight', cursive;
  cursor: pointer;
}






/* Ladebalken */
#content {
   /* width: 26.5%;
    /* Full Width */
	width: 101%;
	height: 5px;
    margin: 50px auto;
    background: #000;

}

.expand {
    width: 98%;
    height: 4px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 15px 5px rgba(0,198,255,0.7);
    -moz-animation: fullexpand 17s ease-out;
    -webkit-animation: fullexpand 17s ease-out;
}
/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width: 0px;
  }
100% {
    width: 100%;
  }
}
@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }

100% {
    width: 100%;
  }
}



@media (max-width: 1280px) {
.quizUeberschrift {width: 400px; height: 80px; font-size: 2rem; padding-top: 10px; }
  .einleitungsText {width: 80%; margin-left: auto; margin-right: auto; }
  .ppp {width: 150px; height: 50px; margin: 0px; font-size: 1.5rem; }
  .button1 {width: 80px; height: 100px; font-size: 3rem; }
  .button2 {width: 80px; height: 100px; font-size: 3rem; }
  .button3 {width: 80px; height: 100px; font-size: 3rem; }
  .punkteanzeige {width: 200px; height: 50px; font-size: 1rem;}
  .richtigeAntwort {width: 200px; height: 50px; font-size: 1rem; }
  .ausgabeFrage {font-size: 1.3rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1.1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 80%;margin-top: 20px; margin-bottom: 15px;}
  .expand {width: 80%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 80%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 78%;}
        }
}

@media (max-width: 1024px) {
.quizUeberschrift {width: 400px; height: 80px; font-size: 2rem; padding-top: 10px; }
  .einleitungsText {width: 80%; margin-left: auto; margin-right: auto; }
  .ppp {width: 150px; height: 50px; margin: 0px; font-size: 1.5rem; }
  .button1 {width: 80px; height: 100px; font-size: 3rem; }
  .button2 {width: 80px; height: 100px; font-size: 3rem; }
  .button3 {width: 80px; height: 100px; font-size: 3rem; }
  .punkteanzeige {width: 200px; height: 50px; font-size: 1rem;}
  .richtigeAntwort {width: 200px; height: 50px; font-size: 1rem; }
  .ausgabeFrage {font-size: 1.3rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1.1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 50%;}
  .expand {width: 50%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 50%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 48.5%;}
        }
}

@media (max-width: 855px) {
.quizUeberschrift {width: 400px; height: 80px; font-size: 2rem; padding-top: 10px; }
  .einleitungsText {width: 80%; margin-left: auto; margin-right: auto; }
  .ppp {width: 150px; height: 50px; margin: 0px; font-size: 1.5rem; }
  .button1 {width: 80px; height: 100px; font-size: 3rem; }
  .button2 {width: 80px; height: 100px; font-size: 3rem; }
  .button3 {width: 80px; height: 100px; font-size: 3rem; }
  .punkteanzeige {width: 200px; height: 50px; font-size: 1rem;}
  .richtigeAntwort {width: 200px; height: 50px; font-size: 1rem; }
  .ausgabeFrage {font-size: 1.3rem; width: 80%; height: 120px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1.1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 80%;}
  .expand {width: 80%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 80%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 77%;}
        }
}
@media (max-width: 768px) {
.quizUeberschrift {width: 400px; height: 80px; font-size: 2rem; padding-top: 10px; }
  .einleitungsText {width: 80%; margin-left: auto; margin-right: auto; }
  .ppp {width: 150px; height: 50px; margin: 0px; font-size: 1.5rem; }
  .button1 {width: 80px; height: 100px; font-size: 3rem; }
  .button2 {width: 80px; height: 100px; font-size: 3rem; }
  .button3 {width: 80px; height: 100px; font-size: 3rem; }
  .punkteanzeige {width: 200px; height: 50px; font-size: 1rem;}
  .richtigeAntwort {width: 200px; height: 50px; font-size: 1rem; }
  .ausgabeFrage {font-size: 1.3rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1.1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 50%;}
  .expand {width: 50%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 50%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 48.5%;}
        }
}
@media (max-width: 736px) {
.quizUeberschrift {width: 400px; height: 80px; font-size: 2rem; padding-top: 10px; margin-top: 20px !important;}
  .einleitungsText {width: 80%; margin-left: auto; margin-right: auto; }
  .einleitungsText > span { font-size: 1rem; }
  .sieben {font-size: 2.0rem;}
  .ppp {width: 100px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 55px; height: 70px; font-size: 2rem; }
  .button2 {width: 55px; height: 70px; font-size: 2rem; }
  .button3 {width: 55px; height: 70px; font-size: 2rem; }
  .punkteanzeige {width: 180px; height: 40px; font-size: 1rem;}
  .richtigeAntwort {width: 180px; height: 40px; font-size: 1rem; }
  .ausgabeFrage {font-size: 1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1.1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 50%;}
  .expand {width: 50%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 50%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 48.5%;}
        }
}

@media (max-width: 600px) {
.quizUeberschrift {width: 350px; height: 55px; font-size: 1.5rem; padding-top: 10px; }
  .einleitungsText {width: 68%; margin-left: auto; margin-right: auto;}
  .einleitungsText > span {font-size: 1.2rem;}
  .sieben {font-size: 1.8rem;}
  .ppp {width: 130px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 50px; height: 80px; font-size: 3rem; }
  .button2 {width: 50px; height: 80px; font-size: 3rem; }
  .button3 {width: 50px; height: 80px; font-size: 3rem; }
  .punkteanzeige {width: 100px; height: 50px; font-size: 0.7rem;}
  .richtigeAntwort {width: 100px; height: 50px; font-size: 0.7rem; }
  .ausgabeFrage {font-size: 1rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 80%;}
  .expand {width: 80%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 80%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 75.5%;}
        }
}
@media (max-width: 480px) {
.quizUeberschrift {width: 350px; height: 55px; font-size: 1.5rem; padding-top: 10px; }
  .einleitungsText {width: 68%; margin-left: auto; margin-right: auto;}
  .einleitungsText > span {font-size: 1.2rem;}
  .sieben {font-size: 1.8rem;}
  .ppp {width: 130px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 50px; height: 80px; font-size: 3rem; }
  .button2 {width: 50px; height: 80px; font-size: 3rem; }
  .button3 {width: 50px; height: 80px; font-size: 3rem; }
  .punkteanzeige {width: 100px; height: 50px; font-size: 0.7rem;}
  .richtigeAntwort {width: 100px; height: 50px; font-size: 0.7rem; }
  .ausgabeFrage {font-size: 1rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 80%;}
  .expand {width: 80%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 80%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 75.5%;}
        }
}
@media (max-height: 480px) {
.quizUeberschrift {width: 350px; height: 55px; font-size: 1.5rem; padding-top: 10px; }
  .einleitungsText {width: 68%; margin-left: auto; margin-right: auto;}
  .einleitungsText > span {font-size: 1.2rem;}
  .sieben {font-size: 1.8rem;}
  .ppp {width: 130px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 50px; height: 80px; font-size: 3rem; }
  .button2 {width: 50px; height: 80px; font-size: 3rem; }
  .button3 {width: 50px; height: 80px; font-size: 3rem; }
  .punkteanzeige {width: 100px; height: 50px; font-size: 0.7rem;}
  .richtigeAntwort {width: 100px; height: 50px; font-size: 0.7rem; }
  .ausgabeFrage {font-size: 1rem; width: 80%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 1rem; width: 80%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 70px;}
#content {width: 80%;}
  .expand {width: 80%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 80%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 75.5%;}
        }
}

@media (max-width: 420px) {
.quizUeberschrift {width: 300px; height: 50px; font-size: 1.3rem; padding-top: 10px; }
  .einleitungsText {width: 68%; margin-left: auto; margin-right: auto;}
  .einleitungsText > span {font-size: 1.2rem;}
  .sieben {font-size: 1.8rem;}
  .ppp {width: 130px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 50px; height: 70px; font-size: 2rem; }
  .button2 {width: 50px; height: 70px; font-size: 2rem; }
  .button3 {width: 50px; height: 70px; font-size: 2rem; }
  .punkteanzeige {width: 100px; height: 50px; font-size: 0.7rem;}
  .richtigeAntwort {width: 100px; height: 50px; font-size: 0.7rem; }
  .ausgabeFrage {font-size: 0.8rem; width: 100%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 0.8rem; width: 100%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 60px;}
#content {width: 100%; margin-top: 20px; margin-bottom: 15px;}
  .expand {width: 100%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 100%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 92%;}
        }
}
@media (max-width: 360px) {
.quizUeberschrift {width: 300px; height: 50px; font-size: 1.3rem; padding-top: 10px; }
  .einleitungsText {width: 68%; margin-left: auto; margin-right: auto;}
  .einleitungsText > span {font-size: 1.2rem;}
  .sieben {font-size: 1.8rem;}
  .ppp {width: 130px; height: 40px; margin: 0px; font-size: 1.2rem; }
  .button1 {width: 50px; height: 70px; font-size: 2rem; }
  .button2 {width: 50px; height: 70px; font-size: 2rem; }
  .button3 {width: 50px; height: 70px; font-size: 2rem; }
  .punkteanzeige {width: 100px; height: 50px; font-size: 0.7rem;}
  .richtigeAntwort {width: 100px; height: 50px; font-size: 0.7rem; }
  .ausgabeFrage {font-size: 0.8rem; width: 100%; height: 80px; margin-left: auto; margin-right: auto; }
  .ausgabeAntwort {font-size: 0.8rem; width: 100%; height: 100px; margin-left: auto; margin-right: auto; }
#time {height: 60px;}
#content {width: 100%; margin-top: 20px; margin-bottom: 15px;}
  .expand {width: 100%;}
      @-moz-keyframes fullexpand {
        0%  { width: 0px;}
        100% { width: 100%;}
        }
      @-webkit-keyframes fullexpand {
        0% {width: 0px;}
        100% {width: 92%;}
        }
}




	/* === WIchtige Breakponts

	320 Pixel
	480 Pixel OK OK
	768 Pixel
	1024 Pixel
	1200 Pixel
	>1200 Pixel

	*/