/* Import Google font - Poppins */
	@import url('https://fonts.googleapis.com/css2?family=Libertinus+Keyboard&display=swap');

	*{ margin: 0; padding: 0; box-sizing: border-box; }

	body,input {
		font-family:'Mouse Memoirs';
		font-weight: normal;
		font-size:20px;
		color: #ffffff;
	}
	
	body {
		background: url(../images/bg_1920.jpg) no-repeat center center fixed #000000;
		  -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
		text-align: center;
		 letter-spacing: 0.1em;


	  width: 100vw;
	  height: 100vh;

	  display: flex;
	  justify-content: center;
	  align-items: center;

	  overflow-x: hidden;
	  background-color: rgb(0,0,0);

	  transition: all 1s;
	  /*font-family: "Playwrite IN", serif;
	  font-optical-sizing: auto;*/

	}

.grid { margin:0px; padding: 0px 0px 0px 0px; width:100%; min-width: 320px; min-height:100%; }
.g1440 { margin:0; max-width:1440px; width:100%; }
.row { width:100%; margin:0 auto; }
.c1 { width:8.33333333%; }
	.c2 { width:16.66666666%; }
	.c3 { width:25.0%; }
	.c4 { width:33.33333333%; }
	.c5 { width:41.66666666%; }
	.c6 { width:50.0%; }
	.c7 { width:58.33333333%; }
	.c8 { width:66.66666666%; }
	.c9 { width:75.0%; }
	.c10 { width:83.33333333%; }
	.c11 { width:91.66666666%; }
	.c12 { width:100%; min-height:1px; float:left; position:relative; }
	.c1-5 { width:20%; }
	.c1-8 { width:12.5%; }
	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c1-5,.c1-8 { min-height:1px; float:left; padding-left:0px; padding-right:0px; position:relative; }
	.c1.first,.c2.first,.c3.first,.c4.first,.c5.first,.c6.first,.c7.first,.c8.first,.c9.first,.c10.first,.c11.first,.c1-5.first,.c1-8.first { padding-left: 0; position:relative; }
	.c1.last,.c2.last,.c3.last,.c4.last,.c5.last,.c6.last,.c7.last,.c8.last,.c9.last,.c10.last,.c11.last,.c1-5.last,.c1-8.last { padding-right: 0; position:relative; }
	.demo { background-color: aqua; }
	.centered { float: none; margin: auto; }

	a,a:link,a:active,a:visited,a:hover { color:#0000ff; text-decoration:none; }

	._tt img { width: 100%; height: auto; max-width: 400px; }
	._inst { width: 100%; text-align: center; }
	._inst h1 { width: 100%; text-align: center; font-size: 32px; line-height: 26px; font-weight: 500; line-height:1.2em; letter-spacing: 0.03em; color:#ffd800; text-shadow: -1px -1px 0 #cb0000, 1px -1px 0 #cb0000, -1px 1px 0 #cb0000, 1px 1px 0 #cb0000, -2px 0px 0 #cb0000, 2px 0px 0 #cb0000, 0px -2px 0 #cb0000, 0px 2px 0 #cb0000; }
	._inst p { width: 100%; text-align: center; font-size: 26px; line-height: 30px; color: #000000; text-shadow: 1px 1px 6px #ffffff;}

	button { margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; width: 100%; max-width: 400px; text-align: center; font-family:'Mouse Memoirs'; font-weight: 500; font-size: 24px; letter-spacing: 0.05em; line-height: 24px; color: #ffd800; background-color: #cb0000; border: 2px solid #ffd800; border-radius:10px; cursor: pointer; }
	button:hover { color: #cb0000; background-color: #ffd800; border: 2px solid #cb0000; }

	#div_config { display: none; position: absolute; top: 0px; left: 0; right: 0; margin: auto; padding:0px 20px 20px 20px;

 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


	width: 100%; max-width: 650px; background: #ffffff; border: 10px solid #262223; border-radius:12px;
	background: url(../images/bg_hojas.png) no-repeat top left #ffffff;

	z-index: 999; }
	#btn_close, #btn_peview { position: absolute; top:20px; right: 20px; width:30px; height:30px; cursor: pointer; }
	#btn_peview { top:60px; height:auto; cursor:help; }
	#btn_close img { width:100%; height:auto; }
	#div_config form p { margin: 30px 0px 20px 0px; width: 100%; text-align: center; font-size: 20px; line-height: 20px; color: #ffffff; text-shadow: 1px 1px 6px #000000; }

	#ok_play { position: absolute; top:0px; left: 0; right: 0; margin: auto; padding: 20px; width: 100%; max-width: 650px; border: 6px solid rgba(255,255,255,0.5); border-radius:10px; z-index: 999;
		text-align: center; color: #ffffff; font-optical-sizing: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  
	background: url(../images/bg_1920.jpg) no-repeat center center fixed #000000;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}


















	._error { display: none; position:fixed; margin: 0px; padding: 0px; width: 100%; height: 100%; min-width: 320px; background-color: rgba(1,2,14,0.9); z-index:999998; overflow: hidden; cursor: pointer; }
	.alert { position: absolute;

top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

	margin:auto; 
	
	
	padding:20px; width: 100%; min-height:150px;
	color:#ffffff;

font-size: 30px;
	text-align: center;  

	background: url(../images/btn-bg.jpg) center center #000000;
	z-index: 9999;
		 box-shadow: 0 10px 20px rgba(0,0,0,0.08);  } 
		 
		 
		 
.alert span {font-family: "Libertinus Keyboard";
  font-size: 50px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
  /*margin-right: -24px;*/
  word-break: break-all;
  text-transform: uppercase;
  color: green;
  }
  
  .alert span b { 
	  font-family: "Libertinus Keyboard";
	  font-size: 50px;
	  font-weight: 500;
	  text-align: center;
	  letter-spacing: 1px;
	  /*margin-right: -24px;*/
	  word-break: break-all;
	  text-transform: uppercase;
	  color: red;
  }






.container{
	display: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.container h2{
  font-size: 40px;
  font-weight: 500;
  padding: 0px 0px 20px 0px;
  text-align: center;
  color: #2b5178;
  font-family:'Mouse Memoirs';
  text-shadow: 0 0 4px #ffffff, 0 0 8px #8E8C8C;
}

.container p{
  color: #000000;
  font-size: 20px;
}


.container .content{
  /*margin: 25px 20px 35px;*/
}
.content .word{
  user-select: none;
  font-family: "Libertinus Keyboard";
  font-size: 50px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
  /*margin-right: -24px;*/
  word-break: break-all;
  text-transform: uppercase;
  color: #dfa94b;
  text-shadow: 0px 0px 10px #ffffff;
}
.content .details{
  margin: 25px 0 20px;
}
.details p{
  font-size: 18px;
  margin-bottom: 0px;
}
.details p span{
	font-size: 24px;
  font-weight: 500;
  color: #2b5178;
}

.content input{
  width: 100%;
  height: 50px;
  outline: none;
  padding: 10px 10px;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 5px;
  border: 3px solid #000000;
  background: url(../images/btn-bg.jpg) center center #000000;
}
.content input:focus{
  box-shadow: 0px 2px 4px rgba(0,0,0,0.08);
}
.content input::placeholder{
  color: #fdfdfd;
}
.content input:focus::placeholder{
  color: #bfbfbf;
}
.content .buttons{
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.buttons button{
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 10px;
  font-size: 24px;
  border-radius: 5px;
  width: calc(100% / 2 - 8px);
  transition: all 0.3s ease;
}
.buttons button:active{
  transform: scale(0.97);
}
.buttons .refresh-word{
  background: #6C757D;
}
.buttons .refresh-word:hover{
  background: #5f666d;
}
.buttons .check-word{
  background: #5372F0;
}
.buttons .check-word:hover{
  background: #2c52ed;
}

@media screen and (max-width: 470px) {
  .container h2{
    font-size: 22px;
    padding: 13px 20px;
  }
  .content .word{
    font-size: 30px;
    letter-spacing: 20px;
    margin-right: -20px;
  }
  .container .content{
    margin: 20px 20px 30px;
  }
  .details p{
    font-size: 16px;
    margin-bottom: 8px;
  }
  .content input{
    height: 55px;
    font-size: 17px;
  }
  .buttons button{
    padding: 14px 0;
    font-size: 16px;
    width: calc(100% / 2 - 7px);
  }
}