@charset "utf-8";
/*
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=- DESIGNED AND BUILT =-=-=-=-
-=-=-=-=- ENTIRELY BY HAND =-=-=-=-=
=-=-=-=-= AND JUST FOR YOU -=-=-=-=-
-=-=-=-=-=-= IN BEAUTIFUL -=-=-=-=-=
=-=-=-= BRISTOL RHODE ISLAND -=-=-=-
-=-=-=-=-  BY IAN BESLER =-=-=-=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

body {
		margin: 10vh auto 0 auto;
	}

	h1,h2 {
		font-family: sans-serif;
		font-size: 12pt;
		text-align: right;
		margin: 2pt 0 0 0;
	}

	h2 {
		font-weight: normal;
	}

	main {
		max-width: 80vw;
		max-height: 80vh;
		aspect-ratio: 1/1;
		margin: auto;
	}

	header {
		max-width: 80vw;
		max-height: 10vh;
		aspect-ratio: 8/1;
		margin: auto;
	}

	.steelblue {
		background-color: steelblue;
	}

		.steelblue:hover {
			background-color: goldenrod;
		}

	.khaki {
		background-color: khaki;
	}

		.khaki:hover {
			background-color: steelblue;
		}

	.firebrick {
		background-color: firebrick;
	}

		.firebrick:hover {
			background-color: khaki;
		}

	.cornsilk {
		background-color: cornsilk;
	}

		.cornsilk:hover {
			background-color: firebrick;
		}

	.black {
		background-color: rgb(55,50,50);
	}

		.black:hover {
			background-color: cornsilk;
		}

	.goldenrod {
		background-color: goldenrod;
	}

		.goldenrod:hover {
			background-color: rgb(55,50,50);
		}

		section:hover,article:hover {
			transition: background-color 1s,transform 0.2s;
			transform: scale(1.2,2);
		}

	section,article {
		transition: transform 1s;
		
	}

	section {
		width: 100%;
		height: 7%;
	}

	article {
		float: left;
		height: 100%;
	}

	.square {
		width: 6.9%;
	}

	.rectangle {
		width: 79%;
	}

	a:link		{color: #00f;}
	a:visited	{color: #f0f;}
	a:hover		{color: #000;background-color: #ff0;}
	a:active	{color: #f00;background-color: #f0f;}