html {
}

body {
	margin:0;
	padding:0;
	animation-name: backgroundColorPalette;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear; 
	/* linear is enabled default, it’s not necessary to add it make it work but it can make your code more expressive */
}

@keyframes backgroundColorPalette {
	0% {
		background: #ff8a00;
	}
	25% {
		background: #ff4800;
	}
	50% {
		background: #a84bff;
	}
	75% {
		background: #15fff7;
	}	
	100% {
		background: #ff8a00;
	}
}

.background-pattern {
height:100vh;
width:100vw;
background: transparent url(/style/images/pattern3.png) top center repeat;
padding:0;
}

.hidden {
	display: none;
	visibility: hidden;
}

a {
	color: #222;
	text-decoration: underline;
}

a:hover {
	color: #111;
	text-decoration: underline;
}

h1 {
font-size:36px;
}

h1.name {
	position: relative;
	top:19%;
	display: block;
	width:781px;
	height:394px;
	margin:0 auto;
	background: transparent url("/style/images/super_marios_name_color8.png") top center no-repeat;
}

.buttons-container {
	margin:0 auto;
	max-width:800px;
	position: relative;
	top:30%;
}