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

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

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

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

:root {
    --color:#2d3232;
    --background:#132021;
    --container:#c3cbcb;
    
    --header:#e6eded;
    
    --link:#234444;
    --linkhover:#06727e;
    --linkborder:#078896;
    
    --navlink: #83c4c3;
    --linkborder: #5a9796;
    --navbg: rgb(19,32,33,0.9);
    
    --formbg:#d5dada;
    --formcolor:#2d3232;
    
    --accentbg:#b0baba;
    --hr: #568084;
    
    --burgericon:url(/assets/burger.svg);
    --closeicon:url(/assets/close.svg);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#c3cbcb;
        --container:#132021;
        
        --link:#83c4c3;
        --linkhover:#2fa9b6;
        --linkborder:#5a9796;
        
        --formbg:#232c2f;
        --formcolor:#c3cbcb;
        
        --accentbg:#232c2f;
        --hr: #5b7e81;
    }
}

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

body { 
    color:var(--color);
    background:var(--background) url(/assets/backgrounds/zebra.png) fixed;
    font: 1.2rem "Atkinson", sans-serif; 
    letter-spacing:.35px;
}

header {
    font-size:3rem;
    font-weight:bold;
    padding-bottom:10px;
    text-align:center;
}

header a {
    color:var(--header);
    text-decoration:none;
}

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

#full-menu {
    padding:10px 0 10px 0;
    font-size:20pt;
}

#full-menu ul {
    list-style:none;
    display:flex;
    justify-content:space-evenly;
}

#full-menu li {
    display:inline-block;
    position:relative;
}

#burger-menu {
    height:calc(100vh - 50px);
    overflow:auto;
    z-index:900;
    background:var(--navbg);
    text-align:center;
    width:100%;
    font-size:3rem;
}

#burger-menu ul {
    list-style:none;
    margin:auto;
    padding-top:25px;
    text-align:center;
}

#burger-menu li {
    position:relative;
    display: block;
}

.menu li a {
    text-decoration:none;
    color: var(--navlink);
}

.menu li a:hover, .menu li a:focus {
    color:var(--navlink);
}

#burger-menu li a:hover, #burger-menu li a:focus {
    border-bottom:5px solid var(--linkborder);
}

#full-menu li a::after{
    content: '';
    position: absolute;
    width: 0px;
    height: 5px;
    left: 50%;
    bottom:0;
    background-color: var(--linkborder);
    transition: all ease-in-out .2s;
}

#full-menu li a:hover::after, #full-menu li a:focus::after {
    width: 100%;
    left: 0;
}

#burger {
    display:none;
    width:100%;
    position:fixed;
    top:0;
    z-index:900;
}

#burger summary {
    list-style-type: none;
    cursor: pointer;
    display:flex;
    align-items:center;
    color:var(--navlink);
    font-size:1.1em;
    padding:5px;
    background:var(--background);
}

#burger summary::before, #burger[open]>summary::before {
    height:40px;
    width:40px;
    background:var(--navlink);
}

#burger summary::-webkit-details-marker {
    display: none;
}

#burger summary::before {
    content: '';
    mask-image:var(--burgericon);
    -webkit-mask-image:var(--burgericon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open]>summary::before {
    content: '';
    mask-image:var(--closeicon);
    -webkit-mask-image:var(--closeicon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open] {
    position:fixed;
}

.skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
 
.skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

#container {
    margin:20px auto;
    padding:10px;
    max-width:800px;
    width:calc(100% - 20px);
}

main {
    background:var(--container);
    padding:15px;
}

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

main a:hover, main a:focus {
    color: var(--linkhover);
    text-decoration-color:var(--linkborder);
}

main a img {
    border:5px solid var(--linkborder);
}

main a img:hover, main a:focus img {
    border:5px solid var(--color);
}

p {
    margin:7px 0px 7px 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.5em;
}

main h4 {
    font:0.95em Georgia, Times New Roman, serif;
    font-style:italic;
    margin:5px 0 20px 0;
}

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

main textarea {
    width:90%;
}

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

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

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, main .box {
    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:20px;
}

.member {
    margin:20px;
}

.columns {
    --s: 30px;
    --t: 5px; 
    --g: 10px;
    padding: calc(var(--g) + var(--t));
    outline: var(--t) solid var(--linkborder); /* the color here */
    outline-offset: calc(-1*var(--t));
    -webkit-mask: conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
    display:flex;
    align-items:center;
}

.info {
    flex:1 1 30%;
}

.url {
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
}

.name {
    width:100%;
    text-align:center;
    font-size:12pt;
}

.mature {
    text-transform:uppercase;
    background:var(--accentbg);
    border-radius:2px;
    padding:3px;
}

.blurb {
    flex:1 1 70%;
    background: var(--accentbg);
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

ul.pages {
    list-style:none;
    margin:auto;
    text-align:center;
}

ul.pages li { display:inline; }

ul.pages li a, ul.pages li.active {
    font-size: 1.2rem; 
    border: 1px solid var(--linkborder); 
    padding:5px;
    margin:2px;
    transition:0.5s ease;
    text-decoration:none;
}

ul.pages li.page a:hover {
    background:var(--link);
    color:var(--container);
    transition:0.5s ease;
}

ul.pages li.page a {
    background: var(--container);  
    color: var(--link);
}

ul.pages li.active {
    background:var(--link);
    color:var(--container);
}

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

    .menu-desktop { display:inline; }
    .menu-mobile { display:none; }

@media screen and (max-width:500px) {

    .columns {
        display:block;
    }
        
}


@media screen and (max-width: 700px) {
    #container {
        margin-top:50px;
    }
  
    #full-menu {
        display: none;
    }
  
    #burger {
        display: block;
    }
    
    header {
        font-size:2.3rem;
    }
  
    main h1 {
        font-size:1.8em;
    }
    
    main h2 {
        font-size:1.5em;
    }
    
    main h3 {
        font-size:1.2em;
    }
    
    .menu-desktop { display:none; }
    .menu-mobile { display:inline; }
}

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

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

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