@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
}
  
.bd {
	font-size: 16px;
	background-image: url("../image/alfavitRuGray20.png");
/*		background:var(--clrbg);
		background: #cdb2a4;*/
}
  
.wrapper {
/*	position: relative; /* Чтобы абсолютный элемент внутри позиционировался относительно этого */
	margin: auto;
	overflow: hidden;  
	height: 100%;
  /*  border: solid 2px;*/
	text-align: center;
	font-size: 1em;
	color: #61606c;
}
  
.nameGame {
	font-size: 1.4em;
	letter-spacing: 0.25em; /*расстояние между символами*/
	color: #cdb2a4;
	text-shadow: #fff -1px -1px 0, #333 1px 1px 0;
	margin-top: 0.2em;
}
  
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.1em;		
	padding-left: 0.4em;
	padding-right: 0.4em;
	padding-bottom: 0.5em;
	color: var(--clrtxtheader);
	font-size: 1em;
	font-weight: 700;
	text-shadow: var(--clrshadow) 1px 1px 0, var(--clrshadow) 2px 2px 0, var(--clrshadow) 3px 3px 0, 
	var(--clrshadow) 4px 4px 0, var(--clrshadow) 5px 5px 0;
}
    
.header-left {
	width: 40%;
}
  
.header-right {
	width: 48%;
}
    
.score-text {
	width: 50%;
	text-align: left; 
	float: left;
}
  
.score-number {
	width: 50%;
	text-align: right; 
	float: left;
}
  
.userprogress-text {
	width: 50%;
	text-align: left; 
	float: left;
}
  
.progress {
	width: 50%;
	text-align: right; 
	float: left;
}

.cLbl {
	display: flex;
	justify-content: space-between;

	border: 1px solid var(--clrborder);
	border-radius: 0.3em;		
	background-color: var(--clrbglbl);
	box-shadow: 5px 5px 5px var(--clrshadow);
	color: var(--clrtxtlbl);
		
	margin: 0 0.4em 0.5em 0.4em;		
/*	margin-bottom: 0.5em;*/
	padding-bottom: 0.1em;
	padding-top: 0.1em;
	text-align: center;   
	font-size: 1.0em;
/*	font-size: .9em;*/
	font-weight: 700;
	vertical-align: middle;  /*..по вертикали */
}
    
.cLblLeft {
	width: 85%;
}
  
.cLblRight {
	width: 15%;		
	display: flex;
	align-items: center;
	justify-content: center;
}

#sign-out {
	padding: 0em;
	margin: 0em;
	cursor: pointer; /* необязательно*/
}
	
	
.unselectable {  
	-webkit-touch-callout: none; /* iOS Safari */  
	-webkit-user-select: none;   /* Chrome/Safari/Opera */  
	-khtml-user-select: none;    /* Konqueror */  
	-moz-user-select: none;      /* Firefox */  
	-ms-user-select: none;       /* Internet Explorer/Edge */  
	user-select: none;           /* Non-prefixed version, currently	not supported by any browser */
}	
	
#canvas {
	background-color: var(--clrbgcnv);
/*    box-shadow: 5px 5px 5px rgba(122,122,122,0.5);*/
	box-shadow: 5px 5px 5px var(--clrshadow);
}	
    
.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0.5em;
  /*		color: rgb(229, 159, 48);*/
	font-size: 1em;
	font-weight: 700;
}
    
#info {
	width: 50%;
	text-align: left; 
	float: left;
	color: #0b7fab;
}
    
#hlp {
	cursor: pointer;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 0.9em;
	color: var(--clrtxthlp);
	text-shadow: var(--clrshadow) 1px 1px 0, var(--clrshadow) 2px 2px 0, var(--clrshadow) 3px 3px 0, 
	var(--clrshadow) 4px 4px 0, var(--clrshadow) 5px 5px 0;
}
  
#button {
	width: 60%;
	text-align: center; 
	float: left;
	border: none;
	border-radius: 0.4em;
	padding: 0.5em;
/*    background: #e59f30;*/
	background: var(--clrbgbtn);
/*    box-shadow: 5px 5px 5px rgba(122,122,122,0.5);*/
	box-shadow: 5px 5px 5px var(--clrshadow);
		
	cursor: pointer;
	text-transform: uppercase;
	font-size: .8em;
	font-weight: bold;
	color: var(--clrtxtbtn);
	margin: 10px;
	float: right;
}
    
#button:active {
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
}
 
.b80 {
	font-size: 71px;
}
  
.b76 {
	font-size: 67px;
}
  
.b72 {
	font-size: 64px;
}
  
.b68 {
	font-size: 60px;
}
  
.b64 {
	font-size: 56px;
}
  
.b60 {
	font-size: 53px;
}
  
.b56 {
	font-size: 49px;
}
  
.b52 {
	font-size: 46px;
}
  
.b48 {
	font-size: 42px;
}
  
.b44 {
    font-size: 39px;
}
  
.b40 {
	font-size: 35px;
}
  
.b36 {
	font-size: 32px;
}
  
.b32 {
	font-size: 28px;
}
  
.b28 {
	font-size: 24px;
}
  
.b24 {
	font-size: 21px;
}
  
.b20 {
	font-size: 17px;
}
  
.b16 {
	font-size: 14px;
}
  
.b12 {
	font-size: 10px;
}
  
.b8 {
	font-size: 7px;
}	
  
.workInfo {
	display: none;
/*    display: block;*/
	text-align: left;
	font-size: 1em;
}

#story {
	width: 95%;
	margin: auto;	/*поля*/
	padding: 0.2em 0.8em;	/*отступы сверху(снизу), слева(справа)*/
	background-color: var(--clrbgarea);
	color: var(--clrtxtarea);
		
	font-size: 0.9em;
	font-weight: 700;
	text-align: left;		
/*    line-height: 1.0;*/
	border-radius: 0.5em;
	border: 1px solid var(--clrborder);		
/*   box-shadow: 5px 5px 5px rgba(122,122,122,0.5);*/
	box-shadow: 5px 5px 5px var(--clrshadow);
		
	margin-top: 0.5em;
		
	letter-spacing: 0.1em;		
	resize: none;	/*фиксированный размер текстовой области*/
	overflow: auto; /*скролл-бар выведется в случае необходимости*/
}

#story:focus {
	outline:0;/*убирает рамку в input */
}

#modalId {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto;
	background-color: rgba(0,0,0,0.6);
}
    
.modalClass {
	margin: 1% auto;
}
      
.modalContent {
/*    background-color: white;*/
	margin: 0 auto;
	width: 95%;
	border-radius: 1em;
	background: #0b7fab;
	color: #e4e4e7; /*gray 90%		*/		
	font-size: 0.8em;
/*    font-weight: bold;*/
	padding: 0.2em 0.8em;
	text-align: center; 
}	
  
.closeModalWindow {
	color: #e4e4e7; /*gray 90%		*/	
	float: right;
	cursor: pointer;
	font-size: 2em;
}	
	
.titleImage {
	background-size: cover;
		width: 100%;
/*	border: 2px solid green;*/
	resize: both;
}
	
.modalPanel {
	text-align: left;
	text-indent: 1em; /* Отступ первой строки в пикселах */
	margin-bottom: 0px; /*Отступ между заголовком и текстом */
	margin-top: 0px;
	font-size: 1.0em;
}

.listModalPanel {
	text-align: left;
	list-style: none;
	margin-left: 1em;
	margin-bottom: 0px;
	margin-top: 1em;
	font-size: 1.0em;
}

.noanima {
	/*space*/
	-webkit-animation-name: aitf2; /*имя @keyframes*/
	animation-name: aitf2;
}

	.anima {
/*Клип Фоновое изображение*/

	background: url(../image/animated-text-fill5.png) repeat-x; /*фоновое изображения повторяется по y*/
	-webkit-background-clip: text; /*Фон закрашивается внутри (обрезается) текста переднего плана*/
	background-clip: text;

/*Анимация фонового изображения*/ 
	-webkit-text-fill-color: transparent;	/*transparent — цвет текста прозрачный*/
/*		-webkit-animation: aitf2 50s linear infinite;*/ /*name, duration, timing-function, iteration-count*/
	-webkit-animation-name: aitf2; /*имя @keyframes*/
	animation-name: aitf2;

	-webkit-animation-duration: 60s; /*время одного цикла анимации*/
	animation-duration: 60s;

/*	-webkit-animation-iteration-count: 1;*/	/*количество повторений анимации*/
	-webkit-animation-iteration-count: infinite;	/*бесконечное повторение анимации*/
	animation-iteration-count: infinite;	

	-webkit-animation-timing-function: linear;	/*ускорение анимации*/
	animation-timing-function: linear;
			
/*Активируйте аппаратное ускорение для более плавной анимации.*/
/*		-webkit-transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;*/
}
	
/*Анимация фонового изображения*/
@-webkit-keyframes aitf2 {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}	
    
@keyframes aitf2 {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}	

#footer {
	position: absolute;
	width:100%;
	display: flex;
	justify-content: space-between;
}
		
#btnToggle {
	text-align: left;
	width: 10%;
	padding-left: 0.5em;
	display: flex;	/*выравнивание по вертикали картинки*/
	align-items: center;	/*выравнивание по вертикали svg*/
	cursor: pointer;
}

#author {
	width: 90%;
	padding: 0 0.5em 0 0;
	text-align: right;
	color: #61606c;
	font-size: 1.0em;
} 
		
#workScr {
	display: block;			
}
		
#fullScr {
	display: none;
}
		
.imageForScreen {
	fill: var(--footerText);
	width: 1.0em;
}	

.modal-mask {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background: rgba(0,0,0,0.6) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLWhvdXJnbGFzcyI+DQoJPHJlY3QgeD0iMCIgeT0iMCIgZmlsbD0ibm9uZSIgY2xhc3M9ImJrIj48L3JlY3Q+DQoJPGc+DQoJCTxwYXRoIGZpbGw9ICJ3aGl0ZSIgIHN0cm9rZT0iZ3JheSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik01OC40LDUxLjdjLTAuOS0wLjktMS40LTItMS40LTIuM3MwLjUtMC40LDEuNC0xLjQgQzcwLjgsNDMuOCw3OS44LDMwLjUsODAsMTUuNUg3MEgzMEgyMGMwLjIsMTUsOS4yLDI4LjEsMjEuNiwzMi4zYzAuOSwwLjksMS40LDEuMiwxLjQsMS41cy0wLjUsMS42LTEuNCwyLjUgQzI5LjIsNTYuMSwyMC4yLDY5LjUsMjAsODUuNWgxMGg0MGgxMEM3OS44LDY5LjUsNzAuOCw1NS45LDU4LjQsNTEuN3oiIGNsYXNzPSJnbGFzcyI+PC9wYXRoPg0KCQkNCgkJPGNsaXBQYXRoIGlkPSJ1aWwtaG91cmdsYXNzLWNsaXAxIj4NCgkJCTxyZWN0IHg9IjE1IiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjI1IiBjbGFzcz0iY2xpcCI+DQoJCQkJPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBmcm9tPSIyNSIgdG89IjAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2bGF1ZXM9IjI1OzA7MCIga2V5VGltZXM9IjA7MC41OzEiPjwvYW5pbWF0ZT4NCgkJCQk8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBmcm9tPSIyMCIgdG89IjQ1IiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmxhdWVzPSIyMDs0NTs0NSIga2V5VGltZXM9IjA7MC41OzEiPjwvYW5pbWF0ZT4NCgkJCTwvcmVjdD4NCgkJPC9jbGlwUGF0aD4NCgkJDQoJCTxjbGlwUGF0aCBpZD0idWlsLWhvdXJnbGFzcy1jbGlwMiI+DQoJCQk8cmVjdCB4PSIxNSIgeT0iNTUiIHdpZHRoPSI3MCIgaGVpZ2h0PSIyNSIgY2xhc3M9ImNsaXAiPg0KCQkJCTxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgZnJvbT0iMCIgdG89IjI1IiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmxhdWVzPSIwOzI1OzI1IiBrZXlUaW1lcz0iMDswLjU7MSI+PC9hbmltYXRlPg0KCQkJCTxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGZyb209IjgwIiB0bz0iNTUiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2bGF1ZXM9IjgwOzU1OzU1IiBrZXlUaW1lcz0iMDswLjU7MSI+PC9hbmltYXRlPg0KCQkJPC9yZWN0Pg0KCQk8L2NsaXBQYXRoPg0KCQkNCgkJPHBhdGggZD0iTTI5LDIzYzMuMSwxMS40LDExLjMsMTkuNSwyMSwxOS41UzY3LjksMzQuNCw3MSwyM0gyOXoiIGNsaXAtcGF0aD0idXJsKCN1aWwtaG91cmdsYXNzLWNsaXAxKSIgZmlsbD0iI2VjOWE1ZCIgY2xhc3M9InNhbmQiPjwvcGF0aD4NCgkJPHBhdGggZD0iTTcxLjYsNzhjLTMtMTEuNi0xMS41LTIwLTIxLjUtMjBzLTE4LjUsOC40LTIxLjUsMjBINzEuNnoiIGNsaXAtcGF0aD0idXJsKCN1aWwtaG91cmdsYXNzLWNsaXAyKSIgZmlsbD0iI2VjOWE1ZCIgY2xhc3M9InNhbmQiPjwvcGF0aD4NCgkJDQoJCTxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDUwIDUwIiB0bz0iMTgwIDUwIDUwIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIgdmFsdWVzPSIwIDUwIDUwOzAgNTAgNTA7MTgwIDUwIDUwIiBrZXlUaW1lcz0iMDswLjc7MSI+PC9hbmltYXRlVHJhbnNmb3JtPg0KCTwvZz4NCjwvc3ZnPg==') no-repeat  50% 50%;
	
	background-size: 3em auto;

}

.modal-mask.show {
  display: block;
}

.modal-mask.hide {
  display: none;
}