/* General Page Styling */

:root {
		--windowvh: 100vw;
		--windowvw: 100vh;
		--windowvmin: 100vmin;
		--windowvmax: 100vmax;
		--basefontfamily: "Arial", sans-serif;
		--basefontsize: p( var(--windowvmin) * 0.17px);
		--imagesize: 20px;
		--sumimagesize: calc( 5 * var(--imagesize) * 2);
		--sumfontsize: calc( 6 * var(--basefontsize) );
		--sumwindowvh: calc( var(--sumimagesize) + var(--sumfontsize) );
		--padding: calc( var(--windowvh) / var(--sumwindowvh) );
}

.active {
	color: rgba(0,255,0,1.0);
}

body {
	font-family: var(--basefontfamily);
	font-size: var(--basefontsize);
	text-align: center;
	background-color: rgba(245,245,245,1.0);
	display: flex;
	justify-content: flex-end; /* Push everything to the right */
	align-items: center;
	min-height: 100vh;
	margin: 0;
	overflow: hidden;
}

.fancytext {
	color: white; /* White text */
	text-shadow: 
		-1px -1px 0 rgba(0,0,0,0.8),	
		1px -1px 0 rgba(0,0,0,0.8), 
		-1px 1px 0	rgba(0,0,0,0.8),	
		1px 1px 0	rgba(0,0,0,0.8); /* Creates a black outline */
	font-weight: bold; /* Optional: Makes the text more readable */
}

interface-container {
	font-family: var(--basefontfamily);
	font-size: var(--basefontsize);
	text-align: center;
}

img {
	height: var(--imagesize);
	width: auto;
}

h1 {
	font-family: var(--basefontfamily);
	font-size: var(--basefontsize);
	text-align: center;
}

.grid {
	min-width: 100vw;
	display: flex;
	flex-direction: column;
	gap: var(--padding); /* Spacing between rows */
}

.row {
	display: flex;
	gap: var(--padding); /* Spacing between columns */
}

.cell {
	flex: 1; /* Makes each cell take up equal width */
	padding: var(--padding);
	border: 1px solid #ccc;
	text-align: center;
}

.illustration {
	background-size: 100% 100%;
}