:root {
	--box-border: 2px solid;
	--main-color: #00e1ff;
	--active-color: white;
	--sparkle: url('./assets/tile.png');
}

@font-face {
	font-family: 'Glass TTY';
	src: url('./fonts/Glass_TTY_VT220.ttf') format('opentype');
}


body {
	background-color: black;
	color: var(--main-color);
	font-family: 'Glass TTY';
	font-size: 20px;
	cursor: crosshair;
	background-image: var(--sparkle);
	background-repeat: round;
}

#info-div {
	pointer-events: none;
}


h3,
h2 {
	text-align: center;
}


@keyframes increaseStatic {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.5;
	}
}

@keyframes decreaseStatic {
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

.more-static {
	animation: increaseStatic linear 3s 1;
}

.less-static {
	animation: decreaseStatic linear 3s 1;
}

.deadline {
	grid-area: deadline;
}

.settings {
	grid-area: settings;
}

.evidence {
	grid-area: evidence;
}

.system {
	grid-area: system;
}

.info {
	grid-area: info;
}

.zoom-in {
	grid-area: zoom-in;
}

.zoom-out {
	grid-area: zoom-out;
}

.enhance {
	grid-area: enhance;
}

.movement {
	grid-area: movement;
}

.listening {
	grid-area: listening;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

#settings-text {
	display: none;
}

.settings-item {
	margin: 35px;
}

.wrapper {
	position: relative;
	top: 50%;
	transform: perspective(1px) translateY(-50%);
	max-width: 80%;
	margin: auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 15% 14% 14% 14% 14% 14% 15%;
	grid-template-areas: 'deadline deadline system system system settings info' 'zoom-in zoom-in evidence evidence evidence evidence evidence' 'zoom-out zoom-out evidence evidence evidence evidence evidence' 'enhance enhance evidence evidence evidence evidence evidence' 'movement movement evidence evidence evidence evidence evidence' 'movement movement evidence evidence evidence evidence evidence' 'listening listening listening listening listening listening listening';
}



.blink {
	animation: blinker 1s linear infinite;
}

span {
	color: white;
}

#listening-content {
	text-align: right;
	margin-right: 20px;
}

.win-lose-state-text {
	font-size: 30px;
	text-align: center;
	display: none;
}

.grid {
	padding: 10px;
}

h3 {
	color: white;
}

.box {
	border: var(--box-border);
	border-color: var(--main-color);
	border-style: solid;
	font-size: 30px;
	text-align: center;
	height: 50px;
}

select {
	font-family: 'Glass TTY';
	border: var(--box-border);
	border-color: white;
	border-style: solid transparent;
	border-radius: 0;
	font-size: 30px;
	text-align: center;
	height: 50px;
	background-color: black;
	color: white;
}

.select-div {
	position: relative;
}

.clickable {
	position: relative;
	top: 0;
	margin-top: 0;
	margin-bottom: 5px;
	margin-right: 5px;
	border: var(--box-border);
	padding: 10px;
	box-shadow: 5px 5px white;
	font-size: 30px;
	text-align: center;
}

#static-img {
	opacity: 0.5;
	display: none;
	z-index: 1;
	position: absolute;
	/* width: 100%; */
	/* object-fit: fill; */
	/* height: 100%; */
}

#command-overlay {
	font-size: 30;
	display: none;
	z-index: 2;
	position: absolute;
}

#evidence-content {
	padding: 30px;
	display: block;
}

#photo-div {
	display: none;
	position: absolute;
}

strong {
	color: var(--main-color);
}

.movement-box {
	border: var(--box-border);
	border-color: var(--main-color);
	border-style: solid;
	font-size: 30px;
	text-align: center;
	height: 150px;
}

.logo {
	float: left;
	height: inherit;
	border-right: var(--box-border);
}

.content {
	position: relative;
	/* top: 55%; */
	transform: translateY(33%);
	vertical-align: middle;
}

.content marquee {
	color: white;
	transform: translateY(-205%);
	margin-left: 50px;
}

.movement-content {
	margin: 15px;
	display: flex;
	flex-direction: column;
}

.logo img {
	max-height: 100%;
}

a {
	color: var(--main-color);
	text-decoration: underline;
}

a:hover {
	color: white;
}

#evidence-box {
	color: white;
	font-size: 20px;
	text-align: justify;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 465px;
	z-index: 3;
}

#not-supported {
	display: none;
}


.loading {
	font-size: 40px;
	text-align: center;
}

#starting-text {
	display: none;
}

#icon {
	height: 42;
}

.clickable {
	position: relative;
	top: 0;
	margin-top: 0;
	margin-bottom: 5px;
	margin-right: 5px;
	border: var(--box-border);
	padding: 10px;
	box-shadow: 5px 5px white;
	font-size: 30px;
	text-align: center;
}

#music-content {
	width: 100px;
}

.clickable:active {
	box-shadow: none;
	top: 10px;
	margin-bottom: 0;
	margin-right: 0;
}

.clickable:hover {
	background-color: var(--main-color);
	color: black;
}

.clickable:active,
.clickable:focus {
	outline: 0;
}

#image-loading {
	display: none;
}

#information-text {
	display: none;
}