:root {
    --color-black: #002030;
    --color-white: #F0F0F0;
    --color-grey: #797060;
    --color-blue: #00D0D0;
    --color-red: #D00000;
    --color-yellow: #F0E000;
    background-color: var(--color-black);
    color: var(--color-black);
}

body {
    max-width: 800px;
    margin: auto;
    padding: 0 1em 1em;
    line-height: 1.5;
    background-color: var(--color-white);
    border: solid var(--color-black);
    border-width:0px 8px;
}

/* header and footer areas */
nav {
    width: 100%;
    top: 0;
    position: sticky;
    background-color: var(--color-white);
}
.menu { 
    margin: 0;
    padding: 0;
    border: 4px solid var(--color-black);
    display:flex;
}
.menu ul {
}
.menu li {
    display: block;
    vertical-align: bottom;
}
.menu a {
    display: block;
    padding: 4px 8px;
    text-decoration: none; 
    color: var(--color-black);
    font-size: 16pt; 
    @media screen and (max-width: 600px){
    padding: 4px 6px;
    font-size: 10pt; 
    }
    background-color: var(--color-white);
    &:focus-visible, &:hover {
        color: var(--color-white);
        background-color: var(--color-black);
        outline: 0;
    }
    &#active {
        color: var(--color-white);
        background-color: var(--color-red);
    }
    &#active:focus-visible, &#active:hover {
        color: var(--color-black);
        background-color: var(--color-blue);
    }
}
.menu, .article-meta, footer { text-align: left; }
footer a { text-decoration: none; }
footer { color: var(--color-grey); }

/* code */
pre {
    border: 1px solid #ddd;
    box-shadow: 5px 5px 5px #eee;
    padding: 1em;
    overflow-x: auto;
}
code { background: #f9f9f9; }
pre code { background: none; }

/* misc elements */
img, iframe, video { max-width: 100%; }
img::before { font-style: italic; }
main { 
    hyphens: auto; 
}
blockquote {
    background: #f9f9f9;
    border-left: 5px solid #ccc;
    padding: 3px 1em 3px;
}
ul {
    list-style-type: square;
}
section {
    padding: 1em;
    margin: 4px 0;
    outline: 2px solid black;
    outline-offset: -1px;
}

table {
    margin: auto;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #eee; }

.tile ul{
    list-style-type: none;
    padding: 0;
    display: grid-cell;
}
.tile li { 
    display: inline-block;
    vertical-align: text-top;
}
.tile figure{
    width: 150px;
    background-color: var(--color-black);
}
.tile figcaption {
    text-align: center;
}
.tile a {
    text-decoration: none;
    color: var(--color-white);
}