@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:slnt,wght@-6,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Patrick+Hand&display=swap');

:root {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	--box-size: 2.7rem;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.6rem;
	background-color: #303030;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.main {
	background-color: #505050;
	margin: 0rem 4rem 2rem 4rem;
	width: 90vw;
	min-height: 90vh;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--box-size), 1fr));
	grid-auto-rows: var(--box-size);
}

.checkbox {
	border: 0.3px solid #303030;
	transition: background-color 0.1s ease;	
}

.checkbox:active {
	scale: 0.98;
	background-color: #454545;
}
.checkbox.toggled {
	background-color: #707070;
}

.skeleton {
	background: linear-gradient(90deg, #404040 25%, #4a4a4a 50%, #404040 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.head {
	font-family: "Bitcount Grid Double", monospace;
	color: #a0a0a0;
	font-size: 2rem;
	letter-spacing: 0.1em;
	margin-top: 1rem;
	margin-bottom: 1rem;;
}