body {
	background-color: #0d0d0d;
}

.title {
	color: #fffaea;

	margin-top: 22vh;

	text-align: center;
	font-size: 3.125em;
	font-family: 'Josefin Sans', sans-serif;
}

#error_message {
	color: lightcoral;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	font-size: 1em;
}

#name_field {
	background-color: #fffaea;

	margin: 0 auto;

	padding-top: 1.25vh;
	padding-left: 0.55vw;
	padding-bottom: 1.25vh;

	border: none;
	display: block;
	border-radius: 0.125em;

	width: 10.5vw;
	min-width: 215px;

	font-family: 'Josefin Sans', sans-serif;
	font-size: 1em;
}

#create_room_button {
	background-color: #fffaea;

	margin: 0 auto;
	display: block;

	padding-top: 1.5vh;
	padding-bottom: 1.5vh;
	padding-left: 1.5vw;
	padding-right: 1.5vw;

	border: none;
	border-style: none;
	border-radius: 0.125em;

	width: 10.5vw;
	min-width: 125px;

	text-decoration: none;
	text-align: center;
	font-size: 1em;
	font-family: 'Josefin Sans', sans-serif;
}

#join_room_button {
	background-color: #fffaea;

	margin: 0 auto;
	display: block;

	padding-top: 1.5vh;
	padding-bottom: 1.5vh;
	padding-left: 1.5vw;
	padding-right: 1.5vw;

	width: 10.5vw;
	min-width: 125px;

	border: none;
	border-style: none;
	border-radius: 0.125em;

	text-decoration: none;
	text-align: center;
	font-size: 1em;
	font-family: 'Josefin Sans', sans-serif;
}

#button_rules {
	background-color: #fffaea;

	margin-left: 0.15vw;
	margin-top: 0.5vh;
	display: block;

	padding-top: 1.25vh;
	padding-bottom: 1.25vh;

	width: 7vw;
	min-width: 125px;
	border-radius: 0.125em;

	border: none;
	border-style: none;

	text-decoration: none;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1em;
}

.footer {
	color: #fffaea;
	text-align: center;
	width: 99%;
	position: absolute;
	bottom: 1vh;
	font-family: 'Josefin Sans', sans-serif;
	overflow-x: hidden;
	font-size: 1em;
}

#git_image {
	height: 2vh;
	width: 2vh;
	vertical-align: middle;
}

#footer_text {
	display: inline-block;
}

table {
	margin: auto;
	bottom: 0;
	font-size: 0.8em;
}

/*
    For any screen that has a maximum screen width of 720px, display the mobile website
*/
@media only screen and (max-device-width: 480px) {
	body {
		background-color: #0d0d0d;
	}

	.title {
		color: #fffaea;

		margin-top: 22vh;

		text-align: center;
		font-family: 'Josefin Sans', sans-serif;
		font-size: 3em;
	}

	#name_field {
		background-color: #fffaea;

		margin: 0 auto;
		display: block;

		padding-right: 4vw;
		padding-left: 2vw;
		padding-top: 4vw;
		padding-bottom: 4vw;

		width: 75vw;

		border: none;
		border-radius: 0.125em;

		font-family: 'Josefin Sans', sans-serif;
		font-size: 1.5em;
	}

	#create_room_button {
		background-color: #fffaea;

		margin: 0 auto;
		display: block;

		padding-top: 4vw;
		padding-bottom: 4vw;

		width: 70vw;

		border: none;
		border-style: none;
		border-radius: 0.125em;

		text-decoration: none;
		text-align: center;
		font-family: 'Josefin Sans', sans-serif;
		font-size: 2em;
	}

	#join_room_button {
		background-color: #fffaea;

		margin: 0 auto;
		display: block;

		padding-top: 4vw;
		padding-bottom: 4vw;

		width: 70vw;

		border: none;
		border-style: none;
		border-radius: 0.125em;

		text-decoration: none;
		text-align: center;
		font-family: 'Josefin Sans', sans-serif;
		font-size: 2em;
	}

	#button_rules {
		background-color: #fffaea;

		margin-left: 0.15vw;
		margin-top: 0.5vh;
		display: block;

		padding-top: 4vw;
		padding-bottom: 4vw;

		width: 30vw;

		border: none;
		border-style: none;
		border-radius: 0.25em;

		text-decoration: none;
		font-family: 'Josefin Sans', sans-serif;
		font-size: 1em;
	}

	.footer {
		color: #fffaea;
		text-align: center;
		width: 100%;
		position: absolute;
		bottom: 0;
		font-family: 'Josefin Sans', sans-serif;
	}

	table {
		margin-left: auto;
		margin-right: auto;
		bottom: 0;
		font-size: 0.8em;
	}

	#overlay input {
		width: 42vw;
	}

	.footer {
		all: none;
		width: 10vw;
		position: fixed;
		margin-bottom: 3vw;
		right: 1vw;
	}

	#footer_text {
		display: none;
	}
	#git_image {
		all: none;
		height: 5vw;
		width: 5vw;
	}
}