:root {
    --cFoot: lightgrey;
    --cHead: #4b039c;
}

* {
    box-sizing:border-box;
}

html {
    padding:0;
    margin:0;
}
body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
	background: #454545;
}

header {
    background: var(--cHead);
    padding:8px;
}

header a {
    /*font-size: 2em;*/
	color: #ffd500;
    text-decoration: none;
	margin-top: 0; 
	font-weight:bold;
	font-size: 2.75em;
	padding: 16px;
	border-radius: 16px;
}
main {
    flex: 1;
    background: var(--cMain);
    padding:8px;
}
footer {
    background: var(--cFoot);
    text-align: center;

}

details {
	padding:16px; 
	border:1px solid black;
}
details summary {
	cursor:pointer;
}

main {
    background:white;
	width:100%;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
	padding-top:16px;
}

h1 {
    padding: 8px;
}

p {
    padding-left: 16px;
}

main {
    background: #454545;
}

.featured {
	--bg: red;
	text-align:center;
	border:1px solid black;
	padding:16px;
	min-height:250px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	background: var(--bg);
	background-size: cover;
	color: #ffd500;
	display:flex;
	justify-content:space-around;
	flex-direction:column;
}
.featured h1 {
	margin-top: 0; 
	font-weight:bold;
	font-size: 2.75em;
	background: rgba(0,0,0,0.3);
	padding: 16px;
	border-radius: 16px;
}

.featured ul {
    text-align: left;
}

.featured a {
    color:white;
}
.featured button {
	padding: 16px;
	
	border: 2px solid #ffd500;
	background: #222;
	color: #ffd500;
	cursor:pointer;
}
.featured button:hover {
	background: #ebc400;
	color:black;
}
.featured button:active {
	border-color: #ffd500;
	color: black;
	
	background: #ffd500;
}

.newGame {
	--bg: url('/new-game-bg.png');
}

.gotoSearch {
	--bg: url('/search-bg.png');
}