:root {
	--font-color: rgb(245, 245, 245);
	--background-color: rgb(15, 15, 20);
	--tile-size: 150px;
	--tile-border: 1px solid rgb(70, 70, 80);
	--tile-border-radius: 10px;
	--tile-background: rgba(40, 40, 50, 1.0);
}

body {
	font-size: 16px;
	font-weight: bolder;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
	color: var(--font-color);
}

h1 {
	font-size: 20px;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--tile-size) * 6);
}

.bingoboard {
	display: grid;
	margin: 0 auto;
	padding: 0;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 20% 20% 20% 20% 20%;
	width: calc(var(--tile-size) * 5);
	border: var(--tile-border);
	border-radius: 10px;
}
.bingoboard button:first-child { border-top-left-radius: var(--tile-border-radius); }
.bingoboard button:last-child { border-bottom-right-radius: var(--tile-border-radius); }
.bingoboard button:nth-child(5) { border-top-right-radius: var(--tile-border-radius); }
.bingoboard button:nth-child(21) { border-bottom-left-radius: var(--tile-border-radius); }



.bingoboard button {
	height: var(--tile-size);
	width: var(--tile-size);

	color: var(--font-color);
	border-radius: 0;
	border: var(--tile-border);
	background-color: var(--tile-background);
	padding: 1em;
}

.bingoboard button:not(#center):hover {
	border: 1px solid rgb(120, 70, 70);
	background-color: rgba(60, 40, 50, 1.0);
}

.bingoboard button:not(#center).happened {
	animation: itHappened 2s forwards;
}

.bingoboard button:not(#center).happened:hover {
	cursor: pointer;
	border: 1px solid rgb(80, 120, 70);
	background-color: rgba(50, 60, 50, 1.0);
	animation: none;
}


.bingoboard button:not(#center).confirmed {
	border: 1px solid rgb(80, 200, 80);
	background-color: rgb(60, 90, 60);
	&:hover {
		border: 1px solid rgb(80, 200, 80);
		background-color: rgb(60, 90, 60);
	}
}


#center {
	--angle: 0deg;
	background-color: rgba(50, 50, 60, 1.0);
	border: 1px solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
	animation: 3s rotate linear infinite;
}


#initialLoad {
	width: 100vw;
	height: 100vh;
	background: rgba(20, 20, 20, 0.8);
	position: absolute;
	display: flex;
	left: 0;
	top: 0;
	z-index: 99;
	align-items: center;
	justify-content: center;
}

#initialLoad span {
	letter-spacing: 1px;
	font-size: 30px;
	text-align: center;
	display: inline-block;
	position: relative;
	align-self: center;
	animation: loadingWave 1s infinite;
	animation-delay: calc(0.1s * var(--offset))
}

.disclaimer {
	padding-top: 1em;
	text-align: center;
	font-size: 10px;
}

@keyframes itHappened {
	0%, 100% {
		border: var(--tile-border);
		background-color: var(--tile-background);
	}
	50% {
		border-color: rgb(0, 162, 255);
		background-color: rgb(30, 52, 65);
	}
}


@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@keyframes loadingWave {
	0%,40%,100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-5px);
		color: rgb(0, 153, 255);
	}
}

@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@media only screen and (max-width: 768px){
	body {
		font-size: 8px;
	}
	
	.container {
		position: absolute;
		margin: auto;
		width: 100%;
		
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	.bingoboard {
		width: 98vw;
		height: 98vw;
	}
	
	.bingoboard button {
		width: 100%;
		height: 100%;
		padding: 2px;
	}
	
	.disclaimer {
		font-size: 6px;
	}
}