/* BASE STYLES */
	:root {
		--stretch: 3;
		--primary: hsl(0, 100%, 50%);
		--complement: hsl(180, 100%, 50%);
		--dark: hsl(0, 100%, 25%);
		--light: hsl(0, 100%, 75%);
	}
	@font-face {
		font-family: "Anthony";
		src: url("assets/fonts/Anthony.woff2");
	}
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-family: 'Anthony', serif;
		text-transform: uppercase;
		text-align: center;
		line-height: 1em;
	}
	body {
		background: var(--dark);
		color: var(--dark);
		transform: translateZ(0);
		width: 100vw;
		height: 100dvh;
	}
	.main {
		position: relative;
		transform: translateZ(0);
		width: 100vw;
		height: 100dvh;
	}

/* MAIN CONTAINER */
	.container {
		width: 100vw;
		height: 100dvh;
		overflow: hidden;
		position: fixed;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: repeat(10, 1fr);
		transition: grid-template-columns 1s, grid-template-rows 1s;
	}
	.container div {
		background-size: 100%;
		background-position: 50%;
		transition: 1s;
	}

/* INTRO */
	.intro {
		position: fixed;
		overflow: hidden;
		z-index: 1;
		width: 100vw;
		height: 100dvh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 20px;
	}
	h1 {
		font-size: 5vw;
		text-shadow: 0 0 20px var(--primary), 0 0 20px var(--primary), 0 0 20px var(--primary);
		color: var(--primary);
		pointer-events: none;
	}
	h1 span {
		display: inline-block;
		animation-name: h1-stretch;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		transform-origin: center;
		padding: 1em;
	}
	@keyframes h1-stretch {
		0% {
			transform: scale(1, 1);
		}
		20% {
			transform: scale(1, var(--stretch));
		}
		40% {
			transform: scale(1, 1);
		}
		60% {
			transform: scale(var(--stretch), 1);
		}
		100% {
			transform: scale(1, 1);
		}
	}
	.intro p {
		color: var(--complement);
	}
	.intro p a {
		color: var(--complement);
	}
	.intro p a:hover {
		text-decoration: none;
	}
	@keyframes intro-hide {
		0% {
			opacity: 1;
			filter: blur(0);
		}
		99% {
			opacity: 0;
			filter: blur(100px);
		}
		100% {
			display: none;
			opacity: 0;
			filter: blur(100px);
		}
	}
	.intro-hide {
		pointer-events: none;
		animation-name: intro-hide;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}

/* FLOATING BUTTONS */
	.floating-btn {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		position: fixed;
		bottom: 30px;
		background: var(--complement);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 99;
		transition: .2s;
		color: var(--light);
		font-size: 30px;
		box-shadow: 0 0 40px var(--complement), 0 0 20px var(--complement), 0 0 10px var(--complement);
		font-family: Arial, Helvetica, sans-serif;
	}
	#screenshot {
		right: 160px;
	}
	#pause {
		right: 30px;
	}
	.floating-btn:hover {
		transform: scale(1.1);
	}
	.floating-btn:active{
		transform: scale(.8);
	}
	.btn-hide {
		transform: scale(0) !important;
	}
	#notice {
		position: fixed;
		top: 0;
		left: 0;
		font-size: 5vw;
		z-index: 999999;
		color: var(--primary);
		background-color: rgba(0,0,0,.5);
		width: 100vw;
		height: 100dvh;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		pointer-events: none;
		opacity: 0;
		filter: blur(100px);
		transition: .5s;
	}
	#notice p {
		max-width: 800px;
	}

/* CONTROLS */

	/* MENU STYLING */
		.controls-container {
			position: absolute;
			transform: translateX(calc(-100% + 40px));
			transition: transform .5s;
			z-index: 999;
			display: flex;
			align-items: center;
			left: 0;
			top: 0;
			height: 100dvh;
		}
		.controls-container:hover {
			transform: translateX(0%);
		}
		.controls-container:hover .controls-heading {
			opacity: 0;
		}
		.controls-heading {
			display: flex;
			align-items: center;
			justify-content: center;
			order: 2;
			width: 20px;
			transform-origin: center;
			transition: opacity .2s;
		}
		.controls-heading h2 {
			transform: rotateZ(90deg);
			color: var(--complement);
		}
		.controls {
			display: flex;
			height: 100%;
			width: 400px;
			background-color: var(--primary);
			padding: 40px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 40px 0 40px var(--primary), 20px 0 20px var(--primary), 5px 0 5px var(--primary);
			border-radius: 0 20px 20px 0;
			font-size: 20px;
			overflow-y: scroll;
		}
		.controls > div {
			flex-grow: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			gap: 5px;
			transition: color .2s;
			align-self: flex-start;
		}
		.controls div:hover {
			color: var(--light);
		}
		.controls-hide {
			transform: translateX(-150%);
		}

	/* FILE SELECT */
		.controls div:hover input::file-selector-button {
			border: 1px solid var(--primary);
			color: var(--primary);
		}
		.controls div:hover input[type=submit] {
			border: 1px solid var(--primary);
			color: var(--primary);
		}
		input::file-selector-button {
			color: var(--dark);
			background: var(--light);
			align-items: center;
			justify-content: center;
			font-family: 'Anthony', serif;
			border: 1px solid var(--dark);
			height: 22px;
			border-radius: 16px;
			cursor: pointer;
			text-transform: uppercase;
			transition: .2s;
			margin-right: 10px;
			padding: 0 20px;
		}
		input::file-selector-button:hover {
			color: var(--light);
			background: var(--dark);
			border: 1px solid var(--light);
		}
		input[type=submit] {
			color: var(--dark);
			background: var(--light);
			align-items: center;
			justify-content: center;
			font-family: 'Anthony', serif;
			border: 1px solid var(--dark);
			height: 22px;
			border-radius: 16px;
			cursor: pointer;
			text-transform: uppercase;
			transition: .2s;
			padding: 0 20px;
		}
		input[type=submit]:hover {
			color: var(--light);
			background: var(--dark);
			border: 1px solid var(--light);
		}

	/* DROPDOWNS */
		.dropdown {
			flex-grow: 1;
			height: 22px;
			border-radius: 11px;
			background: var(--light);
			border: 1px solid var(--dark);
			transition: .2s;
			cursor: pointer;
		}
		.controls div:hover .dropdown {
			border: 1px solid var(--light);
			color: var(--primary);
		}
		.dropdown:hover {
			background: var(--dark);
			color: var(--light);
		}
		select {
			width: 100%;
		}

	/* CHECKBOXES */
		.controls div:hover .checkbox-custom {
			border: 1px solid var(--light);
		}
		.checkbox-container {
			display: flex;
			cursor: pointer;
			justify-content: center;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.checkbox {
			opacity: 0;
			cursor: pointer;
			height: 0px;
			width: 0px;
		}
		.checkbox-custom {
			height: 20px;
			width: 20px;
			border: 1px solid var(--dark);
			border-radius: 10px;
			transition: .2s;
		}
		.checkbox:hover~.checkbox-custom {
			background-color: var(--dark);
		}
		.checkbox:checked~.checkbox-custom {
			background-color: var(--dark);
		}

	/* SLIDERS */
		.controls div:hover .slider {
			border: 1px solid var(--light);
		}
		.controls div:hover .slider::-webkit-slider-thumb {
			background: var(--primary);
		}
		.controls div:hover .slider::-moz-range-thumb {
			background: var(--primary);
		}
		.slider {
			cursor: pointer;
			width: 100%;
			-webkit-appearance: none;
			-webkit-transition: .2s;
			border: 1px solid var(--dark);
			border-radius: 12px;
			background: var(--light);
		}
		.slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 20px;
			height: 20px;
			background: var(--dark);
			border-radius: 100%;
			cursor: pointer;
			transition: .2s;
		}
		.slider::-moz-range-thumb {
			width: 20px;
			height: 20px;
			background: var(--dark);
			border-radius: 100%;
			cursor: pointer;
			transition: .2s;
		}
		.slider:hover {
			background: var(--dark);
		}
		.slider:hover::-webkit-slider-thumb {
			background: var(--light) !important;
		}
		.slider:hover::-moz-range-thumb {
			background: var(--light) !important;
		}

	/* BUTTONS */
		#buttons {
			gap: 20px;
		}
		#buttons button {
			border: 1px solid var(--dark);
			color: var(--dark);
			border-radius: 40px;
			padding: 6px 10px 10px 10px;
			font-size: 20px;
			font-weight: bold;
			background-color: var(--light);
			transition: .2s;
			cursor: pointer;
			height: 40px;
			align-self: center;
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
		}
		#buttons button:hover {
			border: 1px solid var(--light);
			background-color: var(--dark);
			color: var(--light);
			transform: scale(1.1);
		}
		#buttons button:active {
			opacity: .5;
		}
		#generate {
			background-color: var(--complement) !important;
		}

/* MOBILE STYLES */
		@media screen and (max-width: 500px) {
			.controls {
				width: 80vw;
				font-size: 14px;
			}
			#buttons button {
				font-size: 14px
			}
			.intro {
				padding: 40px 40px 40px 120px;
				font-size: 12px;
			}
			.intro h1 {
				font-size: 3vw;
			}
			.floating-btn {
				width: 60px;
				height: 60px;
			}
			#screenshot {
				right: 120px;
			}
		}