:root {
	/*Some colors for kraken*/
	--colorSilver:			#B2B4B2;
	--colorLightGrey:		#CFD0CF;
	--colorMetallicBlue:	#9FC8DF;
	--colorLightRed:		#FF4040;
	--colorLightYellow:		#FFFF60;
	--colorLightBlue:		#8080FF;
	--colorLightGreen: 		#42F827;

	/*Some colors for menu ui*/
	--colorBlueLit:			#BAE4E4;
	--colorBlueUnlit:		#20605F;
	--colorBleen:			#4D9278;
	--colorBleenDark:		#0E3224;

	/* pulsing colors  */
	--textFaded:			#8F8F8F;
	--textBorder:			#303030;
	--cpuPulseColor:		var(--colorLightBlue);
	--gpuPulseColor:		var(--colorLightBlue);
	--liqPulseColor:		var(--colorLightBlue);

	/*Tweaking variables*/
	--topPadding:			50px;
	--bottomPadding:		50px;

	--configHighlight:     0 0 8px white,
							0 0 16px white;

	--flickerLightsCpu:		0 0 4px white,
							0 0 40px var(--cpuPulseColor),
							0 0 60px var(--cpuPulseColor),
							0 0 300px var(--cpuPulseColor),
							0 0 320px var(--cpuPulseColor),
							0 0 325px var(--cpuPulseColor);

	--flickerLightsGpu:	0 0 4px white,
							0 0 40px var(--gpuPulseColor),
							0 0 60px var(--gpuPulseColor),
							0 0 300px var(--gpuPulseColor),
							0 0 320px var(--gpuPulseColor),
							0 0 325px var(--gpuPulseColor);

	--flickerLightsLiq:	0 0 4px white,
							0 0 40px var(--liqPulseColor),
							0 0 60px var(--liqPulseColor),
							0 0 300px var(--liqPulseColor),
							0 0 320px var(--liqPulseColor),
							0 0 325px var(--liqPulseColor);

}

html, body {
	margin: 0;
	height: 100%;
}

#container {
	position: absolute;
	top:0; left:0; bottom:0; right:0;
	margin: none;
	padding: none;
}

#widget {
	position: relative;
	display: flex;
	flex-direction: column;
	z-index: 2;

	background-color: black;
	color: white;

	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 2.25em;
/*	font-weight: bold;*/
	text-align: center;

	top:0px;
	left:0px;

	width: 322px;
	height: 322px;

	margin: none;
	padding: none;

	overflow: hidden;
}

#widget > div {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#widget > div > div {
	flex-grow: 1;
	text-align: center;
}

.widget-config-display {
	border: 5px solid var(--colorBlueUnlit);
	float: right;
	transition: border-color 0.5s ease-out,
				box-shadow 0.5s ease-out;
}

.widget-config-display:hover {
	font-family: "Lucida Console", "Courier New", monospace;
	border: 5px solid var(--colorBlueLit);
	box-shadow: var(--configHighlight);
}

.widget-smoke-background {
	background: URL("./images/smok.gif");
	color: black !important;
}

.widget-smoke-background::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 255, 0, 0.2);
}

#configuration {
	position: relative;
	display: block;

	background-color: var(--colorBleen);
	color: black;

	font-family: Bookman, URW Bookman L, serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;

	height: 100%;

	margin: none;	
	padding: none;

}

.config-header {
	margin-top: 50px;
	position: relative;
	display: inline-block;
	float: center;
	font-size: 3em;
	color: var(--colorBleenDark);
	min-width: 350px;
}

.config-hr {
	background-color: var(--colorBlueUnlit);
	border-color: var(--colorBlueUnlit);
	width: calc(80% - 322px);
}

.config-settings-container {
	position: relative;
	color: var(--colorBlueLit);
	background-color: var(--colorBleenDark);
	display: inline-block;
	width: calc(80% - 322px);
	min-width: 350px;
	border: 2px solid var(--colorBlueUnlit);
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;

}

#config-form {
	text-align: left;
	font-size:1.5em;
	padding: 25px;
}

#config-form select {
	background-color: var(--colorBlueUnlit);
	color: var(--colorBlueLit);
	border: none;
	font-size: inherit;
	left: 0px;
	width: 200px;
	transition: color 0.5s ease-out,
				box-shadow 0.5s ease-out;
}

#config-form select option {
	background-color: var(--colorBlueUnlit);
}

#config-form input[type="button"] {
	background-color: var(--colorBlueUnlit);
	color: var(--colorBlueLit);
	border: none;
	font-size: inherit;
	transition: color 0.5s ease-out,
				box-shadow 0.5s ease-out;
}

#config-form input[type="checkbox"] {
	width: 25px;
	height: 25px;
}

#config-form input[type="color"] {

}

#config-form select:hover,
#config-form select:focus,
#config-form input[type="button"]:hover {
	color: white;
	box-shadow: var(--configHighlight);
}

#config-form > div {
	display: flex;
	flex-direction: row;
	box-shadow: none;
	text-align: center;
	justify-content: center;
	margin-top: 25px;
}

#config-form > div > div:first-child {
	flex-basis: 150px;
	text-align: right;
	margin-right: 25px;
}
#config-form > div > div:nth-child(2) {
	flex-grow: 3;
	text-align: left;
}

.config-disabled {
	color: var(--colorBlueUnlit);
}

.inactive {
	display: none !important;
}

#cpu1, #gpu1, #liq1 {
	font-size: 115%;
}

#cpu1-container {
	margin-top: var(--topPadding);
/*	animation: anim-pulsing-text-cpu 3s infinite;*/
/*	text-shadow: var(--flickerLightsCpu);*/
}

#gpu1-container {
	margin-top: var(--topPadding);
/*	animation: anim-pulsing-text-gpu 3s infinite;*/
/*	text-shadow: var(--flickerLightsGpu);	*/
}

#liq1-container {
	margin-bottom: var(--bottomPadding);
/*	animation: anim-pulsing-text-liq 3s infinite;*/
/*	text-shadow: var(--flickerLightsLiq);*/
}

.flicker-cpu {
	animation: anim-neon-flicker-cpu 5s infinite;
	animation-fill-mode: both;
}

.flicker-gpu {
	animation: anim-neon-flicker-gpu 5s infinite;
	animation-fill-mode: both;
/*	animation-delay: 5s;*/
}

.flicker-liq {
	animation: anim-neon-flicker-liq 5s infinite;
	animation-fill-mode: both;
/*	animation-delay:10s;*/
}

.pulsing-cpu {
	animation: anim-pulsing-text-cpu 3s infinite;
}

.pulsing-gpu {
	animation: anim-pulsing-text-gpu 3s infinite;
	animation-delay: 1s;
}

.pulsing-liq {
	animation: anim-pulsing-text-liq 3s infinite;
	animation-delay: 2s;
}
.neon-cpu {
	text-shadow: var(--flickerLightsGpu);
}
.neon-gpu {
	text-shadow: var(--flickerLightsGpu);
}
.neon-liq {
	text-shadow: var(--flickerLightsLiq);
}

@keyframes anim-neon-flicker-cpu {
	0%, 90%, 100% {
		text-shadow: var(--flickerLightsCpu);
	}
	95% {
		text-shadow: none;
	}
}

@keyframes anim-neon-flicker-gpu {
	0%, 90%, 100% {
		text-shadow: var(--flickerLightsGpu);
	}
	95% {
		text-shadow: none;
	}
}

@keyframes anim-neon-flicker-liq {
	0%, 90%, 100% {
		text-shadow: var(--flickerLightsLiq);
	}
	95% {
		text-shadow: none;
	}
}



@keyframes anim-pulsing-text-cpu {
	0%, 100% {
		color: var(--textFaded);
		text-shadow: none;
	}

	50% {
		color: white;
		text-shadow: var(--flickerLightsCpu);

	}

}

@keyframes anim-pulsing-text-gpu {
	0%, 100% {
		color: var(--textFaded);
		text-shadow: none;

	}

	50% {
		color: white;
		text-shadow: var(--flickerLightsGpu);

	}

}

@keyframes anim-pulsing-text-liq {
	0%, 100% {
		color: var(--textFaded);
		text-shadow: none;

	}

	50% {
		color: white;
		text-shadow: var(--flickerLightsLiq);

	}

}