@import url("reset.css");
@import url("overlay.css");
@import url("correct_answer.css");
@import url("authors.css");
@import url("download.css");
@import url("learning.css");
@import url("menu.css");
@import url("auto_dialog.css");

body
{
	background-color:#20252d; font-family: 'Fira Mono', monospace; overflow: hidden;

}

A:link {text-decoration: none} 

a.active:link    {color:#00bfaa; text-decoration:underline;}
a.active:visited {color:#00bfaa}
a.active:hover   {color:#00d7c0}

.mainPageText
{
	font-family: 'Fira Mono', monospace;
	font-weight: normal;
	font-size: 16px;
	line-height:22px;
	margin:0;
	padding:0;
}
@media all and (max-height: 675px) {.mainPageText {font-size: 14px}}
@media all and (max-width:  900px) {.mainPageText {font-size: 14px}}

.bigLogo
{
	text-align:center;
	display:block;
	height:150px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
@media all and (max-width:  600px) {.bigLogo {height:100px}}
@media all and (max-width:  375px) {.bigLogo {display:none}}
@media all and (max-height: 850px) {.bigLogo {height:100px}}
@media all and (max-height: 750px) {.bigLogo {height:75px}}
@media all and (max-height: 700px) {.bigLogo {display:none}}

@media all and (min-height: 700px)                              {.small_logo_main {display:none}}
@media all and (max-height: 700px), all and (min-width:  900px) {.small_logo_main {display:block}}


.contentContainer
{
	position:relative;
	margin-top:125px;
	margin-left:0px;
	margin-right:0px;
	display:block;
	text-align:left;
	left:50%;
	transform: translate(-50%, 0);
	width:85%;
}
@media all and (max-width:  900px) {.contentContainer {width:90%;}}

.subContainer
{
	display:inline-block; 
	position:relative;
	border:1px solid #555; 
	border-radius:5px;
	padding:25px;
	margin:1%;
	vertical-align:top;
	width:39%;
	text-align:left;
}
@media all and (max-width: 920px) {.subContainer {width:80%;}}

.alwaysCenter
{
	text-align:center; 
}

.header
{
	font-family: 'Fira Mono', monospace; overflow:hidden;
	font-size: 46px;
	color:#FFF;
	font-weight: normal;
}
@media all and (max-width: 900px) {.header {text-align:center}}

.main_text
{
	font-family: 'Fira Mono', monospace;
	font-size: 16px;
	line-height:22px;
}
@media all and (max-height: 675px) {.main_text {font-size: 14px}}
@media all and (max-width: 900px)  {.main_text {font-size: 14px}}

.main_text_small
{
	font-family: 'Fira Mono', monospace;
	font-size: 14px;
	line-height:22px;
}

.color_white  {color: #FFFFFF}
.color_green  {color: #00bfaa}
.bg_color_red {background-color: #560008}
.gray         {color: #4f555f}

.dialog
{
	position:absolute; 
	left:50%; 
	width:60%;
	transform: translate(-50%, 0);
}
@media all and (max-width: 900px) {.dialog{width:90%;}}

.dialog_show
{
	-webkit-animation:  dialog_show 1.0s normal forwards ease-in-out; 
	-moz-animation:     dialog_show 1.0s normal forwards ease-in-out;
	-o-animation:       dialog_show 1.0s normal forwards ease-in-out;
}
@keyframes dialog_show {from {bottom: 40%; opacity: 0} to {bottom: 45%; opacity: 1}}

@media all and (max-height: 700px)
{
	@keyframes dialog_show {from {bottom: 40%; opacity: 0} to {bottom: 50%; opacity: 1}}
}

.about
{
	text-align:center; 
	bottom:50%;
}

.about_hide
{
  -webkit-animation:  about_hide 1.0s normal forwards ease-in-out; 
  -moz-animation:     about_hide 1.0s normal forwards ease-in-out;
  -o-animation:       about_hide 1.0s normal forwards ease-in-out;
}

@keyframes about_hide
{
	from {bottom: 50%; opacity: 1} to {bottom: 100%; opacity: 0}
}

@media all and (max-height: 700px)
{
	.about {bottom:55%}
	@keyframes about_hide {from {bottom: 55%; opacity: 1} to {bottom: 100%; opacity: 0}}
}
@media all and (max-height: 550px)
{
	.about {bottom:50%}
	@keyframes about_hide {from {bottom: 50%; opacity: 1} to {bottom: 100%; opacity: 0}}
}


.answer
{
	text-align:center; color:#FFFFFF; margin-top:5px
}

.last_answer
{
	font-size:32px;
}
@media all and (max-height: 675px)
{
	.last_answer {font-size:22px;}
}
.last_answer_small
{
	font-size:20px;
}

.request
{
	text-align:center; 
	color:#00bfaa
}

.main_input
{ 
	height:50px; 
	border: none; 
	border-bottom: 2px solid #999; 
	appearance: none; 
	box-shadow: none; 
	background-color:rgba(0,0,0,0); 
	color:#FFFFFF; 
	text-align:center; 
	outline:none;
	font-size:32px;
	font-family: 'Fira Mono', monospace;
	
	-webkit-animation:  main_input_show 1.0s normal forwards ease-in-out; 
	-moz-animation:     main_input_show 1.0s normal forwards ease-in-out;
	-o-animation:       main_input_show 1.0s normal forwards ease-in-out;
}
@media all and (max-width: 900px) {.main_input {font-size:24px;}}
@media all and (max-width: 800px) {.main_input {font-size:20px;}}
@media all and (max-width: 700px) {.main_input {font-size:18px;}}
@media all and (max-width: 600px) {.main_input {font-size:16px;}}

@keyframes main_input_show
{
	from {width:0%;opacity:0} to {width:60%;opacity:1}
}

.userName
{ 
	font-size:14px;
	color:#00bfaa;
	margin-top:5px; 
	margin-bottom:-25px;
	width:60%; 
	position:relative;
	left:50%; 
	transform: translate(-50%, 0);
	text-align:left;
	white-space: nowrap;
	
	-webkit-animation:  userNameShow 1.0s normal forwards ease-in-out; 
	-moz-animation:     userNameShow 1.0s normal forwards ease-in-out;
	-o-animation:       userNameShow 1.0s normal forwards ease-in-out;
}

@keyframes userNameShow
{
	from {width:0%;opacity:0} to {width:60%;opacity:1}
}
@media all and (max-width:  900px) {.userName {display:none}}

.inputForm
{
	position:absolute;
	top:55%;
	width:100%;
	margin-top:50px; 
	text-align:center;
}
@media all and (max-height: 700px) {.inputForm {top:47%;}}

.patterns_count
{
	color:#4f555f;
	margin-top:50px;	
}

.button {
    width:150px; 
	height:45px;
	margin-top:15px; 
	color:#FFFFFF; 
	background-color:#00bfaa;
	border: none;
	border-radius: 4px; 
	outline:none; 
	font-size:14px;
	font-family: 'Fira Mono',monospace; 
	cursor:pointer;
	
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button_cancel 
{
	background-color:#4f555f;
}

.button:hover:enabled {
    background-color: #00d7c0;    
}

.button_cancel:hover:enabled {
	background-color:#686e79;
}

.button_small {    
	height:25px;
	margin-top:25px; 
	color:#FFFFFF; 
	background-color:#20252d;
	border: 1px #727883 solid;
	border-radius: 4px; 
	outline:none; 
	font-size:12px;
	font-family: 'Fira Mono',monospace; 
	cursor:pointer;
	padding-left:15px;
	padding-right:15px;
	
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button_small:hover:enabled
{
	background-color:#FFFFFF;
	color: #20252d;
}

.button_dislike
{
	padding:0px;
	width:25px;
	border: 1px #e30f31 solid;	
	background-image: url('../img/icoDislike_Red.png');
	background-repeat: no-repeat;
    background-position: 50% 55%;
}

.button_dislike_active
{
	background-color:#e30f31;	
	background-image: url('../img/icoDislike_White.png');	
}

.button_dislike:hover:enabled
{
	background-color:#e30f31;	
	background-image: url('../img/icoDislike_White.png');	
}

.button_dislike_disabled
{
	border-color: #FFFFFF;	
	background-image: url('../img/icoDislike_White.png');
	opacity:0.25
}

.button_like
{
	padding:0px;
	width:25px;
	border: 1px #00bfaa solid;	
	background-image: url('../img/icoLike_Green.png');
	background-repeat: no-repeat;
    background-position: 50% 45%;
}

.button_like_active
{
	background-color:#00bfaa;	
	background-image: url('../img/icoLike_White.png');
}

.button_like_disabled
{
	border-color: #FFFFFF;	
	background-image: url('../img/icoLike_White.png');
	opacity:0.25
}


.button_like:hover:enabled
{
	background-color:#00bfaa;	
	background-image: url('../img/icoLike_White.png');	
}

.blink_answer
{
   animation-name:            blink_answer;
   animation-duration:        1.0s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-direction:       alternate;
   animation-play-state:      running;
}

@keyframes blink_answer 
{
    from {color: #FFFFF;}
    to   {color: #4f555f;}
}

.footer
{
	position:fixed; bottom:5px; text-align:center; display:block; left:50%; transform: translate(-50%, 0); width:100%;
}
@media all and (max-width:  700px) {.footer {display:none}}
@media all and (max-height: 550px) {.footer {display:none}}

.footer_not_fixed
{
	position:relative; bottom:auto; text-align:center; display:block; left:50%; transform: translate(-50%, 0); width:100%; margin-bottom:25px;
}

.right_banner
{
	position:fixed; width:160px; height:600px; left:10px; top:50%; transform: translate(0, -50%);
	background-color:#262c37;
}

.top_banner
{
	position:relative; width:90%; height:90px; display:inline-block;
	background-color:#262c37;
	margin-bottom:35px;
}

.bottom_small_banner
{
	position:absolute;
	width:70%;
	height:90px;
	display:block;
	background-color:#262c37;
	left:50%;
	bottom:7%;
	transform: translate(-50%, 0);
}