/* Schriftarten */
/* font-family: 'Special Elite', cursive; */
/* font-family: 'VT323', monospace; */


body {
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/cb2.jpg);

  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}
*{ box-sizing: border-box;}

.codeBreakerImg {
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/codebreaker.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100px;
}


.einleitungsText {
font-family: 'Special Elite', cursive;
color: #0EAA13;
font-size: 1.3rem;
font-weight: bold;
}

.zeile1{
background-color: rgba(8, 102, 11, 0.1);
}
.zeile1 > b {
color: #00E0D1;
}
.zeile2 {
background-color: rgba(8, 102, 11, 0.1);
}
.zeile2 > b {

}
.zeile3 {
background-color: rgba(8, 102, 11, 0.1);
}
.zeile3 > b {
color: #00E0D1;
}
.zeile4 {
background-color: rgba(8, 102, 11, 0.1);
}
.zeile4 > b {
color: #00E0D1;
}
.zeile5 {

}
.zeile5 > b {

}
.zeile6 {
margin-bottom: 35px;
background-color: rgba(8, 102, 11, 0.1);
}
.zeile6 > b {

}

.eingabefeld {
  font-family: 'VT323', monospace;
  width: 350px;
  height: 50px;
  border-radius: 10px;
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/cb4.jpg);
  background-size: contain;
  background-repeat: space;
  background-color: black;
  background-position: center;
  font-size: 2rem;
  color: #FF01FB;
  text-shadow: 2px 2px 2px black;

}
.buttonGo {
  font-family: 'VT323', monospace;
  width: 75px;
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
}
.ausgabeText {
  font-family: 'Special Elite', cursive;
  width: 350px;
  height: 50px;
  color: green;
  background-color: rgba(000, 0, 0, 0.7);
  vertical-align: middle;
}
.ausgabeText > p {
background-color: rgb(56, 183, 200, 0.1);
}
.ausgabeRichtigeStelle {
  font-family: 'Special Elite', cursive;
  width: 75px;
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/cb3.jpg);
  background-size: cover;
  color: white;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}
.ausgabeRichtigeZahl {
  font-family: 'Special Elite', cursive;
  width: 75px;
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/cb3.jpg);
  background-size: cover;
  color: white;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}
.versuch {
  font-family: 'Special Elite', cursive;
  width: 75px;
  background-image: url(../../../../../seiten/games/codebreaker/codebreakerIMG/cb3.jpg);
  background-size: cover;
  color: white;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}

.ausgabeTextUserCode {
  font-family: 'Special Elite', cursive;
  width: 200px;
  height: 70px;
  color: #00E0D1;
  background-color: rgb(000,000,000, 0.5);
  vertical-align: middle;
}

.ausgabeTextUserCode > p {
  background-color: rgba(000, 0, 0, 0.7);
  font-size: 1.6rem;
}
.ausgabeUserCode {
  font-family: 'VT323', monospace;
  width: 120px;
  color: #A3E1B5;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 3px;
}

.ausgabeTextRichtigerCode {
  font-family: 'Special Elite', cursive;
  width: 200px;
  height: 70px;
  color: #00E0D1;
  background-color: rgb(000,000,000, 0.5);
  vertical-align: middle;
}

.ausgabeTextRichtigerCode > p {
  background-color: rgba(000, 0, 0, 0.7);
  font-size: 1.2rem;
}

.ausgabeRichtigerCode {
  font-family: 'VT323', monospace;
  width: 120px;
  color: #fe5f55;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1px;
}

.niederlage {
font-family: 'Special Elite', cursive;
background-color: rgba(234, 53, 70, 0.7);
text-align: center;
font-size: 1.3rem;
font-weight: bold;
margin-top: 30px;
margin-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
}

.neustartClass2 {
  background-color: white;
}

.nButton {
font-family: 'VT323', monospace;
background-color: black;
width: 300px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: green;
cursor: pointer;
}

.textContainer {
  text-align: center;
}

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




@media (max-width: 1280px) {
  .zeile1 { font-size: 1.1rem;}
  .zeile2 { font-size: 1.1rem;}
  .zeile3 { font-size: 1.1rem;}
  .zeile4 { font-size: 1.1rem;}
}
@media (max-width: 800px) {
  .zeile1 { font-size: 1.1rem;}
  .zeile2 { font-size: 1.1rem;}
  .zeile3 { font-size: 1.1rem;}
  .zeile4 { font-size: 1.1rem;}
  .einleitungsText {margin-left: 40px;}
  .codeBreakerImg {background-position: right}
  .nButton {font-size: 1.6rem;}
}
@media (max-width: 768px) {
.codeBreakerImg {background-position: right; }
.einleitungsText {font-size: 1rem; margin-left: 50px;}
.zeile6 {font-size: 2rem;}
}
@media (max-width: 480px) {
.codeBreakerImg {background-position: center;}
.einleitungsText {font-size: 1rem; margin-left: 0px;}
body {background-size: contain; background-position: bottom;}
.iweg {font-size: 2rem;}
}
@media (max-width: 420px) {
.codeBreakerImg {background-position: center; height: 50px;}
.einleitungsText {font-size: 0.6rem; margin-left: 0px;}
.eingabefeld {width: 200px; height: 30px; font-size: 1.5rem; background-size: cover;}
body {background-size: contain; background-position: center;}
.buttonGo {width: 50px; height: 30px; font-size: 1rem; margin: 0px, padding: 0px;}
.ausgabeText > p {font-size: 0.8rem;}
.ausgabeRichtigeStelle {font-size: 1rem;}
.ausgabeRichtigeZahl {font-size: 1rem;}
.versuch {font-size: 1rem;}
.ausgabeUserCodeP { margin: 0px;}
.ausgabeTextUserCode {height: 40px;}
.ausgabeTextUserCode > p {font-size: 1rem; padding: 0px;}
.ausgabeUserCode {font-size: 1rem; height: 30px;}
.ausgabeTextRichtigerCode > p {font-size: 0.8rem;}
.ausgabeRichtigerCode {font-size: 1rem; padding: 0px;}
.nButton {height: 50px; font-size: 1.5rem;}
.niederlage {font-size: 0.8rem;}

.zeile1 { font-size: 0.6rem;}
.zeile2 { font-size: 0.6rem;}
.zeile3 { font-size: 0.6rem;}
.zeile4 { font-size: 0.6rem;}
}
/*



/* === WIchtige Breakponts

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

*/