:root {
	--blue-width: 295;
	--blue-height: 275;
	--blue-left: 301;
	--blue-top: 249;
	--green-width: 295;
	--green-height: 275;
	--green-left: 1328;
	--green-top: 249;
	--yellow-width: 295;
	--yellow-height: 275;
	--yellow-left: 260;
	--yellow-top: 520;
	--red-width: 295;
	--red-height: 275;
	--red-left: 1351;
	--red-top: 521;
	--purple-width: 262;
	--purple-height: 145;
	--purple-left: 832;
	--purple-top: 757;
	--contact-width: 200;
	--contact-height: 113;
	--contact-left: 570;
	--contact-top: 739;
	--credits-width: 200;
	--credits-height: 113;
	--credits-left: 1148;
	--credits-top: 739;

	--blue-label-width: 180;
	--blue-label-height: 30;
	--blue-label-left: 367;
	--blue-label-top: 326;
	--green-label-width: 220;
	--green-label-height: 31;
	--green-label-left: 1354;
	--green-label-top: 326;
	--yellow-label-width: 157;
	--yellow-label-height: 38;
	--yellow-label-left: 336;
	--yellow-label-top: 635;
	--red-label-width: 167;
	--red-label-height: 73;
	--red-label-left: 1424;
	--red-label-top: 617;
	--purple-label-width: 275;
	--purple-label-height: 130;
	--purple-label-left: 819;
	--purple-label-top: 756;

	--welcome-width: calc(100vw * (476 / 1920));
	--welcome-height: calc(var(--welcome-width) * 50 / 476);

	--sky-button-width: 152;
	--sky-button-height: 131;
	--hue-slider-width: 77;
	--hue-slider-height: 238;
	--hue-sliderhandle-width: 69;
	--hue-sliderhandle-height: 68;
}

body::after {
	/* image preload */
	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
	content: url("button_moon.png")
	         url("sound_off.png")
	         url("display_lit_blue.png")
	         url("display_lit_green.png")
	         url("display_lit_yellow.png")
	         url("display_lit_red.png");
}

#controls {
	position: absolute;
	bottom: 4%;
	right: 4%;
}

#sky-button, #music-button {
	width: calc(var(--console-width) * (var(--sky-button-width) / var(--console-px-width)));
	height: calc(var(--console-height) * (var(--sky-button-height) / var(--console-px-height)));
	max-width: var(--sky-button-width);
	max-height: var(--sky-button-height);
	margin: 0.7em 0;
}
.sky-button-day {
	background-image: url("button_sun.png");
}
.sky-button-night {
	background-image: url("button_moon.png");
}

.music-button-off {
	background-image: url("sound_off.png");
}
.music-button-on {
	background-image: url("sound_on.png");
}

#hue-slider {
	width: calc(var(--console-width) * (var(--hue-slider-width) / var(--console-px-width)));
	height: calc(var(--console-height) * (var(--hue-slider-height) / var(--console-px-height)));
	max-width: var(--hue-slider-width);
	max-height: var(--hue-slider-height);
	background-image: url("slider_bar.png");
	margin: 0.7em auto;
}
#hue-slider-handle {
	width: calc(var(--console-width) * (var(--hue-sliderhandle-width) / var(--console-px-width)));
	height: calc(var(--console-height) * (var(--hue-sliderhandle-height) / var(--console-px-height)));
	max-width: var(--hue-sliderhandle-width);
	max-height: var(--hue-sliderhandle-height);
	position: relative;
	top: 37%;
	left: 5%;
	background-image: url("slider_button.png");
}

#welcome {
	width: var(--welcome-width);
	height: var(--welcome-height);
	max-width: 476px;
	max-height: 50px;
	position: absolute;
	bottom: 4%;
	left: 4%;
	background-image: url("welcome.png");
}

#console-main {
	width: var(--console-width);
	height: var(--console-height);
	position: absolute;
	top: var(--console-top);
	left: var(--console-left);
}
#console-main-frame {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	background-image: url("display_main.png");
	pointer-events: none !important;
}
#console-main > * {
	position: absolute;
}
#screen {
	background-color: #8a508a;
	position: relative;
	width: 32%;
	height: 43%;
	top: 24%;
	left: 34%;
}
#screen video {
	width: 100%;
	height: 100%;
}
#screen-color {
	position: absolute;
	background-color: hsla(180, 100%, 50%, 0.25);
	width: 100%;
	height: 100%;
}
#button-blue {
	width: calc(100% * (var(--blue-width) / var(--console-px-width)));
	height: calc(100% * (var(--blue-height) / var(--console-px-height)));
	left: calc(100% * (var(--blue-left) / var(--console-px-width)));
	top: calc(100% * (var(--blue-top) / var(--console-px-height)));
}
#button-blue:hover {
	background-image: url("display_lit_blue.png");
}
#button-green {
	width: calc(100% * (var(--green-width) / var(--console-px-width)));
	height: calc(100% * (var(--green-height) / var(--console-px-height)));
	left: calc(100% * (var(--green-left) / var(--console-px-width)));
	top: calc(100% * (var(--green-top) / var(--console-px-height)));
}
#button-green:hover {
	background-image: url("display_lit_green.png");
}
#button-yellow {
	width: calc(100% * (var(--yellow-width) / var(--console-px-width)));
	height: calc(100% * (var(--yellow-height) / var(--console-px-height)));
	left: calc(100% * (var(--yellow-left) / var(--console-px-width)));
	top: calc(100% * (var(--yellow-top) / var(--console-px-height)));
}
#button-yellow:hover {
	background-image: url("display_lit_yellow.png");
}
#button-red {
	width: calc(100% * (var(--red-width) / var(--console-px-width)));
	height: calc(100% * (var(--red-height) / var(--console-px-height)));
	left: calc(100% * (var(--red-left) / var(--console-px-width)));
	top: calc(100% * (var(--red-top) / var(--console-px-height)));
}
#button-red:hover {
	background-image: url("display_lit_red.png");
}
#button-purple {
	width: calc(100% * (var(--purple-width) / var(--console-px-width)));
	height: calc(100% * (var(--purple-height) / var(--console-px-height)));
	left: calc(100% * (var(--purple-left) / var(--console-px-width)));
	top: calc(100% * (var(--purple-top) / var(--console-px-height)));
}
#button-purple:hover {
	background-image: url("display_lit_purple.png");
}
#button-contact {
	width: calc(100% * (var(--contact-width) / var(--console-px-width)));
	height: calc(100% * (var(--contact-height) / var(--console-px-height)));
	left: calc(100% * (var(--contact-left) / var(--console-px-width)));
	top: calc(100% * (var(--contact-top) / var(--console-px-height)));
}
#button-contact:hover {
	background-image: url("display_lit_contact.png");
}
#button-credits {
	width: calc(100% * (var(--credits-width) / var(--console-px-width)));
	height: calc(100% * (var(--credits-height) / var(--console-px-height)));
	left: calc(100% * (var(--credits-left) / var(--console-px-width)));
	top: calc(100% * (var(--credits-top) / var(--console-px-height)));
}
#button-credits:hover {
	background-image: url("display_lit_credits.png");
}

#label-blue {
	width: calc(100% * (var(--blue-label-width) / var(--console-px-width)));
	height: calc(100% * (var(--blue-label-height) / var(--console-px-height)));
	left: calc(100% * (var(--blue-label-left) / var(--console-px-width)));
	top: calc(100% * (var(--blue-label-top) / var(--console-px-height)));
	background-image: url("display_label_blue.png");
	pointer-events: none;
}
#label-green {
	width: calc(100% * (var(--green-label-width) / var(--console-px-width)));
	height: calc(100% * (var(--green-label-height) / var(--console-px-height)));
	left: calc(100% * (var(--green-label-left) / var(--console-px-width)));
	top: calc(100% * (var(--green-label-top) / var(--console-px-height)));
	background-image: url("display_label_green.png");
	pointer-events: none;
}
#label-yellow {
	width: calc(100% * (var(--yellow-label-width) / var(--console-px-width)));
	height: calc(100% * (var(--yellow-label-height) / var(--console-px-height)));
	left: calc(100% * (var(--yellow-label-left) / var(--console-px-width)));
	top: calc(100% * (var(--yellow-label-top) / var(--console-px-height)));
	background-image: url("display_label_yellow.png");
	pointer-events: none;
}
#label-red {
	width: calc(100% * (var(--red-label-width) / var(--console-px-width)));
	height: calc(100% * (var(--red-label-height) / var(--console-px-height)));
	left: calc(100% * (var(--red-label-left) / var(--console-px-width)));
	top: calc(100% * (var(--red-label-top) / var(--console-px-height)));
	background-image: url("display_label_red.png");
	pointer-events: none;
}
#label-purple {
	width: calc(100% * (var(--purple-label-width) / var(--console-px-width)));
	height: calc(100% * (var(--purple-label-height) / var(--console-px-height)));
	left: calc(100% * (var(--purple-label-left) / var(--console-px-width)));
	top: calc(100% * (var(--purple-label-top) / var(--console-px-height)));
	background-image: url("about_crop.png");
	pointer-events: none;
}