/* legacy/unused code. used for reference */

html {
	background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,92,9,1) 0%, rgba(0,212,255,1) 100%);
}


img {
	max-width: 100%;
	height: auto;
}

body {
	margin: 0;
	font-family: Stencil Std, fantasy;
}

.topnav {
	overflow: hidden;
	background: rgb(238,174,202);
	background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

	.topnav a {
		float: left;
		display: block;
		color: #f2f2f2;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 30px;
	}

		.topnav a:hover {
			background-color: #ddd;
			color: black;
		}

		.topnav a.active {
			background: rgb(63,94,251);
			background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 60%);
			color: white;
		}

	.topnav .icon {
		display: none;
	}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {
		display: none;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 600px) {
	.topnav.responsive {
		position: relative;
	}

		.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}

		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
}

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	background-color: #2196F3;
	padding: 10px;
}

.grid-item {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.8);
	padding: 20px;
	font-size: 30px;
	text-align: center;
}