@font-face { font-family: 'Equestria'; src: url('fonts/Equestria.ttf') format('truetype'); }

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: url(images/background.webp) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
}

#titleImage {
	display: block;
	width: 200px;
	margin-left: auto;
	margin-right: auto;

	border-radius: 50%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#title {
	display: block;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 40px;
	
	text-align: center;
	vertical-align: middle;
	
	font-family: Equestria;
	font-size: 72pt;
	color: #9ED9F7;
	text-shadow: 1px 1px #000000;
}

#wrapper {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.button {
	display: inline-block;
	vertical-align: top;
	width: 420px;
	height: 120px;
	margin: 0.5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	text-decoration: none;
}

.button:hover {
	transform: scale(1.05);
}

.buttonText {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-family: Equestria;
	font-size: 32pt;
	color: black;

	word-wrap: break-word;
}

.subtitle {
	display: inline-block;
	width: 100%;
	margin: 0.5%;
	
	text-align: center;
	vertical-align: middle;
	
	font-family: "Courier New";
	font-size: 38pt;
	color: #9ED9F7;
	text-shadow: 1px 1px #000000;
}

.red {
	background-color: #EE4035;
}

.orange {
	background-color: #F37737;
}

.yellow {
	background-color: #F9E97A;
}

.green {
	background-color: #7AC043;
}

.blue {
	background-color: #9ED9F7;
}

.gray {
	background-color: #A6A6A6;
}