body {
    opacity: 0;
    animation: fadeInAnimation 1s ease-in-out forwards;
}

.fadeIn {
    animation: fadeInAnimation 1s ease-in-out forwards;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.loader {
	position: absolute;
    border: 18px solid #f3f3f3;
    border-top: 18px solid #008e00;
    background-color: transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

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

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeOut {
    animation: fadeOutAnimation 1s ease-in-out forwards;
}

@keyframes fadeOutAnimation {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

	:root {	
		--scaling: 1.7;
		--difficulty: 1.5;
		--platzfarbe: green; }

	p1 {	color: #ffffff;
		font-size: 2vh;
		letter-spacing: -1px;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 #000;
		margin: 10px 0 2vh;
		text-align: center;
		line-height: 2vh; }

	p2 {	color: #ffffff;
		text-align: center;
		font-size: 30px;
		letter-spacing: -1px;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 #000;
		margin: 10px 0 24px;
		text-align: center;
		line-height: 50px; }

	p3 {	color: #ffffff;
		font-size: 40px;
		letter-spacing: -1px;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 #000;
		margin: 10px 0 24px;
		text-align: center;
		line-height: 50px; }

	body {
		margin: 0;
		padding: 0;
		overscroll-behavior: none; 
		background: transparent;}
		
	.canvas {
		position: absolute;	left : 0; top : 0;
		width: 100%; height: 100%;
		pointer-events: none;}
	#hintergrundCanvas {z-index: -500; background: #000;}
	#spielfeldCanvas {z-index: 100;}
	#explosionCanvas {z-index: 100;}
	#comboCanvas {z-index: 1000;}
	#celebCanvas {z-index: 500;}
	#punishCanvas {z-index: 200;}
	#simpleCanvas {z-index: 1300;}
	#pointsCanvas {z-index: 1400;}

	#wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden; }

	#deadspace {
		display:none;	
		touch-action: none;
		width: calc(var(--scaling) * 55vw);
		height: calc(var(--scaling) * 45.7vw);
		transform: translateY(calc(var(--scaling) * -22.85vw));
		background-color: white;
		opacity: 0.2;
		position: absolute;
		z-index: 10000; }

	#menu {
		display:flex;
		flex-wrap: wrap;
		justify-content:  space-evenly;
		align-content: space-evenly;
		z-index: 1000; 
		height: 100%}

	#gameEnd {
		display: none;
		flex-wrap: wrap;
		flex-direction:line;
		justify-content:  center;
		align-content: center;
		position: absolute;
		left: 0;
		height: 100%;
		width: 100vw;
		z-index: 1000; }
		
	#top100 {
		display: none;
		flex-wrap: wrap;
		justify-content:  center; }
	
	#top100inner {
		flex-wrap: wrap;
		justify-content:  center;
		width: 75vw;
		min-height: 80vh;
		max-height: 95vh;
		text-align: center;}

	.gameScreen {
		display: flex;
		flex-wrap: wrap;
		flex-direction:line;
		justify-content:  center;
		align-content: center;
		position:absolute;
		height: 40vh;
		width: 70vw;
		display:none;
		background-color:black;
		border: 2px solid white;
		z-index: 11000; }
		
	.ingameScreen {
		display: flex;
		flex-wrap: wrap;
		flex-direction:line;
		justify-content:  center;
		align-content: center;
		position:absolute;
		left:0; top:0;
		height: 40vh;
		width: 90vw;
		display:none;
		background-color:transparent;
		z-index: 11000; }

	#ingamemenu {
		position:absolute; 
		bottom:10px; 
		display:none}

	#spielstand { 
		position:absolute;
		top:2vh; 
		display:none}
		
	#spielfeld {
		width: calc(var(--scaling) * 55vw);
		height: calc(var(--scaling) * 91.4vw);
		background-color: var(--platzfarbe);
		position: absolute;
		border: 2px solid white;
		opacity:0.5;}
		
	#spielfeld::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('images/texture.png') center center no-repeat;
		background-size: cover;
		opacity: 1; }

	#txt {
		position:absolute; 
		bottom:50px;
		display:none}

	.dropdown {
		width: 49%;
		padding: 5px;
		text-align: center;
		border: none;
		outline: none;
		color: rgb(255, 255, 255);
		background: #111;
		position: relative;
		border-radius: 10px;
		user-select: none;
		-webkit-user-select: none;
		touch-action: manipulation;}

	.button {
		min-width: 30vw;
		padding: 0.6em 2em;
		border: none;
		outline: none;
		color: rgb(255, 255, 255);
		background: #111;
		cursor: pointer;
		position: relative;
		z-index: 0;
		border-radius: 10px;
		user-select: none;
		-webkit-user-select: none;
		touch-action: manipulation;
		z-index: 20000; }
	.button:before {
		content: "";
		background: linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
		position: absolute;
		top: -2px;
		left: -2px;
		background-size: 400%;
		z-index: -1;
		filter: blur(5px);
		-webkit-filter: blur(5px);
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		animation: glowing-button-85 20s linear infinite;
		transition: opacity 0.3s ease-in-out;
		border-radius: 10px; }

	@keyframes glowing-button-85 {
		0% { background-position: 0 0; }
		50% { background-position: 400% 0; }
		100% { background-position: 0 0; } }

	.button:after {
		z-index: -1;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background: #222;
		left: 0;
		top: 0;
		border-radius: 10px; }

	.button.no-after:after{content:none !important;}

	#ball {	width: 10px;
		height: 10px;
		position: absolute;
		background-color: orange;
		top: calc(50% - 5px);
		left: calc(50% - 5px);
		border-radius: 50%; 
		z-index:10000;
		box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
		background: radial-gradient(circle, #ffcc00, #ffa500);
		background-size: cover;}
	#ball::after {
		content: "";
		position: absolute;
		width: 45%;
		height: 45%;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		top: 2px;
		right: 4px;	}	
	#ball::before {
		content: "";
		position: absolute;
		width: 25%;
		height: 25%;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		top: 2px;
		left: 2px; }
	
	#ballHalo {	width: 20px;
		height: 20px;
		position: absolute;
		background-color: transparent;
		top: scrH / 2;
		left: scrW / 2;
		border-radius: 50%;
		z-index:10000; 
		border: 8px dashed rgba(255,255,255,0.1);
		animation: rotate 3s linear infinite; }
		
	@keyframes rotate {
	    0% {
	        transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	
	.bar {	display:none;
		background-color: red;
		position: absolute; }
	#bar_gm2_1 {
		width: calc(var(--scaling) * 30vw);
		height: 5vw;
		left: calc(50% - (var(--scaling) * 15vw));
		transform: translateY(calc(var(--scaling) * 30vw)); }
	#bar_gm3_1 {
		width: calc(var(--scaling) * 10vw);
		height: 10vw;
		transform: translateY(calc(var(--scaling) * 1vw));
		animation: tw 1s ease-in-out infinite; }
	#bar_gm3_2 {
		width: calc(var(--scaling) * 10vw);
		height: 10vw;
		transform: translateY(calc(var(--scaling) * 20vw)); 
		animation: def_1_Anim 1.5s ease-in-out infinite; }
	#bar_gm3_3 {
		width: calc(var(--scaling) * 10vw);
		height: 10vw;
		transform: translateY(calc(var(--scaling) * 30vw)); 
		animation: def_1_Anim 2s ease-in-out infinite; }

	@keyframes tw {
		0%		{ left:    10%; }
		50%		{ left:    calc(90% - (var(--scaling) * 10vw)); }
		100%	{ left:    10%; } }
	@keyframes def_1_Anim {
		0%		{ left:    0%; }
		50%		{ left:    calc(100% - (var(--scaling) * 10vw)); }
		100%	{ left:    0%; } }

	#countdownContainer {
	    position: absolute;
		top: calc(50vh - 30vw);
		left: calc(50vw - 30vw);
	    width: 60vw;
	    height: 60vw;
	}

	#countdownCircle {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background-color:rgba(255, 255, 255, 0.2);
	    border-radius: 50%;
	    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	    transition: clip-path 1s linear;
	}

	#countdownText {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    font-size: 24px;
	    color: #000;
	}

	.tor {	position: absolute;
		width:  calc(var(--scaling) * var(--difficulty) * 3.66vw);
		height: calc(var(--scaling) * var(--difficulty) * 1.2vw);
		background-color: white;
		outline: 1px solid black;
		left: calc(50% - (var(--scaling) * var(--difficulty) * 1.83vw));
		z-index:12000; }
	.toben {
		transform: translateY(calc(var(--scaling) * var(--difficulty) * -1.2vw - 3px)); }
	.tunten {
		transform: translateY(calc(var(--scaling) * 91.4vw + 3px)); }

	.linierung {
		width: 100%;
		height: 2px;
		background-color: white;
		position: absolute;
		transform: translateY(-1px);}
	.a14 { top: 25%; }
	.a12 { top: 50%; }
	.a34 { top: 75%; }

	.viertelkreis {
		width: calc(var(--scaling) * 29.26vw);
		height: calc(var(--scaling) * 29.26vw);
		border: 2px solid white;
		border-radius: 50%;
		position: absolute;
		clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); }
	.lo{	top: calc(var(--scaling) * -14.63vw);
		left: calc(50% - var(--scaling) * (14.63vw + 1.83vw));
		transform: rotate(270deg); }
	.ro{	top: calc(var(--scaling) * -14.63vw);
		right: calc(50% - var(--scaling) * (14.63vw + 1.83vw));
		transform: rotate(180deg); }
	.lu{	bottom: calc(var(--scaling) * -14.63vw);
		left: calc(50% - var(--scaling) * (14.63vw + 1.83vw));
		transform: rotate(0deg); }
	.ru{	bottom: calc(var(--scaling) * -14.63vw);
		right: calc(50% - var(--scaling) * (14.63vw + 1.83vw));
		transform: rotate(90deg);}

	.gerade {
		width: calc(var(--scaling) * 3.66vw);
		height: 0;
		border-top: 2px solid white;
		position: absolute;
		left: calc(50% - var(--scaling) * 1.83vw); }
	.skoben { top: calc(var(--scaling) * 14.63vw);
		transform: translateY(2px); }
	.skunten { bottom: calc(var(--scaling) * 14.63vw); 
		transform: translateY(-2px); }

	.viertelkreisgestr {
		width: calc(var(--scaling) * 39.26vw);
		height: calc(var(--scaling) * 39.26vw);
		border: 2px dashed white;
		border-radius: 50%;
		position: absolute;
		clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); }
	.logestr{
		top: calc(var(--scaling) * -19.63vw);
		left: calc(50% - var(--scaling) * (19.63vw + 1.83vw));
		transform: rotate(270deg); }
	.rogestr{
		top: calc(var(--scaling) * -19.63vw);
		right: calc(50% - var(--scaling) * (19.63vw + 1.83vw));
		transform: rotate(180deg); }
	.lugestr{
		bottom: calc(var(--scaling) * -19.63vw);
		left: calc(50% - var(--scaling) * (19.63vw + 1.83vw));
		transform: rotate(0deg); }
	.rugestr{
		bottom: calc(var(--scaling) * -19.63vw);
		right: calc(50% - var(--scaling) * (19.63vw + 1.83vw));
		transform: rotate(90deg);}

	.geradegestr {
		width: calc(var(--scaling) * 3.66vw);
		height: 0;
		border: 2px dashed white;
		position: absolute;
		left: calc(50% - var(--scaling) * 1.83vw); }
	.skobengestr { top: calc(var(--scaling) * 19.63vw);
		transform: translateY(2px); }
	.skuntengestr { bottom: calc(var(--scaling) * 19.63vw); 
		transform: translateY(-2px); }

	.punkt {
		width: calc(var(--scaling) * 1vw);
		height: calc(var(--scaling) * 1vw);
		background-color: white;
		position: absolute;
		border-radius: 50%; }
	.p7mo {
		top: calc(var(--scaling) * 6.4vw);
		left: calc(50% - var(--scaling) * 0.5vw); }
	.p7mu {
		bottom: calc(var(--scaling) * 6.4vw);
		left: calc(50% - var(--scaling) * 0.5vw); }
	.mitte {
		top: calc(50% - var(--scaling) * 0.5vw);
		left: calc(50% - var(--scaling) * 0.5vw);}

.combo-blink {
  animation: jsComboBlink 0.1s infinite alternate;
}

@keyframes jsComboBlink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}