:root {
    --background:#000;
    --container:#000;
    --color:#FFF;
    --link:#ff7a7a;
    --linkborder:#ff3535;
    --linkhover:#FFF;
    --linkvisited:#ccc;
}

@font-face {
    font-family: 'Correction Brush';
    src:url('CorrectionBrush.woff') format('woff'); 
    font-weight: normal;
    font-style: normal;
}

* { margin:0; padding:0; }

img {
    max-width:95%;
}

body {
	background: url(bg.gif) #000;
	color:#FFF;
    font:1.1rem "Times New Roman", serif;
    line-height:1.4;
}

#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;
}

#container {
	max-width:800px;
    width: 90%;
	background:var(--container);
	border:2px double;
	margin:20px auto;
    display:flex;
    flex-wrap:wrap;
}

header {
    flex: 1 1 100%;
    border-bottom: 2px double;
    text-align:center;
}

footer {
    flex: 1 1 calc(100% - 20px);
    border-top: 2px double;
    padding:5px;
    text-align:center;
}

#menu {
	padding:10px;
    border-right: 2px double;
    flex: 1 1 calc(20% - 25px);
}

#menu ul {
    list-style:none;
    font:2.1rem "Correction Brush", "Times New Roman", serif;
}

#menu li {
    display:inline-block;
    margin:.2em;
}

#menu li a {
    color:var(--color);
    text-decoration:none;
    border-bottom:2px solid var(--linkborder);
}

#menu li a:visited {
    color:var(--color);
}

#menu li a:hover, a:focus {
    color:var(--linkborder);
}

#content {
	padding:10px;
    flex: 1 1 calc(80% - 40px);
}

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

a:visited {
    color:var(--linkvisited);
}

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

h1 {
    font-size:2em;
}

h2 {
    font-size:1.7em;
}

h3 {
    font-size:1.4em;
}

p {
	margin:0.5em 0px 0.5em 0px;
}

input {
    background: var(--container);
    color: var(--color);
    border:1px solid;
    font-size:1.1em;
    padding:5px;
}

input:hover, input:focus {
    border-color:var(--linkborder);
}

@media screen and (max-width:800px) {
    #menu {
        flex: 1 1 calc(100% - 20px);
        border-right:none;
        border-bottom: 2px double;
        text-align:center;
    }
    
    #menu li {
        display:inline-block;
    }
    
    #content {
        flex: 1 1 calc(100% - 20px);
    }
}