html
{
	font-family: sans-serif;
	box-sizing: border-box;
	font-size: 16px;
}

body
{
	margin: 0;
	padding: 0;

	h1,h2
	{
		background: darkgreen;
		color: palegoldenrod;
		padding: 1rem 0 0 0;
		margin: 0 auto;
		text-align: center;
	}

	h2
	{
		padding-bottom: 1rem;
	}

	button
	{
		border: solid 1px darkgreen;
		border-radius: 0.25rem 0.25rem;
		background: palegoldenrod;
		color: black;
		font-weight: bold;
		padding: 0.25em 0.5em;
	}

	main
	{
		width: 45rem;
		margin: 2rem auto;
	}

	section#generator
	{
		font-size: 1.5rem;

		label
		{
			display: block;

			input[type="checkbox"] 
			{
				margin-top: 1rem;
			}
		}

		button
		{
			font-size: 2rem;
		}

		input[type="text"]
		{
			font-size: 2rem;
			margin-top: 1rem;
			width: 35rem;
			font-family: monospace;
			height: 3rem;
			border: solid 1px goldenrod;
			border-radius: 0.25rem 0.25rem;
			float: left;
		}

		button#copy
		{
			margin-top: 1rem;
			float: right;
			margin-bottom: 1rem;
		}

		button#generate
		{
			display: block;
			margin: 1rem auto 0 auto;
		}

		#report
		{
			clear: both;
			background: palegreen;
			color: black;
			padding: 0 0 1rem 0;
			margin: 1rem auto;
			display: none;

			h3
			{
				margin: 0 0 1rem 0;
				padding: 0.5rem 1rem;
				background: darkgreen;
				color: palegoldenrod;
			}

			p
			{
				margin: 1rem;
			}

			.score
			{
				font-weight: bold;

				&[data-score='0'] { color: red; }
				&[data-score='1'] { color: maroon; }
				&[data-score='2'] { color: darkgoldenrod; }
				&[data-score='3'] { color: darkcyan; }
				&[data-score='4'] { color: darkgreen; }
			}
		}
	}

	section#checklist
	{
		clear: both;
		padding-top: 4rem;

		a
		{
			color: black;
		}
	}

	aside#scary
	{
		button
		{
			position: absolute;
			top: 1rem;
			right: 2rem;
			font-size: 1rem;
		}

		iframe
		{
			display: none;
			width: 100vw; 
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}