ticket-to-earth/Static/mainmenu.html

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

	#main-menu button {
		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;
	}
	#main-menu button:hover {
		background-color: white;
		color: black;
		cursor: pointer;
	}
	#main-menu {
		font-family: sans-serif;
		color: white;
		text-align: center;
		width: 50%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 12%;
	}

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

	#level-select button {
		width: 50px;
		height: 50px;
		font-size: 1.5em;
		background-color: transparent;
		border: 2px solid white;
		border-radius: 8px;
		color: white;
		transition: all 0.2s ease-in-out;
		margin: 0.5em 0.5em;
	}

	#level-select button:hover {
		background-color: white;
		color: black;
		cursor: pointer;
	}

	@media (max-width: 320px) { 
		#main-menu {
			padding-top: 20px;
		}

		#level-select {
			padding-top: 20px;
		}
	}
</style>
<div id="main-menu">
	<h1>Tilegrid Rogue</h1>
	<button id="play-button">Play</button>
</div>
<div id="level-select">
	<h1>Level Select</h1>
	<button data-level='1'>1</button>
	<button data-level='2'>2</button>
	<button data-level='3'>3</button>
	<button data-level='4'>4</button>
	<button data-level='5'>5</button>
	<button data-level='6'>6</button>
	<button data-level='7'>7</button>
	<button data-level='8'>8</button>
	<button data-level='9'>9</button>
	<button data-level='10'>10</button>
	<button data-level='11'>11</button>
	<button data-level='12'>12</button>
	<button data-level='13'>13</button>
	<button data-level='14'>14</button>
	<button data-level='15'>15</button>
	<button data-level='16'>16</button>
	<button data-level='17'>17</button>
	<button data-level='18'>18</button>
	<button data-level='19'>19</button>
	<button data-level='20'>20</button>
</div>