main.scss

@font-face
{
	font-family: 'Press Start 2P';
	src: url('PressStart2P-Regular.ttf'); // IE9 compat
	src: url('PressStart2P-Regular.ttf') format('truetype'); // Safari, Android, IOS
}

$gameboyscreencolor: #002e5b;
$gameboybodycolor: #7eebae;
$gameboybodyaccentcolor: #54ad7c;
$backgroundcolor: #022241;

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body
{
	height: 100vh;
	background-color: $backgroundcolor;
	color: $gameboybodycolor;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Press Start 2P', cursive;
	text-transform: lowercase;
	font-variant: small-caps;
}

#gameboy
{
	background-color: $gameboybodycolor;
	color: $gameboyscreencolor;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	display: flex;
	flex-direction: column;

	#screen-container
	{
		width: 100%;
		height: 50%;
		min-height: 50%;
		padding: 1rem;

		#screen
		{
			background-color: $gameboyscreencolor;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 1rem;
			border-radius: 5px;
			box-shadow: inset 0 0 20px rgba(0, 0, 0, .7);

			h1
			{
				color: $gameboybodycolor;
				font-size: 1.2rem;
				line-height: 3rem;
				text-align: center;
				white-space: pre;
				text-shadow: 0 2px $gameboybodyaccentcolor;
				text-transform: none;
				font-variant: normal;
			}

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

	.text-container
	{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#buttons
	{
		margin-top: 4rem;

		.button-row
		{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 1rem;

			.text-container
			{
				margin: 0 .7rem;
			}

			.button
			{
				background-color: $gameboyscreencolor;
				$size: 45px;
				width: $size;
				height: $size;
				border-radius: 50%;
			}

			#generatebutton
			{
				margin-right: 4.5rem;
			}
		}
	}

	#inputs
	{
		padding: 0 2rem;

		.slider-row
		{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 1.2rem;

			p
			{
				color: $gameboybodyaccentcolor;
				font-size: 1.1rem;
				display: inline;
				white-space: pre;
			}

			.output
			{
				min-width: 6ch;
				color: $gameboyscreencolor;
				margin-left: 1rem;
				font-size: .8rem;
			}

			.slider
			{
				$thumbsize: 15px;

				background-color: $gameboybodyaccentcolor;
				width: 80px;
				height: 8px;
				-webkit-appearance: none;
				appearance: none;
				border-radius: 10px;

				&::-webkit-slider-thumb
				{
					background-color: $gameboyscreencolor;
					width: $thumbsize;
					height: $thumbsize;
					-webkit-appearance: none;
					appearance: none;
					border-radius: 50%;
				}

				&::-moz-range-thumb
				{
					background-color: $gameboyscreencolor;
					width: $thumbsize;
					height: $thumbsize;
				}
			}
		}
	}
}

@media (min-width: 576px) // landscape phones
{
	// TODO
}

@media (min-width: 768px) // tablets
{
	#gameboy
	{
		width: 450px;
		height: 740px;
		border-radius: 15px;
		box-shadow: 12px 12px 0 12px $gameboybodyaccentcolor;

		#screen-container
		{
			padding: 1.5rem;

			#screen
			{
				padding: 2rem;

				h1
				{
					font-size: 1.5rem;
					line-height: 4rem;
				}
			}
		}

		#buttons
		{
			margin-top: 3rem;

			.button-row
			{
				font-size: 1.25rem;
				padding: 0 2rem;

				.button
				{
					$size: 51px;
					width: $size;
					height: $size;
				}

				#generatebutton
				{
					margin-right: 5.9rem;
				}
			}
		}

		#inputs
		{
			margin-top: 2rem;

			.slider-row
			{
				p
				{
					font-size: 1.1rem;
				}

				.output
				{
					font-size: 1rem;
				}

				.slider
				{
					width: 120px;
				}
			}
		}
	}
}

@media (min-width: 992px) // landscape tablets / desktops
{
	#gameboy
	{
		width: 400px;
		height: 650px;

		#screen-container
		{
			#screen
			{
				h1
				{
					font-size: 1.3rem;
					line-height: 3.5rem;
				}
			}
		}

		#buttons
		{
			margin-top: 2rem;

			.button-row
			{
				font-size: 1.2rem;

				#generatebutton
				{
					margin-right: 5.5rem;
				}
			}
		}

		#inputs
		{
			margin-top: 1.3rem;
		}
	}
}

@media (min-width: 1200px) // desktops
{

}