/* Hier benutzte Fonts: */
/* font-family: 'Finger Paint', cursive; */
/* font-family: 'Nerko One', cursive; */


body {
background-image: url(../../../../img/pokemon.jpg);
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";

}


/*
.blau {
color: #0371E6;
display: inline-block;
}

.blau2 {
color: #2B88D6;
display: inline-block;
}

.blau3 {
color: #1B2A41;
display: inline-block;
}

.pink {
color: #D800B8;
display: inline-block;
}

.rot {
color: #88292F;
display: inline-block;
}

.gelb {
color: #F7B406;
display: inline-block;
}

.gelb2 {
color: #FFE66D;
display: inline-block;
}

.weiss {
color: #F7FFF7;
display: inline-block;
}

.orange {
color: #F86624;
display: inline-block;
}
*/

/* #212529; */

/* ==== GERÜST DER SEITE - RAHMEN UND DIVS DIE DURCH JS ERSTELLT WERDEN ==== */
.beschreibung {
	color: #CD950C;
	text-align: center;
	font-size: 17px;
}
.rahmenli1class {
	color: #88292F;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	text-shadow: 2px 2px 2px black;
}
.rahmenli2class {
	color: #F86624;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.3);
	text-shadow: 2px 2px 2px black;
}
.rahmenli3class {
	color: #88292F;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	text-shadow: 2px 2px 2px black;
}
.rahmenli4class {
	color: #F86624;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	text-shadow: 2px 2px 2px black;
}
.rahmenli5class {
	color: #00C5CD;
	text-align: center;
	font-size: 22px;
}
.wurfausgabe {
	text-align: center;
	font-size: 2rem;
	color: black;
	font-family: 'Nerko One', cursive;
		text-shadow: 2px 3px 4px white;
}
.wurfausgabe3 {
	text-align: center;
	font-size: 2rem;
	color: black;
	font-family: 'Nerko One', cursive;
	text-shadow: 1px 1px 2px red;
}
.WGCSS {
	color: #9AC0CD;
	font-size: 20px;
}

#verlorenText {
	font-family: 'Nerko One', cursive;
	font-weight: bold;
	color: #88292F;
	font-size: 1rem;
	text-shadow: 2px 2px 2px black;
	text-align: center;
}

.losbuttonclass {
	cursor: pointer;
	width: 150px;
	height: 120px;
	text-align: center;
}
.losbuttonclass:hover {
	width: 170px;
	height: 150px;
}
.labelwurfgeschwindigkeitclass {
	width: 300px;
	height: 50px;
	font-size: 35px;
	background-image: linear-gradient(90deg, red 50%, red, white 50%);
	color: white;
	font-weight: bold;
}
.labelwinkelclass {
	width: 300px;
	height: 50px;
	font-size: 35px;
	background-image: linear-gradient(90deg, white 50%, white, red 50%);
	color: red;
	font-weight: bold;
}
.startespiel {
	width: 150px;
	height: 85px;
	font-size: 25px;
}
.wurfgeschwindigkeit {
	text-align: center;
}
.wurfwinkel {
	text-align: center;
}
.losbuttonclass2 {
	text-align: center;
	margin: 10px;
}
.losbuttonclass2 > img {
width: 100px;
height: auto;
transition: 0.5s;
}
.losbuttonclass2 > img:hover {
width: 120px;
height: auto;
transform: rotate(360deg);
}
/* ========================================================================== */



.h2 {
  font-family: 'Finger Paint', cursive;
  color: #88292F;
  text-align: center;
  padding-left: 110px;

}
#h2ID {
  text-align: center;
}
.pokeballBild {
  text-align: center;
}
.pokeballBild > img {
  width: 290px;
  height: auto;
  opacity: 0.8;
}

.pokemonTextEinleitung {
font-family: 'Finger Paint', cursive;
font-size: 1rem;
text-align: center;
padding-top: 15px;
padding-left: 110px;
font-weight: bold;
text-shadow: 1px 1px 1px #8E99A4;
}
.pokemonTextEinleitung > span {
color: #88292F;
font-size: 1.5rem;
}

.startespiel {
  border: 1px solid black;
  background-image: linear-gradient(45deg, red, white);
  font-family: 'Finger Paint', cursive;
  border-radius: 20px;
  box-shadow: 4px 10px 39px 20px rgba(255,255,255,1);
  cursor: pointer;
}

/* ============ Der Blinkende Rahmen =========== */

.rahmenclass {
list-style: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.rahmenclass {
  position: relative;
  z-index: 0;

  width: 550px;
  height: auto;
  /*
  width: 400px;
  height: 300px;
  */
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
}
.rahmenclass::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #399953;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#399953), to(#399953)), -webkit-gradient(linear, left top, left bottom, from(#fbb300), to(#fbb300)), -webkit-gradient(linear, left top, left bottom, from(#d53e33), to(#d53e33)), -webkit-gradient(linear, left top, left bottom, from(#377af5), to(#377af5));
  background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
  -webkit-animation: rotate 4s linear infinite;
          animation: rotate 4s linear infinite;
}
.rahmenclass::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background-image: url(../../../../img/pokemonschwarz.jpg);
background-position: 50% 50%;
background-size: cover;
  border-radius: 5px;
}

/* ========================================================================= */

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


@media(max-width: 1024px) {
.platzhalter {height: 20px;}
.h2 {margin: 0; padding: 0;}
#h2ID {font-size: 1.5rem;}
.pokeballBild > img {width: 200px; height: auto;}
.pokemonTextEinleitung {font-size: 0.8rem; text-align: center; width: 100%; padding-left: 70px; position: relative;}
.pokemonTextEinleitung > span {font-size: 0.8rem;}
.startespiel {text-align: center;}
.rahmenclass {width: 500px; height: 400px; }
.rahmenli1class {font-size: 1.2rem;}
.rahmenli2class {font-size: 2rem;}
.rahmenli3class {font-size: 1.2rem;}
.rahmenli4class {font-size: 2rem;}
.rahmenli5class {font-size: 1.2rem;}
.labelwurfgeschwindigkeitclass {width: 250px;	height: 50px;	font-size: 1rem;}
.labelwinkelclass {	width: 250px;	height: 50px;	font-size: 1rem;}
.wurfausgabe {font-size: 1.5rem;}
.wurfausgabe3 {	font-size: 1.5rem;}
.iweg {font-size: 0px;}
#verlorenText {font-size: 1.5rem;}
}


@media (max-width: 480px) {
.pokeballBild > img {width: 180px; height: auto;}
.pokemonTextEinleitung {font-size: 0.8rem; text-align: center; width: 100%; padding-left: 0px; position: relative; background-color: rgb(000,000,000, 0.2);}
.pokemonTextEinleitung > span {font-size: 0.8rem; text-shadow: 2px 2px 2px black; background-color: rgb(000,000,000, 0.8); padding-left: 5px; padding-right: 5px;}
.rahmenclass {width: 400px; height: 400px; }
.rahmenli3class {font-size: 1rem; background-color: rgb(255, 255, 255, 0.6); }
.iweg {font-size: 2rem;}
.startespiel {width: 150px; height: auto;}
#verlorenText {text-shadow: 1px 1px 1px white;}
}
@media (max-height: 480px) {
#h2ID {font-size: 1.1rem;}
.pokeballBild > img {width: 120px; height: auto;}
.pokemonTextEinleitung {font-size: 0.8rem; text-align: center; width: 100%; padding-left: 0px; position: relative; background-color: rgb(000,000,000, 0.2);}
.pokemonTextEinleitung > span {font-size: 0.8rem; text-shadow: 2px 2px 2px black; background-color: rgb(000,000,000, 0.8); padding-left: 5px; padding-right: 5px;}
.rahmenclass {width: 450px; height: 300px; }
.rahmenul {padding: 0;}
.rahmenclass {padding: 0;}
.rahmenli1class {font-size: 1rem;}
.rahmenli2class {font-size: 1.5rem;}
.rahmenli3class {font-size: 1rem;}
.rahmenli4class {font-size: 1.5rem;}
.rahmenli5class {font-size: 1rem;}
.rahmenli5class > img {width: 120px; height: auto; }
.labelwurfgeschwindigkeitclass {width: 250px;	height: 30px;	font-size: 1rem;}
.labelwinkelclass {	width: 250px;	height: 30px;	font-size: 1rem;}
.wurfausgabe {font-size: 1.5rem;}
.wurfausgabe3 {	font-size: 1.5rem;}
.losContainer {	height: 100px;}
.losbuttonclass {	height: 80px;}
.losbuttonclass2 {height: 80px !important;}
.losbuttonclass > img {	width: 50px;	height: auto;}
.losbuttonclass2 > img:hover {width: 60px;	height: 60px;	transform: rotate(360deg);}
.losCol {height: 80px;}
}


@media (max-width: 479px) {
.platzhalter {height: 0px;}
.h2 {padding: 0px !important;}
.h2 > h2 { font-size: 0.8rem; margin-top: 20px;}
.pokeballBild > img {width: 100px; height: auto;}
.pokemonTextEinleitung {font-size: 0.8rem; text-align: center; width: 100%; padding-left: 0px; position: relative; padding: 0px;}
.pokemonTextEinleitung > span {font-size: 0.8rem;}
.h2 {padding-left: 50px; text-align: center;}
.rahmenclass {width: 300px; height: 350px; }
.rahmenli1class {font-size: 1rem;}
.rahmenli2class {font-size: 2rem;}
.rahmenli3class {font-size: 1rem;}
.rahmenli4class {font-size: 2rem;}
.rahmenli5class {font-size: 1rem;}
.labelwurfgeschwindigkeitclass {width: 150px;	height: 50px;	font-size: 1rem;}
.labelwinkelclass {	width: 150px;	height: 50px;	font-size: 1rem;}
.losContainer {	height: 100px;}
.losbuttonclass {	height: 80px;}
.losbuttonclass2 {height: 80px !important;}
.losbuttonclass > img {	width: 50px;	height: auto;}
.losbuttonclass2 > img:hover {width: 60px;	height: 60px;	transform: rotate(360deg);}
.losCol {height: 80px;}
.wurfausgabe {font-size: 1.5rem;}
.wurfausgabe3 {	font-size: 1.5rem;}
}

@media (max-height: 400px) {
.platzhalter {height: 0px;}
.h2 > h2 { font-size: 0.8rem; margin-top: 20px;}
.pokeballBild > img {width: 150px; height: auto;}
.pokemonTextEinleitung {font-size: 0.8rem; text-align: center; width: 100%; padding-left: 0px; position: relative;}
.pokemonTextEinleitung > span {font-size: 0.8rem;}
.h2 {padding-left: 50px; text-align: center;}
}





/* === WIchtige Breakponts

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

*/