envious-mouse/Static/title-screen.html

<style type="text/css">
	#title-screen h1 {
		font-family: sans-serif;
		font-weight: normal;
		font-size: 4em;
	}

	#title-screen button.primary {
		width: 200px;
		height: 160px;
		font-size: 2em;
		background-color: transparent;
		border: 4px solid white;
		border-radius: 16px;
		color: white;
		transition: all 0.2s ease-in-out;
		margin: 4px;
	}
	#title-screen button.primary:hover {
		background-color: white;
		color: black;
		cursor: pointer;
	}

	#title-screen button.secondary {
		width: 100px;
		height: 80px;
		font-size: 1.5em;
		background-color: transparent;
		border: 4px solid white;
		border-radius: 8px;
		color: white;
		transition: all 0.2s ease-in-out;
		margin: 4px;
	}
	#title-screen button.secondary:hover {
		background-color: white;
		color: black;
		cursor: pointer;
	}

	#title-screen {
		font-family: sans-serif;
		color: white;
		text-align: center;
		width: 50%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 12%;
	}

	@media (max-width: 320px) { 
		#title-screen {
			padding-top: 20px;
		}
	}
</style>
<div id="title-screen">
	<h1>Envious Mouse</h1>
	<button class="primary" id="play-button">Play</button><br />
	<button class="secondary" id="credits-button">Credits</button>
</div>