:root {
	--background: #020605; /* black*/
	--background2: #091311; /* ligher but still black */
	--color: #f2ead4; /* white */
	
	--link: #318150; /* dark green */
	--link-hover: yellowgreen; /* pink */
	
	--form-bg: #318150; /* dark green */
	--form-color: #f2ead4; /* white */
	
	--accent-bg: #24211c; /* dark, but visible on black bg */
	--hr: #f2ead4; /* white */

	--main-font: 'Atkinson Hyperlegible', sans-serif;
	--header-font: Georgia, sans-serif;
	--header-font2: "Courier New", Courier, monospace;

	--imageBackground: url("/img/bg4.jpg");
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/Atkinson/AtkinsonHyperlegible-Regular.ttf');
    font-weight: normal;
    font-style: normal;
   }

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/Atkinson/AtkinsonHyperlegible-Bold.ttf');
    font-weight: bold;
    font-style: normal;
   } 

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/Atkinson/AtkinsonHyperlegible-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
   } 

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/Atkinson/AtkinsonHyperlegible-Italic.ttf');
    font-weight: normal;
    font-style: italic;
   }
   
 #skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background: var(--accent-bg);
    color: var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.2s ease;
}

mark.up {
	position: fixed;
	left: 0;
	bottom: 0;
	text-align: center;
	padding: 1px 5px;
	background-color: var(--background);
}

mark.up a {
	padding: 0;
	margin: 0;
	color: yellowgreen;
	text-decoration: none;
	font-size: 1em;
	font-style: normal;
}

mark.up a:hover {
	text-decoration: none;
	font-style: normal;
}