style.css

/* https://goo.gl/wLpCv5 */
li a, .button {
	transition: all .7s;
}
p, a, h1, h3, .button {
	font-family: sans-serif
}

h1 {
	font-size: 42px
}

a {
	color: #fff;
	text-decoration: none
}

.license-text, .license-button, .button, ul a, a {
	text-shadow: 0 0 4px #d3d3d3,0 0 4px #d3d3d3
}

p {
	font-size: 22px
}

canvas {
	background-color: #fff;
	border: 1px solid #000;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
	display: inline-block;
	vertical-align: top
}

ul {
	border: solid;
	border-color: #fff;
	border-radius: 5px;
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0
}

ul, .dropdown-content {
	box-shadow: 0 0 10px 0 #D3D3D3
}

li {
	float: left
}

	li a, .dropbtn {
		color: #fff;
		display: inline-block;
		padding: 8px 10px;
		text-align: center;
		text-decoration: none
	}

	li.dropdown {
		display: inline-block
	}

.dropdown-content {
	border: solid;
	border-radius: 4px;
	display: none;
	min-width: 160px;
	position: absolute;
	z-index: 1
}

	.dropdown-content a {
		display: block;
		padding: 12px 16px;
		text-align: left;
		text-decoration: none
	}

.dropdown:hover .dropdown-content {
	display: block
}

ul, button, .dropdown-content {
	background-color: rgba(0,0,0,0.3)
}

li a:hover {
	background-color: #a9a9a9
}

footer {
	bottom: 5px;
	position: absolute;
	width: 98.8%
}

.button {
	border: solid 2px;
	border-color: #faebd7;
	border-radius: 40px;
	box-shadow: 0 0 10px 0 #D3D3D3;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	margin: 5px;
	padding: 8px;
	text-align: center;
	width: auto
}

	.button:hover {
		background-color: #faebd7;
		box-shadow: 0 0 16px 0 #051428;
		color: #051428
	}

.bg-gradient {
	background: linear-gradient(225deg, #b92424, #b96724, #b9a924, #88b924, #24b937, #24b98c, #248ab9, #2434b9, #5c24b9, #9124b9, #b924a0, #b92444);
	background-size: 2400% 2400%;
	-webkit-animation: newGradient 45s ease infinite;
	-moz-animation: newGradient 45s ease infinite;
	-o-animation: newGradient 45s ease infinite;
	animation: newGradient 45s ease infinite;
}

.fg-white {
	color: #fff
}

.center-text {
	text-align: center
}

.fade-in {
	-moz-animation: fade 1.2s;
	-o-animation: fade 1.2s;
	-webkit-animation: fade 1.2s;
	animation: fade 1.2s
}

.license-text, .license-button {
	float: left
}

.license-text {
	margin: 12px
}

.sidenavBar {
	background-color: rgba(0,0,0,0.8);
	height: 100%;
	left: 0;
	overflow-x: hidden;
	padding-top: 60px;
	position: fixed;
	text-align: center;
	top: 0;
	transition: .5s;
	width: 0;
	z-index: 1
}

	.sidenavBar a {
		color: lightgray;
		display: block;
		font-size: 25px;
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		transition: .3s
	}

		.sidenavBar a:hover {
			color: #fff
		}

	.sidenavBar .sidenavBarClose {
		font-size: 36px;
		margin-left: 50px;
		position: absolute;
		right: 25px;
		top: 0
	}

@media screen and (max-height: 450px) {
	.sidenavBar { padding-top: 15px }
	.sidenavBar a { font-size: 18px }
}

@-webkit-keyframes fade {
	from { opacity: 0 }
	to { opacity: 1 }
}

@-moz-keyframes fade {
	from { opacity: 0 }
	to { opacity: 1 }
}

@-o-keyframes fade {
	from { opacity: 0 }
	to { opacity: 1 }
}

@keyframes fade {
	from { opacity: 0 }
	to { opacity: 1 }
}

@-webkit-keyframes newGradient {
    0% { background-position:0 51% }
    50% { background-position:100% 50% }
    100% { background-position:0 51% }
}
@-moz-keyframes newGradient {
    0% { background-position:0 51% }
    50% { background-position:100% 50% }
    100% { background-position:0 51% }
}
@-o-keyframes newGradient {
    0% { background-position:0 51% }
    50% { background-position:100% 50% }
    100% { background-position:0 51% }
}
@keyframes newGradient {
    0% { background-position:0 51% }
    50% { background-position:100 50% }
    100% { background-position:0 51% }
}