@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');



html,body {
	min-height:100vh;
	height:auto;
	padding:0px;
        margin:0 auto;
        font-size:16px;
        //font-family: 'Montserrat', sans-serif;
        font-family: 'Tahoma', sans-serif;

}

body {
        position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
        scroll-behavior: smooth;

        min-height: 100vh; 
        min-height: calc(var(--vh, 1vh) * 100);

}





[begin-lesson] {
        display:block;
	background-color:blue;
	color:white;
	padding:10px;
	margin:20px 0px 0px 0px;
	width:200px;
	text-align:center;
	cursor:pointer;
	border-radius:5px;
}

[lesson-param][err] {
	background:red;
}

[lesson] {
        position:relative;
	width:100%;
	margin:50px 0px 0px 0px;
}



[lesson-go] {
	font-size:160px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	
}

[lesson-go] > span {
	font-weight:500;
	display:block;
	padding:0px 10px 0px 10px;
}

[lesson-go] > span[num1], [lesson-go] > span[num2] {
	letter-spacing:5px;
}



[lesson-go] input[type="number"] {
	width:300px;
	padding:0px 10px 0px 10px;
}

[lesson-go] [butt] {
	flex:0 0 100%;
        display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;



}

[lesson-go] [butt] > a {
	display:block;
	background-color:blue;
	color:white;
	padding:10px;
	margin:20px 0px 0px 0px;
	width:200px;
	text-align:center;
	cursor:pointer;
	font-size:16px;
	border-radius:5px;
}


[lesson-go] [butt] > a[grey] {
	background-color:#e8e8e8;
}


@media screen and (max-width: 1200px) {

[lesson] {
	margin:10px 0px 0px 0px;
}


[lesson-go] {
	margin:50px 0px 0px 0px;
	font-size:30px;
        font-size:calc( (100vw - 320px)/(1200 - 320) * (160 - 30) + 30px);
}

[lesson-go] > span {
    padding: 0px calc( (100vw - 320px)/(1200 - 320) * (10 - 2) + 2px) 0px calc( (100vw - 320px)/(1200 - 320) * (10 - 2) + 2px);
}


[lesson-go] input[type="number"] {
	width:calc( (100vw - 320px)/(1200 - 320) * (300 - 80) + 80px);
	padding:0px 10px 0px 10px;
}

}




[timer] {
        position:absolute;
	right:0px;
        display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	opacity:0;
	transition:opacity 1s ease-in-out;

}

[timer][show] {
	opacity:1;
}


[timer] [hide] {
	display:none;

}

[timer] > span {
	display:block;
	flex:0 0 40px;
	font-size:25px;
	font-weight:900;
	color:blue;
        text-align:center;
}

[timer] > span:nth-of-type(4) {
	flex:0 0 15px;
}



@media screen and (max-width: 1200px) {


[timer] > span {
	font-size:16px;
        font-size:calc( (100vw - 320px)/(1200 - 320) * (25 - 16) + 16px);
	flex:0 0 calc( (100vw - 320px)/(1200 - 320) * (40 - 22) + 22px);
}


}








[result] {
        background-color:white;
	transition:background-color 0.5s ease-in-out;
}

[result][err] {
	background-color:#fac6c6;
}


[lesson-result] {
	flex:0 0 700px;
	margin:50px 0px 0px 0px;
	display:flex;
        justify-content:flex:start;
	align-items:flex-start;
	flex-wrap:wrap;

}

[lr-title] {
	font-size:16px;
	flex:0 0 100%;
	text-align:center;
	font-weight:bold;
	padding:20px 0px 20px 0px;

}

[rt] {
        display:block;
	flex:0 0 calc((100% - 5px*6)/3);
	font-size:20px;
	background-color:#d7f9d4;
	padding:10px 10px 10px 10px;
	border-radius:5px;
	margin:5px 5px 5px 5px;
}

[rt][err] {
	background-color:#f9d4d4;
}

[num] {
	font-size:12px;
	padding:0px 16px 0px 0px;
}

@media screen and (max-width: 720px) {

[num] {
	padding:0px calc( (100vw - 530px)/(720 - 530) * (16 - 4) + 4px) 0px 0px;
}


[rt] {
	font-size:calc( (100vw - 320px)/(720 - 320) * (20 - 14) + 14px);
	padding:10px calc( (100vw - 320px)/(720 - 320) * (10 - 4) + 4px) 10px calc( (100vw - 320px)/(720 - 320) * (10 - 4) + 4px);
}


}


[menu] {
        position:absolute;

	left:calc((100% - 300px)/2);
	top:200px;
	z-index:100;
	width:300px;

	background-color:#e8e8e8;
	border-radius:10px;

        display:flex;
        justify-content:flex:start;
	align-items:flex-start;
	flex-wrap:wrap;

	padding:20px 20px 20px 20px;
}

[menu]> span {
	display:block;
	flex:0 0 100%;
	margin:10px 0px 10px 0px;
}

[menu]> span:nth-of-type(1) {
	font-size:18px;
}

[menu][hide] {
	display:none;
}

[title-date="1"] {
	flex:0 0 100%;
	text-align:left;
	margin:0px 0px 20px 0px;
	font-weight:bold;
	font-size:12px;
}

[title-date="2"] {
	flex:0 0 100%;
	text-align:left;
	margin:0px 0px 20px 0px;
	font-weight:bold;
	font-size:12px;
}




@media screen and (max-width: 1200px) {


/*[timer] > span {
	font-size:16px;
        font-size:calc( (100vw - 320px)/(1200 - 320) * (25 - 16) + 16px);
	flex:0 0 calc( (100vw - 320px)/(1200 - 320) * (40 - 22) + 22px);
}*/


[lesson-result] {
	//flex:0 0 100%;
	margin:50px 0px 0px 0px;
        margin:calc( (100vw - 320px)/(1200 - 320) * (50 - 8) + 8px) 0px 0px 0px;
        
}

[title-date="1"] {
    text-align: center;
    margin: 0px 0px calc( (100vw - 320px)/(1200 - 320) * (20 - 8) + 8px) 0px;
}

[title-date="2"] {
    text-align: center;
    margin: 0px 0px calc( (100vw - 320px)/(1200 - 320) * (20 - 16) + 16px) 0px;
}


}

@media screen and (max-width: 720px) {

[lesson-result] {
	flex:0 0 100%;
}


}

@media screen and (max-width: 530px) {


 [rt] {
	flex:0 0 calc((100% - 5px*4)/2);
}


[num] {
	padding:0px calc( (100vw - 320px)/(530 - 320) * (20 - 4) + 4px) 0px 0px;
}

}