body {margin: 0;background-color: #ffffff;color: #000000;overscroll-behavior: none; overflow: hidden;background-image: radial-gradient(#ffffff 40%, #ccccff);}
.overlay {box-sizing:border-box; border: 1px solid #aaaaff; border-radius:33%;width:8.1vmax;height:8.1vmax; background-color: #eeeeff;opacity: 0.5;
display:grid; grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr; min-width:130px;min-height:130px;}
.overlay:hover{ opacity: 0.8;}
.inlay {box-sizing:border-box; position: absolute; width:8.1vmax;height:8.1vmax; min-width:130px;min-height:130px;}

.knopf {display:flex; align-items:center; justify-content:center; box-sizing:border-box; border: 1px solid #aaaaff;border-radius:33%;margin:0.2vmax; 
		height:2.5vmax; width:2.5vmax;min-width:40px;min-height:40px;background-color: #eeeeff;opacity:0.5;}
.knopf:hover{ opacity: 0.8;}
.knopf2 {display:flex; align-items:center; justify-content:center; box-sizing:border-box; border: 1px solid #aaaaff;border-radius:33%;margin:0.2vmax; 
		height:2.5vmax; width:2.5vmax;min-width:40px;min-height:40px;background-color: #eeeeff;opacity: 0.99;}
.knopf3 {display:flex; align-items:center; justify-content:center; box-sizing:border-box; border: 1px solid #aaaaff;border-radius:1vmax;margin:0.2vmax; 
		height:4vmax; width:6vmax;min-width:90px;min-height:60px;background-color: #eeeeff;opacity:0.5;}
.knopf3:hover{ opacity: 0.8;}
.icon {box-sizing:border-box;height:2vmax; width:2vmax;min-width:32px;min-height:32px;place-self: center;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
		-webkit-touch-callout:none;
		pointer-events: none;}
		
.joystick 		{background:no-repeat url('../svg/joystick.svg') 		50%; background-size: 100% 100%;opacity:0.5;border-radius:50%;box-sizing:border-box;}
.joystick:hover	{opacity:0.8;}
.joystickTarget {background:no-repeat url('../svg/joystickTarget.svg')	50%; background-size: 100% 100%;opacity:0.5;border-radius:50%;box-sizing:border-box;}
.knopf5 {box-sizing:border-box;  border: 1px solid #aaaaff;border-radius:33%;position:absolute;height:80px; width:80px;text-align:center;padding-top:6px; background-color: #eeeeff;opacity: 0.5;}
.knopf5:hover{ opacity: 0.8;}
.infoBar {box-sizing:border-box;  border: 1px solid #aaaaff;border-radius: 5px;  position:absolute;height:22px; width:202px;text-align:center;background-color:#eeeeff;}
.progressBar1 {box-sizing:border-box;  border: 1px solid #aaaaff;border-radius: 7px;position:absolute;height:20px; width:204px;background-image: linear-gradient(#000000,#000000;)}
.progress1 {box-sizing:border-box;border-radius: 5px;position:absolute;height:16px; width:0px;background-image: linear-gradient(#99ff99,#00ee00,#006600);}
.progressBar {box-sizing:border-box;  border: 1px solid #aaaaff;border-radius: 6px;position:absolute;height:12px; width:204px;background-image: linear-gradient(#eeeeff,#ccccdd,#aaaabb);opacity: 0.8;}
.progress {box-sizing:border-box;border-radius: 5px;position:absolute;height:10px; width:0px;background-image: linear-gradient(#ccddff,#5599ff,#0000aa);}