html, body {
	margin: 0;
}

body {
	background-color: #FF6600;
	font-family: sans-serif;
}

.container {
	max-width: 800px;
	background-color: white;
	padding: 1rem 3rem;
	margin: 1rem auto;
	box-shadow: 3px 3px 3px #00f;
}

li {
	list-style: upper-roman;
	padding: 0;
}

.image-container {
	text-align: center;
}

.image-container > img {
	margin-top: 2rem;
}

.YEAH {
	text-align: center;
	font-size: 5rem;
}

.YEAH0 {
	animation: rainbow1 3s infinite;
}
.YEAH1 {
	animation: rainbow2 3s infinite;
}
.YEAH2 {
	animation: rainbow3 3s infinite;
}


@keyframes rainbow1{
	20%{color: red;}
	40%{color: yellow;}
	60%{color: green;}
	80%{color: blue;}
	100%{color: orange;}
}

@keyframes rainbow2{
	20%{color: blue;}
	40%{color: orange;}
	60%{color: red;}
	80%{color: yellow;}
	100%{color: green;}
}

@keyframes rainbow3{
	20%{color: yellow;}
	40%{color: green;}
	60%{color: blue;}
	80%{color: orange;}
	100%{color: red;}
}

.rules {
	font-weight: bold;
	text-align: center;
	font-family: Impact, sans-serif;
	font-size: 2rem;
}

.rules-list {
	margin: 0 auto;
	max-width: 260px;
}

.footer {
	text-align: right;
	margin: 2rem;
}

@media (max-width: 720px) {
	svg {
		height: 100px;
	}
	path {
		fill: #FF6600;
	}
}