/* Default colors */
:root {
	--color:#321a02;
	--background:#e6d2b6;
	
	--link:#6d0f05;
	--linkhover:#a21a0b;
	
	--navbg:#f6e2bd;
	
	--formbg:#dec6a5;
	--formcolor:#321a02;
	--formborder:#9c4d40;
	
	--accentbg:#dec6a5;
	--hr: #9c4d40;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color:#e2c096;
		--background:#341a15;
		
		--link:#e19b75;
		--linkhover:#fcd5a5;
		
		--navbg:#512219;
		
		--formbg:#24100c;
		--formcolor:#DCD7C9;
		
		--accentbg:#24100c;
		--hr: #b96e54;
	}
}

* { margin: 0; padding: 0; transition:0.5s ease;}
img { margin:5px; max-width:100%; }

body { 
	color:var(--color);
	background:var(--background) url(https://kalechips.net/assets/backgrounds/stardust.png) fixed;
	font: 1em Georgia, serif; 
	letter-spacing:.35px;
}

#container {
	width:700px;
	margin:10px auto;
}

nav {
	font-size:16pt;
	text-align:center;
	padding:5px;
}

nav li {
	display:inline-block;
	padding:3px;
	margin:5px;
	border-bottom:1px dashed var(--link);
}

nav a {
	color:var(--link);
	text-decoration:none;
	padding:3px;
}

nav a:hover, nav a:focus {
	box-shadow:inset 0 -40px 0 var(--navbg);
	color:var(--linkhover);
}

header {
	height:200px;
	background:url(assets/banner.png) no-repeat center;
	background-size:700px;
	border-radius:5px;
}

main {
	padding:20px;
}

main a {
	color:var(--link);
}

main a:hover {
	color: var(--linkhover);
}

main li a {
	text-decoration:none;
}

p {
	margin:10px 0px 10px 0px;
	line-height:1.5;
}

main h1 {
	font:2.2em Georgia, serif;
	margin:5px 0 5px 0;
	border-left:20px double var(--hr);
	padding-left:10px;
}

main h2 {
	margin:10px 0 10px 0;
	font:1.8em Georgia, serif;
}

main h3 {
	margin:5px 0 5px 0;
	font: 1.5em Georgia, serif;
}

main input, textarea, select, button { 
	background: var(--formbg);  
	color: var(--formcolor);
	font: 12pt sans-serif; 
	border: 1px solid var(--formborder); 
	padding: 5px; 
	margin: 5px;
	border-radius:2px;
}

main textarea {
	width:90%;
}

input[type="submit"], input[type="reset"] {
	font-size:14pt;
	background:var(--accentbg);
	padding:10px;
}

input[type="submit"]:hover, input[type="reset"]:hover {
	cursor:pointer;
}

.membertitle {
	font-size:16pt;
}

.name {
	font-size:18pt;
	color:var(--link);
	font-weight:bold;
}

main table {
	margin:10px auto 10px auto;
	padding:5px;
	width:100%;
	border-collapse:collapse;
}

main th {
	border-bottom:1px solid var(--hr);
	padding:5px;
	text-align:left;
}

main td {
	padding:3px;
}

main tr:nth-child(2n) {
	background:var(--accentbg);
}

main ul, ol { 
	list-style-position: outside;
}

main li {
	margin:5px 0 5px 20px;
	line-height:1.5;
}

main blockquote, .box {
	padding:10px;
	border-left:10px solid var(--hr);
	background:var(--accentbg);
}

main hr {
	border:0.5px solid var(--hr);
    margin:20px auto 20px auto;
}

main footer {
	text-align:center;
	border-top: 0.5px solid var(--hr);
	margin-top:10px;
	padding:10px;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:749px) {
	#container {
		width:100%;
		margin-top:0;
	}
	
	header {
		border-radius:0px;
		background-image:url(assets/banner-mobile.png);
	}
}

@media (prefers-color-scheme: dark) {

	main img {
		opacity:0.6;
	}
	
	main img:hover {
		opacity:1;
	}

	main a img:hover {
		opacity:1;
	}
}