*
{
	box-sizing: border-box;
	user-select: none;
}

img
{
	max-width: 100%;
}

html
{
	margin: 0;
	padding: 0;
	background: url(background_2.png), url(background_1.png), url(background_0.png), linear-gradient(0deg, rgba(29,0,62,1) 0%, rgba(0,74,106,1) 50%, rgba(85,0,117,1) 100%);
	background-attachment: fixed;
	font-family: main;
	color: #ffffff;
	width: 100%;
	animation: background 20s linear infinite;
}

body
{
	display: flex;
	flex-direction: column;
	background: transparent;
	padding: 0;
	margin: 0;
	width: 100%;
}

div.title
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

div.title > a
{
	color: inherit;
	text-decoration: none;
	font-size: 8vw;
	font-family: title;
	text-align: center;
	text-shadow: 0 0 3vw #ffecad;
	margin: 4vw 0 4vw 0;
	padding: 0;
}

div.title > a:visited
{
	color: inherit;
}

div.score
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

div.score > p
{
	font-size: 4vw;
	text-align: center;
	text-shadow: 0 0 3vw #ffde71;
	margin: 0 0 4vw 0;
	padding: 0;
}

div.bingo
{
	pointer-events: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: space-evenly;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

div.points > input[type=checkbox], div.bonus > input[type=checkbox]
{
	pointer-events: auto;
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
}

div.points > div > p, div.bonus > div > p
{
	font-size: 2.5vw;
	text-align: center;
	margin: 0 1vw 0 1vw;
	padding: 0;
}

div.points
{
	position: relative;
	width: 22vw;
	height: 22vw;
	margin: 1vw 0 1vw 0;
	padding: 0;
}

div.points > div
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 1.5vw rgba(187,27,27,1);
	background: linear-gradient(45deg, rgba(55,0,0,1) 0%, rgba(187,27,27,1) 100%);
	border-radius: 2vw;
	transition: all 0.2s ease;
}

div.points > input[type=checkbox]:hover + div
{
	filter: brightness(1.3);
	transition: all 0.2s ease;
}

div.points > input[type=checkbox]:checked + div
{
	background: linear-gradient(45deg, rgba(0,55,2,1) 0%, rgba(27,187,43,1) 100%);
	box-shadow: 0 0 1.5vw rgba(27,187,43,1);
	transform: rotate(360deg);
	transition: all 0.2s ease;
}

div.bonus
{
	position: relative;
	width: 90%;
}

div.bonus > input[type="checkbox"]:disabled
{
	pointer-events: none;
}

div.bonus > div
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0.5vw;
	border: solid;
	border-width: 0.5vw;
	border-color: transparent;
	border-radius: 1.5vw;
	transition: all 0.2s ease;
}

div.bonus > input[type=checkbox]:hover + div
{
	border-color: #ffde7132;
	transition: all 0.2s ease;
}

div.bonus > input[type=checkbox]:checked + div
{
	border-color: #ffde71;
	transition: all 0.2s ease;
}

@keyframes background
{
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 256px 256px, 256px 512px, 256px 1024px, 0 0; }
}

@font-face
{
	font-family: "main";
	src: url("main.ttf");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "title";
	src: url("title.ttf");
	font-weight: normal;
	font-style: normal;
}