/* Schriftarten */
/* font-family: 'Do Hyeon', sans-serif; */
/* font-family: 'Nerko One', cursive; */
html {
  height: auto;
}
*{box-sizing: border-box;}

body {
background-color: black;
background-image: url(fortnite.jpg);
/* background-image: url("https://cdnb.artstation.com/p/assets/images/images/013/524/151/large/paul-mader-lobbyseason6.jpg?1539981291"); */
background-repeat: no-repeat;
background-size: cover;
}

a {
  color: #149ddd;
}
a:hover {
  color: #37b3ed;
  text-decoration: none;
}
/* Größe des Weipers */
.swiper-container {
    width: 50%;
    height: 150px;
}
/* Darstellung des Inhaltes */
.swiper-slide {
      text-align: center;
      font-size: 3rem;
      color: #662097;
      text-shadow: 2px 0px 2px black;
      font-family: 'Do Hyeon', sans-serif;
      cursor: pointer;
/* Ausrichtung Text Vertikal */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
.zentrieren {
text-align: center;
}
.schrift {
font-family: 'Do Hyeon', sans-serif;
}
.anleitung {
  color: black;
  text-shadow: 1px 0px 0px #d2d4c8;
  font-family: 'Nerko One', cursive;
  font-size: 1.2rem;
}
.anleitung > div:nth-child(1n){
  color: #9235D4;
  font-size: 1.3rem;
}
.anleitung > div:nth-child(2n){
  color: #0A5070;
}
.anleitung > div:nth-child(3n){
  color: #0A5070;
}
.anleitung > div:nth-child(4n){
  color: #9235D4;
  font-size: 1.3rem;
}
.anleitung > div:nth-child(5n){
  color: #0A5070;
}
.anleitung > div:nth-child(6n){
  color: #0A5070;
}
.anleitung > div:nth-child(7n){
  color: #0A5070;
}
.anleitung > div:nth-child(8n){
  color: #0A5070;
}
.anleitung > div:nth-child(9n){
  color: black;
}
.kategorie {
margin-bottom: 20px;
font-family: 'Nerko One', cursive;
color: #9235D4;
text-shadow: 1px 0px 0px black;
}
.autos:hover {
color: white;

}
.textfeld {
font-family: 'Nerko One', cursive;
  font-size: 1.3rem;
  color: #449C30;
  text-shadow: 1px 0px 0px black;
}
.pText {
  margin: 0px;
  background-color: rgb(3, 11, 17, 0.8);
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.gesuchtesWort {
width: 350px;
height: 75px;
background-color: rgb(3, 11, 17, 0.2);
margin-left: auto;
margin-right: auto;
}
.ausgabeWort {
font-size: 2rem;
color: #FF9F1C;
font-family: 'Do Hyeon', sans-serif;
letter-spacing: 2px;
text-shadow: 3px 0px 0px black;
}
.drehendesDiv {
padding-top: 15px;
display: inline-block;
}
.punkteStand {
  font-family: 'Do Hyeon', sans-serif;
  display: inline-block;
  padding-top: 15px;
  font-size: 2.3rem;
  color: #662097;
}
.eingabeUser {
  width: 350px;
  height: 75px;
  background-color: rgb(3, 11, 17, 0.2);
  margin-left: auto;
  margin-right: auto;
}
.eingabeUserInput {
margin-top: auto;
margin-bottom: auto;
width: 100%;
}
.userInput {
  width: 230px;
  height: 55px;
  font-family: 'Do Hyeon', sans-serif;
  font-size: 1.5rem;

}
.checkButton {
  font-family: 'Do Hyeon', sans-serif;
  height: 58px;
  color: black;
  background-color: rgb(108, 151, 233, 0.2);
  font-weight: bold;

}
.hilfebutton {
  font-family: 'Do Hyeon', sans-serif;
  height: 58px;
  color: black;
  background-color: rgb(108, 151, 233, 0.2);
  font-weight: bold;


}
.hilfeContainer {
  font-family: 'Do Hyeon', sans-serif;
  margin-top: 20px;
  width: 350px;
  height: 75px;
  background-color: rgb(3, 11, 17, 0.2);
  margin-left: auto;
  margin-right: auto;
  font-size: 2.3rem;
  color: #142F0E;
  background-color: rgb(81, 187, 58, 0.2);
  text-shadow: 1px 0px 1px #76D062;
  letter-spacing: 0.2rem;
  font-weight: bold;
}
.hilfe {
  padding-top: 15px;
  font-family: 'Do Hyeon', sans-serif;
  transition: 0.3s;

}
.hilfe:hover {
  color: #10306A;
  cursor: pointer;
  text-shadow: 1px 0px 1px black;
  font-size: 2.5rem;
  filter: blur(2px);
}
.ausgabeHilfe {
  filter: blur(2px);
  color: black;
}
.footerbg {
background-color: rgb(000, 000, 000, 0.3);
}


#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 50%w; /* Full width (cover the whole page) */
  height: 50vh; /* Full height (cover the whole page) */
  top: 100px;
  left: 200px;
  right: 200px;
  bottom: 200px;
  background-color: rgba(210, 212, 200, 0.76); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
/** Dreh-Kreis in der Mitt **/
.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid black;
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 30px;
    height: 30px;
    margin: 15px auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid black;
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    position: relative;
    top: -37px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}
@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}
@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}
@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

@media (max-width: 2560px) {
.iweg {font-size: 0px;}
}

@media (max-width: 1280px) {
#overlay {height: 60vh;}
}
@media (max-width: 768px) {
  .anleitung {font-size: 1rem;}
  .anleitung > div:nth-child(1n){font-size: 1.1rem;}
  .anleitung > div:nth-child(4n){font-size: 1.1rem;}
}
@media (max-width: 480px) {
.swiper-slide {font-size: 2rem;}
.swiper-container {width: 80%;}
#overlay {width: 100%; top: 20px; left: 0px;}
.cell {color: #96B0A9;}
.iweg {font-size: 2rem;}
}
@media (max-width: 428px) {
.swiper-slide {font-size: 2rem;}
.swiper-container {width: 80%;}
.pText {font-size: 1.1rem;}
.cell {color: #96B0A9;}
.ausgabeHilfe {font-size: 2rem; filter: blur(1px);}
#overlay {width: 100%;height: 100%; top: 20px; left: 0px;}
}
@media (max-width: 360px) {
.swiper-slide {font-size: 2rem;}
.swiper-container {width: 80%;}
.pText {font-size: 1.1rem;}
.cell {color: #96B0A9;}
.ausgabeHilfe {font-size: 2rem; filter: blur(1px);}
#overlay {width: 100%;height: 100%; top: 20px; left: 0px;}
}
@media (max-width: 320px) {
.swiper-slide {font-size: 2rem;}
.swiper-container {width: 80%;}
.pText {font-size: 1rem;}
.cell {color: #96B0A9;}
.ausgabeHilfe {font-size: 2rem; filter: blur(1px);}
#overlay {width: 100%;height: 100%; top: 20px; left: 0px;}
}




/* 1200 Pixel - OK */
/* 1024 Pixel - OK */
/* 0768 Pixel - OK */
/* 0480 Pixel - OK */
/* 0360 Pixel - OK */