html, body{
	font-family:'Montserrat';
	background:black;
	min-height:100%;
	color:var(--invertColor);
	transition:color .5s;
}

	a{
		color:var(--invertColor);;
		text-decoration:none;
	}

/*-----------------------------------------------*/

	#colorFields{
		width:var(--dimsMainContainer);
		height:var(--dimsMainContainer);
		margin:auto;
		margin-top:calc(50vh - var(--dimsMainContainer) * 0.5);
	}

		.colorField{
			width:var(--dimsOfColorField);
			height:var(--dimsOfColorField);    
			border-radius: 100px;
			margin:calc(var(--xTimesMargin) * var(--dimsOfColorField));
			cursor:pointer;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
		}

			#yellowField{
				background:#ffb90f;
				border-top-left-radius: 800px;
				float:left;
			}
			#redField{
				background:red;
				border-top-right-radius: 800px;
				float:right;
			}
			#greenField{
				background:green;
				border-bottom-left-radius: 800px;
				float:left;
			}
			#blueField{
				background:blue;
				border-bottom-right-radius: 800px;
				float:right;
			}

/*-----------------------------------------------*/

	.btn{
		background:#ffffff;
		width:var(--dimsBtn);
		height:var(--dimsBtn);
		color:black;
		line-height:var(--dimsBtn);
		font-size:var(--dynamicFontSize);
		transition: width .5s, height .5s, top .5s;
		border:solid 1px;
		cursor:pointer;
	}

		#newGame{
			top:var(--dimsBtn);
		}

		#score{
			cursor:text;
		}

	.eckTexte{
		position:fixed;
		text-align:center;
		z-index:5;
	}
	
		.eckTexte span{
			display: inline-block;
			vertical-align: middle;
			line-height: calc(var(--dimsBtn) * 0.3);
		}

/*-----------------------------------------------*/

	#messageBox{
		position:fixed;
		height:min(75vh, 300px);
		width:min(60vw, 750px);
		border:solid grey;
		background:black;
		font-size:25px;
	}

		#messageHeader{
			background:white;
			height:30px;
		}

			#messageClose{
				color:black;
				padding-left:2.5%;
				width:10%;
				font-weight:bold;
				cursor:pointer;
			}
		
		#messageContentBox{
			text-align:center;
			overflow:auto;
			position:relative;
			line-height:50px;
			height:calc(min(75vh, 300px) - 30px);		/* Height of messageBox can be 75vh or 300px depending on whats smaller, 30px height of message header */
		}

			#messageContentBox button{
				position:relative;
				width:20%;
				min-height:50px;
				border:solid grey;
				background:black;
				color:white;
				font-family:'Montserrat';
				cursor:pointer;
				word-break: break-all;
			}

			#messageContentBox input{
				position:relative;
				width:50%;
				min-height:50px;
				text-align:center;
				border:solid grey;
				font-family:'Montserrat';
			}

			#messageContent{
				position: relative;
			}

/*-----------------------------------------------*/

			.smallMenu{
				top:calc(2 * var(--dimsBtn));
				width:var(--dimsBtn);
				height:var(--dimsBtn);
				line-height:var(--dimsBtn);
				font-size:var(--dynamicFontSize);
			}

				.smallMenu span{
					line-height: calc(var(--dimsBtn) * 0.3);
				}

			.bigMenu{
				top:0;
				width:100vw;
				height:100vh;
				line-height:100vh;
				font-size:2vw;
			}

				.bigMenu span{
					line-height:17vh;
				}

				#menuClose{
					position:absolute;
					top:20px;
					left:20px;
					font-size:30px;
					line-height:40px;
				}

/*-----------------------------------------------*/

/* Generelle Variablen */
:root {
	--xTimesMargin: 0.05;
	--dimsMainContainer:calc((2 + var(--xTimesMargin) * 4) * var(--dimsOfColorField));
	--invertColor:white;


	--dimsBtn: calc(100vh / 3); 	/* fall back wert, wenn 3 buttons a 80px nicht mehr auf den bildschirm passen. Wird ansonsten uerberschrieben */
	--dynamicFontSize: 9vh; 		/* In dem Fall muss auch die font-size der button dynamisch sein. Wird wenns nicht noetig ist auch gleich wieder ueberschrieben */
}

	/* Buttons passen in die y Dimension */
	@media screen and (min-height: 240px) {
		:root {
			--dimsBtn: 80px;
			--dynamicFontSize: 17.5px;
		}
	}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Bildschirm hoeher als breit */
@media screen and (min-height: 100vw) {
	:root {
		--dimsOfColorField:40vw;
		--maxSize: 90vw;
	}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Bildschirm breiter als hoch */
@media screen and (min-width: 100vh) {
	:root {
		--dimsOfColorField:40vh;
		--maxSize: 90vh;
	}
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

#bestenlisteHeader{
	position:fixed;
	left:0; 
	top:0; 
	background:white; 
	font-size:30px; 
	padding-left:10%; 
	padding-right:10%; 
	padding-top:2vh; 
	padding-bottom:2vh;
	line-height:4vh;
	color:black;
}

#allHighscores{
	margin-top:10vh;
	font-size:30px;
}

#loader {
	border: 10px dotted #ffffff;
	border-radius: 50%;
	border-top: 10px dotted #000000;
	width: 50px;
	height: 50px;
	position:fixed;
	left:calc(50vw - 25px);
	top:calc(50vh - 25px);
	animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

#settings{
	text-align:center;
	margin-top:35vh;
}

	#settings button{
		width:max(3vh, 3vw);
		height:max(3vh, 3vw);
		font-size:max(2vh, 2vw);
		border:solid white;
		border-radius:50%;
		font-family:'Montserrat';
		color:white;
		background:transparent;
		cursor:pointer;
	}

	#settings input[type="color"]{
		width:15%;
		height:max(4vh, 4vw);
	}

	#chosenColors{
		display:inline-block;
		width:auto;
	}

		#chosenColors div{
			float:left;
			margin:10px;
			width:max(4vh, 4vw);
			height:max(4vh, 4vw);
		}

.palette {
	--g:10px; /* The gap between shapes*/
	--s:calc(var(--maxSize) * 0.1); /* the size*/

	height: var(--maxSize);
	width: var(--maxSize);
	left:calc(50vw - var(--maxSize) * 0.5);
	top:calc(50vh - var(--maxSize) * 0.5);
	position:relative;
	display:inline-block;
	overflow:hidden;
}

	.palette > * {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		border:var(--s) solid var(--c);
		border-radius:50%;
		clip-path:polygon(
			calc(50% + var(--g)/2) 50%, 
			calc(50% + var(--g)/2) 0%, 
			100% 0%,
			100% calc(0% - var(--g)/2),
			50% calc(50% - var(--g)/2)); 
		cursor:pointer;
	}