/* CSS Document */
html, body {	font-family: Open Sans; height: 100%; background-color:#BCD6F5; margin: 0px; padding:0px; font-family: Arial, sans-serif; background: linear-gradient(#98EAFF, #527BAD);}
button:focus {outline:0;}
button{cursor:pointer; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);}


#home{width:360px; margin: auto; text-align:center;}

#start_div{width:260px; height: 100px; margin: auto; background-color:#6FADC8; padding:10px; border-radius:24px; display: flex; }
#start_btn{font-size: 50px; width:260px; height: 100px; margin: auto; border-radius:20px; background: linear-gradient(#BDF2FF, #4D9ACA); border: 0px solid black; box-shadow: 0px 0px 3px black; }

#start_div{width:150px; height: 150px; border-radius:50%; margin: auto; background-color:#6FADC8; padding:10px; display: flex; }
#start_btn{display:block; width:150px; height: 150px; border-radius:50%;}

/* #footer{color: black; text-align:center;	width:100%;	font-size: 13px;	line-height: 1.6;     position: fixed;    bottom: 0; background-color:transparent; padding: 10px 0px;} */
#footer{color: black; text-align:center;	width:100%;	font-size: 13px;	line-height: 1.6;     background-color:transparent; padding: 10px 0px;}
@media only screen and (min-width: 768px)  {#footer{font-size: 17px; position: relative; margin-top:20px;}}

/* ------------------------------------------ Jezyki ------------------------------------------*/
#tryby{width:320px; height:250px; margin: auto; border-bottom: 0px solid green;}
.jezyk{width:110px; font-size:18px; margin:2px 0px; border: 1px solid #3F7A95; padding: 15px 0px; border-radius:5px; background: linear-gradient(white, #CCE3EC);}

#zaawansowany{background-color:#6AADCE; width: 250px; color:black; text-decoration: none; margin:auto; margin-top:25px; font-size:20px; padding:5px;}


#next_div{width:350px; height: 90px; margin: auto; background-color:#6FADC8; padding:5px; border-radius:0px; display: flex;  position:fixed; bottom:0px;}
#next_btn, #prev_btn{font-size: 40px; height: 90px; margin: auto; background: linear-gradient(#BDF2FF, #4D9ACA); border: 1px solid #3F7A95;}
#next_btn{ width:268px;  margin-left:2px;}
#prev_btn{ width:80px;}
@media only screen and (min-width: 768px)  {#next_div{position:relative; background-color:transparent; margin-top:20px;}}

#uklad4, #uklad1{border: 0px solid black; padding:10px; background-color: transparent;}

.tryb{border-radius:10px; padding:px; margin-top:10px; background-color:#DCEBF0; border-width:0px;}

#multi_powrot{background-color:black; color:#BCD6F5; width:100%; height:100px; border-width:0px; position: fixed; bottom: 0; left:0; font-size:30px;}

#multi_lista_odpowiedzi{
	font-size:34px;
	padding:20px;
	background-color:#98EAFF;
}



#gra_multi{
	width:100%; 
	height: 100%;
	display:flex;
	align-items:center;

	}
	
#gra_single{
	width:100%; 
	height: 100%;
	display:flex;
	align-items:center;
	/* background-color:blue; */
	justify-content:center;
	}
	
#single_container{
	width:350px;
}

#single_odpowiedzi{font-size:32px; margin-top:15px;}
#single_lista_odpowiedzi{height:200px; width:330px; overflow-y: scroll; background-color:white; font-size:32px; padding:10px;}
#single_zobacz_odpowiedzi{height:220px; width:350px; background-color:white; font-size:30px; border-width:0px;}
#single_nastepna_runda{width:350px; padding:10px; font-size:40px; margin-top:8px;}

#menu{position:absolute; width:75px; height:75px; left: 0; right: 0; margin-left: auto; margin-right: auto; border-radius:50%;}
#runda{background: linear-gradient(#BCDDEE, #6DA6CD); width:100%; height:100%; border: 2px solid #E7EFF4; font-size: 18px; font-weight:bold; border-radius:50%;}
#multi_odpowiedzi{border-width:0px; border-radius:2px; margin-top:15px; padding:4px;}


.postep{background-color:orange; width:70%; height:14px; border-radius:5px;}

#single_postep{background-color:orange; width:70%; height:20px; border-radius:3px;}
#single_timer{background-color:black; width:330px; height:20px; border-radius:6px; padding:4px; margin-top:98px;}

#top, #bottom, #right, #left {height:78px; width:310px; position:absolute; background-color:#226595; display:flex; justify-content:space-evenly; align-items:center; border-radius:10px 10px 0px 0px;}
#topt, #bottomt, #rightt, #leftt {height:20px; width:150px; position:absolute; background-color:#226595; display:flex; justify-content:left; align-items:center; border-radius:10px 10px 0px 0px; padding:2px 4px 0px 4px;}


#top, #bottom, #topt, #bottomt {left: 0; right: 0; margin-left: auto; margin-right: auto; }


#top{top: 0px; transform: rotate(180deg);}
#topt{top: 78px; transform: rotate(180deg);}

#bottom{bottom: 0px;}
#bottomt{bottom: 78px;}

#right{transform: rotate(270deg);right:-116px;}
#rightt{transform: rotate(270deg);right:10px;}

#left{transform: rotate(90deg);left: -116px;}
#leftt{transform: rotate(90deg);left: 10px;}

.letter, .letter_big {
	background-color:white;
	width: 70px;
	height: 70px;
	float:left;
	/* margin-left:2px; */
	font-size:60px;
	/* transform: rotate(180deg); */
	text-align: center;
	border: 2px solid white;
	font-weight: bold;
	border-radius:10px;
	background: linear-gradient(white, #CCE3EC);
	box-shadow: 0px 0px 3px black;
}


.letter_big {width:82px; height:82px; font-size:70px;}