*
{
	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 > p
{
	font-size: 8vw;
	font-family: title;
	text-align: center;
	text-shadow: 0 0 3vw #ffecad;
	margin: 4vw 0 4vw 0;
	padding: 0;
}

div.choice
{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: space-evenly;
	flex-wrap: wrap;
}

div.choice > a, div.choice > a:visited
{
	width: 25vw;
	height: 15vw;
	margin: 2vw;
	padding: 0;
	font-size: 8vw;
	line-height: 15vw;
	text-align: center;
	color: inherit;
	text-decoration: none;
	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: filter 0.3s ease;
}

div.choice > a:hover
{
	filter: brightness(1.3);
	transition: filter 0.3s 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;
}