html {
	background-color: #D2D8CD;
}

body {
	background-color: #FFFFFF;
	
	border-radius: 6px;
	
	font-family: sans-serif;
}

header {
	border-radius: 6px 6px 0 0;
	
	background: linear-gradient(to bottom, rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%);
}
header > h1 {
	border-right: rgba(185,111,42,0.5) solid thin;
}
header > h1 > .l1 {
	color: red;
}
header > h1 > .l2 {
	color: blue;
}
header > h1 > .l3 {
	color: green;
}
header > h1 > .l4 {
	color: yellow;
}
header > h1 > .l5 {
	color: black;
}
header > h1 > .l6 {
	color: red;
}
header > h1 > .rest {
	font-size: 0.5em;
}
header > article {
	padding-top: 0.70em;
	font-size:   2em;
}
header > article > h2 {
	padding-right: 2em;
	
	font-size: 1em;
}


body {
	background-color: rgb(245,171,102);
}

body > article {
	margin: 0 5% 2em 5%;
}


@media all and (max-width: 39em) {
	header > h1 {
		border-right:  none;
		padding-right: none;
	}
}


/******************
 * Main menu view *
 ******************/
#view-start button {
	width:  100%;
	height: 2em;
	
	margin-top: 2.0em;
}



/****************
 * In-game view *
 ****************/
#header-play > p {
	text-align: center;
	
	color:       #55FF22;
	font-family: monospace;
	font-weight: bold;
	
	background: radial-gradient(ellipse at center, rgba(140,100,0,0.6) 15%, rgba(0,0,0,0) 70%);
}

/* Improve visiblility of color areas */
#view-play #color-next,
#view-play #color-chooser > button {
	border: solid thin black;
	
	color: transparent;
}

/* Make color buttons more interactive */
#view-play #color-chooser > button {
	cursor: pointer;
}
#view-play #color-chooser > button:hover {
	outline: #333 thin solid;
}

/* Use 1/5 of vertical screen space for every color option */
/* Leaving some room between each option */
#view-play #color-chooser > button {
	width:  17%;
	height: 3em;
	margin-left: 1%;
}

/* Make next color display bigger */
#view-play #color-next {
	height: 4em;
}

@media all and (max-width: 39em) {
	#header-play > h2 {
		display: none;
	}
}


/******************
 * Highscore view *
 ******************/
#view-score table {
	width: 100%;
	
	border-radius: 6px;
	background-color: rgb(235,161,92);
}

/* Format highscore table caption like normal header element */
#view-score table > caption {
	margin: 0.5em 0;
	
	font-size:   1.5em;
	font-weight: bold;
}

#view-score table tr > td {
	padding: 0.2em 0.4em;
	
	background-color: rgb(215,141,72);
}
#view-score table tr:nth-of-type(2n) > td {
	background-color: rgb(195,121,52);
}
#view-score table tr:hover > td {
	background-color: rgb(175,101,32);
}
#view-score table tr:last-of-type > :first-child {
	border-radius: 0 0 0 6px;
}
#view-score table tr:last-of-type > :last-child {
	border-radius: 0 0 6px 0;
}


/******************
 * Game over view *
 ******************/
#view-over ol > li > span {
	display: block;
	
	width:  18%;
	height: 2em;
	
	margin-top: 0.5em;
	border: solid thin black;
	
	color: transparent;
}
#view-over ol > li > span.error {
	outline: dotted 2px red;
}