/*

Last update: December 23, 2022 (Tyron)

*/



/*---------- HARMONIZE BROWSER DEFAULTS ------------------------------*/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, button, body, canvas, caption, center, cite, code, details, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, option, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: none; border-radius: 0; outline: none; font-family: inherit; font-size: inherit; letter-spacing: 0; vertical-align: baseline; background-color: transparent; }



/*---------- FONTS ---------------------------------------------------------------------------------------------------------*/

@font-face {
	font-family: 'Roboto Mono'; font-weight: 100 700; font-style: normal;
	src: url('roboto-mono.ttf')  format('truetype');
}

@font-face {
	font-family: 'Boston Traffic'; font-weight: normal; font-style: normal;
	src: url('boston-traffic.ttf')  format('truetype');
}



/*---------- GENERAL SETTINGS ------------------------------*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: none !important;
	text-size-adjust: none !important;
}

html {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-size: 1vw;
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: rgb(40,40,30);
}

texture {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/*background: linear-gradient(120deg, rgb(60,60,55) 10%, rgb(80,80,70) 50%, rgb(60,60,55) 90%);*/
	background: linear-gradient(180deg, rgb(80,80,70) 10%, rgb(60,60,55) 90%);
	filter: url(#InterfaceSurface);
}

terminal {
	display: none;
}

svg { visibility: hidden; }

screenbackground {
	position: absolute;
	left: 2rem;
	right: 2rem;
	top: 2rem;
	bottom: 6rem;
	box-shadow: inset 0 0.5rem 0.5rem black;
	border: 0.2rem solid rgb(0,0,0);
	border-radius: 1rem;
	background-image: linear-gradient(180deg, rgb(10,10,10) 0%, rgb(25,25,25) 100%);
}

screenborder {
	position: absolute;
	left: 2rem;
	right: 2rem;
	top: 2rem;
	bottom: 6rem;
	border: 0.2rem solid rgb(60,60,50);
	border-top-color: rgb(30,30,25);
	border-bottom-color: rgb(80,80,70);
	border-radius: 1rem;
}

screencontent {
	position: absolute;
	overflow-x: pre-wrap;
	overflow-y: scroll;
	padding: 2rem;
	left: 2.2rem;
	right: 2.2rem;
	top: 2.2rem;
	bottom: 6.2rem;
	border-radius: 1rem;
	font-family: 'Roboto Mono', monospace;
	font-weight: 250;
    font-size: 1rem;
	color: rgb(200,255,0);
	text-shadow: 0 0 0.5rem rgb(150,255,0), 0 0 1rem rgb(80,255,0);
	line-height: 1.5rem;
	white-space: pre-wrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-text-size-adjust: none !important;
	text-size-adjust: none !important;
}

screencontent::-webkit-scrollbar {
  display: none;
}

screencontent h1			{ font-size: 1rem; font-weight: 450; margin-bottom: 1rem; }
screencontent p			{ font-size: 1rem; margin-bottom: 0.7rem; }
screencontent ul			{ font-size: 1rem; margin-bottom: 0.7rem; list-style-type: none; }
/*screencontent p:last-child	{ margin-bottom: 0; }*/
screencontent b			{ font-weight: 450; }
screencontent a			{ font-weight: 450; color: inherit; text-decoration: none; }
screencontent a:hover		{ background-color: rgb(200,255,0); color: rgb(10,10,10); }
screencontent b			{ font-weight: 450; }

stripes {
	position: absolute;
	overflow: hidden;
	left: 2.2rem;
	right: 2.2rem;
	top: 2.2rem;
	bottom: 6.2rem;
	border-radius: 1rem;
	background-image: repeating-linear-gradient(180deg, rgba(200,255,0,0.001) 0, rgba(200,255,0,0.001) 1px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 3px);
	pointer-events: none;
}

screw {
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,1);
	border: 0.1rem solid rgb(65,65,65);
	border-top-color: rgb(100,100,100);
	border-bottom-color: rgb(40,40,40);
	border-radius: 0.6rem;
	background-image: linear-gradient(0deg, rgba(255,255,255,0.1), rgb(0,0,0,0.01));
	background-color: rgba(80,80,80,0.5);
}
screw::before {
	position: absolute;
	left: 0.4rem;
	top: 0; 
	width: 0.05rem;
	height: 1.1rem;
	background-color: transparent;
	border-left: 0.1rem solid rgba(255,255,255,0.3);
	border-right: 0.1rem solid rgba(0,0,0,1);
	content: "";
}
screw:nth-child(1)			{ left: 0.6rem; top: 0.6rem; }
screw:nth-child(1)::before	{ transform: rotate(220deg); }
screw:nth-child(2)			{ right: 0.6rem; top: 0.6rem; }
screw:nth-child(2)::before	{ transform: rotate(280deg); }
screw:nth-child(3)			{ left: 0.6rem; bottom: 4.6rem }
screw:nth-child(3)::before	{ transform: rotate(240deg); }
screw:nth-child(4)			{ right: 0.6rem; bottom: 4.6rem; }
screw:nth-child(4)::before	{ transform: rotate(190deg); }
screw:nth-child(5)			{ left: 0.6rem; bottom: 0.6rem }
screw:nth-child(5)::before	{ transform: rotate(290deg); }
screw:nth-child(6)			{ right: 0.6rem; bottom: 0.6rem; }
screw:nth-child(6)::before	{ transform: rotate(270deg); }

input:first-child {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 6rem;
	background-color: transparent;
	color: transparent;
	opacity: 0;
	display: none;
	cursor: default;
}

button {
	background: linear-gradient(180deg, rgb(20,20,20) 0%, rgb(50,50,50) 70%, rgb(70,70,70) 100%);
	transition: border 500ms ease-out, box-shadow 500ms ease-out;
	box-shadow: inset 0 0 0.1rem rgba(0,0,0,0.7);
	border: 0.2rem solid rgb(60,60,50);
	border-top-color: rgb(30,30,25);
	border-bottom-color: rgb(80,80,70);
	border-radius: 0.5rem;
	position: absolute;
	height: 2rem;
	color: rgba(0,0,0,0.6);
	font-family: 'Boston Traffic', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	white-space: nowrap;
	line-height: 1;
	padding-top: 0.3rem;
	display: inline-flex;
	justify-content: center;
    align-items: center;
    overflow: hidden;
    }
button:hover {
	transition: border 200ms ease-in, box-shadow 200ms ease-in;
	box-shadow: inset 0 0 0.5rem rgba(200,255,0,0.1);
	border-color: rgb(80,85,50);
	border-top-color: rgb(50,55,25);
	border-bottom-color: rgb(100,105,70);
    }
button:active {
	transition: font-size 50ms ease-in, box-shadow 50ms ease-in;
	box-shadow: inset 0 0.3rem 0.3rem rgba(0,0,0,1), inset 0 0.2rem 0.1rem rgba(0,0,0,1);
	font-size: 0.99rem;
    }
button::before /* button light */ {
	background-image: linear-gradient(180deg, rgba(200,255,0,0.5) 0%, rgba(200,255,0,1) 40%, rgba(200,255,0,1) 60%, rgba(200,255,0,0.5) 100%);
	box-shadow: inset 0 0 1rem rgba(0,0,0,0.3), inset 1rem 0 1rem rgba(0,0,0,0.3), inset -1rem 0 1rem rgba(0,0,0,0.3);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-family: 'Boston Traffic', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	white-space: nowrap;
	line-height: 1em;
	padding-top: 0.3rem;
	display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	transition: opacity 500ms ease-out;
	opacity: 0;
	}
button.here::before /* button light */ {
	transition: opacity 200ms ease-in;
	opacity: 0.5;
	}
button:hover::before {
	transition: opacity 200ms ease-in;
	opacity: 0.7;
    }
button:active::before {
	font-size: 0.99rem;
	transition: opacity 200ms ease-in;
	opacity: 0.7;
    }
button::after /* reflex on button */ {
	position: absolute;
	left: 0;
	right: 0;
	top: 15%;
	height: 5%;
	background-image: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0.3) 100%);
	box-shadow: 0 0 0.2em rgba(255,255,255,0.5), 0 0 0.8em rgba(255,255,255,0.2);
	content: "";
	transition: opacity 500ms ease-out, position 500ms ease-out;
	opacity: 0.3;
}
button:hover::after {
	transition: opacity 200ms ease-in;
	opacity: 0.5;
}
button:active::after {
	transition: opacity 50ms ease-in;
	opacity: 0.4;
}
button:nth-child(1)			{ left: 4rem; bottom: 2rem; width: 10rem; }
button:nth-child(2)			{ left: 15rem; bottom: 2rem; width: 10rem; }
button:nth-child(3)			{ left: 26rem; bottom: 2rem; width: 10rem; }
button:nth-child(4)			{ left: 37rem; bottom: 2rem; width: 10rem; }

label {
	position: absolute;
	right: 3.5rem;
	bottom: 2.1rem;
	font-family: "Boston Traffic", sans-serif;
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: rgba(30,10,10,0.5);
}

data { display: none; }



/*---------- RESPONSIVE DESIGN ---------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1280px) {
	html { font-size: 1.5vw; }
	label { font-size: 1.2vw; }
}

@media screen and (max-width: 1200px)	{
	html { font-size: 1.6vw; }
	screencontent br { content: " "; }
	screencontent br::after{ content: " "; }
	label { font-size: 1.5vw; }
	label span:nth-child(2) { display: none; }
}

@media screen and (max-width: 1130px)	{
	html { font-size: 1.7vw; }
	label { display: none; }
}

@media screen and (max-width: 1068px)	{
	html { font-size: 1.8vw; }
}

@media screen and (max-width: 960px) {
	html				{ font-size: 2vw; }
	screencontent		{ padding: 1.5vw; }
	label				{ display: none; }
	button				{
		font-weight: normal;
		letter-spacing: 0;
		padding-top: 0.5rem;
		background-image: linear-gradient(180deg, rgb(40,40,40) 0%, rgb(70,70,70) 70%, rgb(90,90,90) 100%);
	}
	button::before		{ font-weight: normal; letter-spacing: 0; padding-top: 0; }
	button:nth-child(1)	{ left: 11.5vw; width: 17.5vw; }
	button:nth-child(2)	{ left: 32vw; width: 17.5vw; }
	button:nth-child(3)	{ left: 52vw; width: 17.5vw; }
	button:nth-child(4)	{ left: 72vw; width: 17.5vw; }
}

@media screen and (max-width: 640px)	{
	html				{ font-size: 3vw; }
	input:first-child	{ bottom: 10rem; }
	texture {
		background: linear-gradient(180deg, rgb(80,80,70) 10%, rgb(60,60,55) 90%);
		filter: url(#InterfaceSurface);
	}
	screenborder		{ bottom: 10rem; }
	screenbackground	{ bottom: 10rem; }
	screencontent		{ padding: 1rem; bottom: 10.2rem; }
	stripes				{ bottom: 10.2rem; }
	screw:nth-child(3)	{ bottom: 8.6rem; }
	screw:nth-child(4)	{ bottom: 8.6rem; }
	button				{ height: 8vw; font-size: min(4vw, 19px); }
	button::before		{ height: 8vw; font-size: min(4vw, 19px); padding-top: 0; }
	button:nth-child(1)	{ left: 11vw; bottom: 18vw; width: 37vw; }
	button:nth-child(2)	{ left: 11vw; bottom: 6vw; width: 37vw; }
	button:nth-child(3)	{ left: 52vw; bottom: 18vw; width: 37vw; }
	button:nth-child(4)	{ left: 52vw; bottom: 6vw; width: 37vw; }
}

@media screen and (max-width: 480px)	{
	html				{ font-size: 4vw; }
	input:first-child	{ bottom: 8rem; }
	screenborder		{ bottom: 8rem; }
	screenbackground	{ bottom: 8rem; }
	screencontent		{ bottom: 8.2rem; }
	stripes				{ bottom: 8.2rem; }
	screw:nth-child(3)	{ bottom: 6.6rem; }
	screw:nth-child(4)	{ bottom: 6.6rem; }
}