@font-face {
  font-family: "Atkinson";
  src: url("/fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"), 
	url("/fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"), 
	url("/fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"), 
	url("/fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"), 
	url("/fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

:root {
    --color:#212c2c;
    --background:#f2f2f2;
    
    --navhover:#c7d95c;
    
    --link:#455705;
    --linkhover:#212c2c;
    --linkborder:#a3b10a;
    
    --formbg:#e9e9e9;
    --formcolor:#212c2c;
    
    --accentbg:#e9e9e9;
    --hr: #888;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#c3b69a;
        --background:#191919;
        
        --navhover:#273f2f;
        
        --link:#8fae4c;
        --linkhover:#b4d052;
        --linkborder:#5f6d45;
        
        --formbg:#0e0e0e;
        --formcolor:#DCD7C9;
        
        --accentbg:#0e0e0e;
        --hr: #273f2f;
    }
}

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

body { 
    color:var(--color);
    background:var(--background);
    font: 1.2rem "Atkinson", sans-serif; 
    letter-spacing:.35px;
}

#container {
    margin:10px auto;
}

nav {
    width:calc(100% - 20px);
    padding:10px;
    text-align:center;
    font-size:18pt;
    position:sticky;
    top:0px;
    background:var(--background);
}

nav ul {
    list-style:none;
}

nav li {
    display:inline;
    margin:5px;
}

nav a, header a{
    color:var(--color);
    padding:5px;
    text-decoration:none;
}

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

header a:hover, header a:focus {
    box-shadow:0 -80px 0 inset var(--navhover);
    color:var(--color);
}

header {
    font-size:2.5em;
    text-align:center;
    font-weight:bold;
    padding:5px;
}

header h1 {
    font-size:1em;
}

main {
    padding:0 20px 20px 20px;
    width:calc(90% - 40px);
    max-width:800px;
    margin:auto;
}

main a {
    color:var(--link);
    text-decoration:underline;
    text-decoration-color: var(--linkborder);
}

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

li a {
    text-decoration:none;
}

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

main h1 {
    font-size:2em;
    margin:5px 0 5px 0;
}

main h2 {
    margin:10px 0 10px 0;
    font-size:1.7em;
}

main h3 {
    margin:5px 0 5px 0;
    font-size: 1.4em;
}

.gallery {
    columns:3;
}

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

main textarea {
    width:90%;
}

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

input[type="submit"]:hover, input[type="reset"]:hover {
    background:var(--hr);
    cursor:pointer;
}

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;
    margin: 8px 0 8px 20px;
}

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

main ul li ul, main ol li ol {
    margin-left:15px;
}

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

main blockquote cite {
    font-size:11pt;
    position:relative;
    right:0;
}

main summary {
    cursor:pointer;
    margin: 5px 0px 5px 0px;
}

main details {
    padding:10px;
    background:var(--accentbg);
    margin:5px 0 5px 0;
    border-radius:5px;
}

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

main pre {
    padding:10px;
    background:var(--accentbg);
    margin:10px auto 10px auto;
    border-radius:5px;
    overflow: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 (prefers-color-scheme: dark) {

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

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

@media screen and (max-width:600px) {
    .gallery {
        display:inline;
    }

    nav {
        position:relative;
    }
}