:root {
    --background:#0b1334;
    --color:#13161d;
    
    --main:#d8e0e7;
    --link:#0c2c93;
    --linkhover:#2b5ff2;
    --linkborder:#c68e3d;

    --menucolor:#c7d0e0;
	--menuhover:#c7d0e0;
    --menubg:rgba(4, 12, 35, 0.6);
	--menubghover:#12141a;
	
	--input:rgb(255,255,255,0.3);
}

* { margin:0; padding:0; }

body {
    background:var(--background) url(assets/swirl.png) fixed;
    font:1em Georgia, serif;
    color:var(--color);
}

.visually-hidden {
    display:none;
}

#container {
    width:750px;
    margin:10px auto;
    padding:15px;
    background:url(assets/banner.png) no-repeat top;
    background-size:750px;
	min-height:662px;
}

#content {
    margin:200px auto 0 auto;
    width:500px;
}

nav {
    margin:auto;
    text-align:center;
    font:1.4em Georgia, serif;
}

nav ul {
    display:inline;
    list-style:none;
}

nav li {
    display:inline-block;
    margin-bottom:15px;
}

nav li a {
    color:var(--menucolor);
    text-decoration:none;
    background:var(--menubg);
    padding:5px;
    border-radius:3px;
	transition:0.5s ease;
}

nav li a:hover {
    background:var(--menubghover);
    color:var(--menuhover);
	transition:0.5s ease;
}

main {
    padding:15px;
    background:var(--main);
    width:500px;
    margin:auto;
    border-radius:3px;
}

main p {
    line-height:1.4;
    margin:8px 0 8px 0;
}

main a {
    color:var(--link);
    text-decoration:none;
    border-bottom:1px solid var(--linkborder);
	transition:0.5s ease;
}

main a:hover {
    color:var(--linkhover);
	transition:0.5s ease;
}

main ul {
	list-style-position:outside;
	margin-left:20px;
}

main ul li {
	line-height:1.4;
	margin:5px 0 5px 0;
}

h1 {
    font:2em Georgia, serif;
    font-style:italic;
}

h1:first-letter {
    color:var(--link);
	font-size:28pt;
}

h2 {
	font:1.7em Georgia, serif;
}

.member {
	padding:10px;
	margin:5px;
	border-radius:3px;
}

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

footer {
    border-top:1px dashed var(--linkborder);
    text-align:center;
    font-size:10pt;
    margin:15px 8px 8px 8px;
}

th {
	text-align:left;
	font-weight:bold;
	border-bottom:0.5px solid;
}

td { 
	padding: 3px; 
}

input, textarea, select {
	background:var(--input);
	color:var(--color);
	padding:5px;
	margin:3px;
	font: 11pt sans-serif;
	border:1px solid;
}

input[type="submit"] {
	background:var(--link);
	color:var(--menucolor);
	padding:6px;
	font:12pt Georgia, serif;
}

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


@media screen and (max-width:799px) {
    #container {
        width:calc(100% - 30px);
    }

    #content {
        width:100%;
    }

    main {
        width: calc(100% - 30px);
    }
}

@media (prefers-color-scheme:dark) {
	:root {
		--background:#040b25;
		--color:#c7d0e0;
		
		--main:#161b30;
		--link:#6194e0;
		--linkhover:#7d92c5;
		--linkborder:#a2732e;

		--menucolor:#c7d0e0;
		--menuhover:#c7d0e0;
		--menubg:rgba(4, 12, 35, 0.6);
		--menubghover:#12141a;
		
		--input:rgb(0,0,0,0.3);
	}
}