@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

/** 
Clear & Reset
**/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: none;
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
	position: fixed;
}

button {
	transition: background 250ms ease-in-out, transform 150ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: solid 1px #999;
	border-radius: 6px;
	background-color: #f7f7f7;
	cursor: pointer;
}

button.reset {
	background-color: #2557a7 !important;
	border: 0.0625rem solid transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	border-radius: 8px;
	padding: 1em;
	width: 50%;
	margin: 0 auto;
	font-size: large;
}

/**
Aesthetics
**/
.light-theme {
	--body-bg-color: white;
	--heading-primary: black;
	--heading-secondary: grey;
	--body-text-primary: black;
	--button-bg-primary: rgba(255, 255, 255, 0.4);
	--bytton-text-primary: black;
	--button-box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.2);
}

body.dynamic-colors {
	transition: background-color 4s ease;
}

/**
Layout
**/
body {
	transition: background-color 3s ease;
	display: grid;
}

header {
	display: flex;
	flex-direction: row;
	padding: 0.25em 0;
	justify-content: center;
	align-items: center;
}

header h1 {
	text-align: center;
	width: 35%;
	line-height: 1;
}

header button {
	width: 100%;
	padding: 0.5em 0;
	font-size: 24px;
	background-color: var(--button-bg-primary);
	box-shadow: var(--button-box-shadow);
	border: solid 1px rgba(255, 255, 255, 0.5);
}

.score-display {
	width: 25%;
	text-align: center;
}

.score-display p {
	font-size: 30px;
	font-weight: bold;
}

header .game-controls {
	width: 50%;
	padding: 1em;
}

main {
	flex: 1;
}

#canvas {
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
	cursor: crosshair;
	transition: background-color 0.5s ease;
}

aside {
	position: absolute;
	right: 0;
	height: 100vh;
	max-width: 300px;
	padding: 0 1em;
	/* background-color: var(--theme-aside-bg); */
	background-color: rgb(236 236 236 / 30%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	overflow-y: auto;
	transition: transform 0.3s ease;
	transform: translateX(100%);
	color: #333;
	box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
	display: none;
}

aside.show {
	display: block;
}

aside.isOpen {
	transform: translateX(0);
}

aside h2,
aside h3 {
	margin: 1em 0;
}

aside form {
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 30px;
	column-gap: 20px;
	margin: 2em 0;
}

aside form label {
	text-align: right;
}

aside form select {
}

aside .engine-stats {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 10%;
	grid-row-gap: 5%;
}

aside .stats-section {
	display: none;
}

aside .stats-section.isOpen {
	display: block;
}

aside .stats-section p {
	margin: 1em 0;
}

aside section {
	margin: 1em 0;
}

aside label {
}

footer {
	display: flex;
	padding: 1em;
	justify-content: space-between;
}

.icon-button {
	border: 0;
	background: none;
}

.icon {
	display: inline-block;
	height: 30px;
	width: 30px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 0;
}

.icon.settingsIcon {
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 160 160' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Crect id='Artboard1' x='0' y='0' width='160' height='160' style='fill:none;'/%3E%3Cg id='Artboard11' serif:id='Artboard1'%3E%3Cg transform='matrix(1.09556,0,0,1.09556,-7.64505,-7.64505)'%3E%3Cg transform='matrix(2.53063,0,0,2.53063,-62.9807,-34.961)'%3E%3Cg%3E%3Cg%3E%3Cg transform='matrix(1,0,0,0.285598,2,7.00407)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3Cg transform='matrix(-1,-1.11022e-16,2.77556e-17,-0.285598,111,83.8515)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(6.12323e-17,-1,1,6.12323e-17,11.0722,101.928)'%3E%3Cg transform='matrix(1,0,0,0.285598,2,7.00407)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3Cg transform='matrix(-1,-1.11022e-16,2.77556e-17,-0.285598,111,83.8515)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(0.707107,-0.707107,0.707107,0.707107,-15.5738,53.257)'%3E%3Cg%3E%3Cg transform='matrix(1,0,0,0.285598,2,7.00407)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3Cg transform='matrix(-1,-1.11022e-16,2.77556e-17,-0.285598,111,83.8515)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(6.12323e-17,-1,1,6.12323e-17,11.0722,101.928)'%3E%3Cg transform='matrix(1,0,0,0.285598,2,7.00407)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3Cg transform='matrix(-1,-1.11022e-16,2.77556e-17,-0.285598,111,83.8515)'%3E%3Cpath d='M57,35L52,35L49,62L60,62L57,35Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath d='M56.5,24C68.366,24 78,33.634 78,45.5C78,57.366 68.366,67 56.5,67C44.634,67 35,57.366 35,45.5C35,33.634 44.634,24 56.5,24ZM56.5,33.341C63.211,33.341 68.659,38.789 68.659,45.5C68.659,52.211 63.211,57.659 56.5,57.659C49.789,57.659 44.341,52.211 44.341,45.5C44.341,38.789 49.789,33.341 56.5,33.341Z' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3Ccircle cx='80' cy='80' r='21.844' style='fill:rgb(100,100,100);'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

@media (min-width: 576px) {
	header {
		justify-content: space-between;
	}
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

/**
Components
**/
/* Toggle Switch Technique Courtesy of: https://dev.to/dcodeyt/creating-a-css-only-toggle-switch-5cg3 */
.toggle {
	--width: 40px;
	--height: calc(var(--width) / 2);
	--border-radius: calc(var(--height) / 2);
	display: inline-block;
	cursor: pointer;
}

.toggle__input {
	display: none;
}
.toggle__fill {
	position: relative;
	width: var(--width);
	height: var(--height);
	border-radius: var(--border-radius);
	background: #dddddd;
	transition: background 0.2s;
}

.toggle__fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--height);
	width: var(--height);
	background: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	border-radius: var(--border-radius);
	transition: transform 0.2s;
}

.toggle__input:checked ~ .toggle__fill {
	background: #00ff35;
}

.toggle__input:checked ~ .toggle__fill::after {
	transform: translateX(var(--height));
}

/* Paused State Styling */
.game-paused #canvas {
	opacity: 0.3;
	background-color: #999;
	cursor: not-allowed;
	filter: saturate(0);
}

.game-paused header button {
}

#gameOver {
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	display: none;
	align-items: center;
}

#gameOver .message-box {
	height: 50vh;
	width: 50vw;
	margin: 0 auto;
	background-color: white;
	padding: 1em;
	box-shadow: 0px 0px 0.5em rgb(0 0 0 / 50%);
	border-radius: 35px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	justify-self: center;
}

#gameOver .message-box h3 {
	font-size: xxx-large;
	text-align: center;
}

#gameOver .message-box p {
	padding: 1em;
	text-align: center;
	font-size: x-large;
}

#gameOver .message-box button {
}

#gameOver.isShowing {
	display: flex;
}

#gameSpeedDisplay {
	display: none;
}

#gameSpeedDisplay.isShowing {
	display: block;
}