body {
    max-width:100%;
    height:100vh;
    font-family:'Roboto', sans-serif
}

a, a:visited { text-decoration:none }
a:hover, a:focus { text-decoration:underline }

header {
    display:grid;
    position:sticky;
    grid-area:header;
    grid-template-areas:"main-menu title options";
    grid-template-columns:1fr 3fr 1fr;
    transform-style:preserve-3d;
    top:0;
    left:0;
    max-width:100%;
    height:auto;
    z-index:10;
    margin:1rem;
    gap:0.5rem;
    background:color-mix(in srgb, var(--background) 25%, transparent)
}


.title > svg {
    display:block;
    text-align:center
}

.social {
    display:flex;
    flex-direction: column;
    grid-area:social
}
.title {
    grid-area:title;
    place-self:center;
    place-items:center;
    text-align:center
}
.options-menu {
    grid-area:options;
    text-align: right;
}
.options-menu > summary {    
    list-style-type: none    
}
.logo {
    display:block;
    width: 4.2rem;
    height:4.2rem;
}
.logo-text {
    text-align: center;
}
.main-menu {    
    grid-area: main-menu;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
.main-menu > summary {
    list-style-type: none
}

footer {
    display:grid;
    grid-area:footer;
    position:sticky;
    grid-template-rows:auto auto;
    width:100%;
    height:1vh;
    bottom:0;
    z-index:100
}

article {
    background:color-mix(in srgb, var(--background) 50%, transparent)
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

[popover] {
    opacity: 0;
    animation: fadeIn 0.5s ease-in;
}
[popover]:popover-open {
    opacity: 1;
}

[popover] {
    color: var(--foreground);
    background-color: var(--background);
    a {
        color: var(--foreground)
    }
}

table { width: 100% }

@media (orientation: portrait) {
    .row-or-column { flex-direction:column }
    .logo { height:2.3rem }
    .page-title, .site-title {
        font-size:0.84rem;
        line-height:0.66rem
    }
}

@media (orientation: landscape) {
    .row-or-column { flex-direction:row }
    .logo { height:4.2rem }
    .site-title, .page-title {
        font-size:1.23rem;
        line-height:0.75rem
    }
}

@keyframes view-askew {
    0%,100% { transform: matrix(0.125, 0, 0, 0.125, 0, 0)        
    }
    50% { transform: matrix(1, 0, 0, 1, 0, 0) }
    
}

.viewAskew {
    animation-name: view-askew; 
    animation-iteration-count: 
    infinite; animation-duration: 7s; 
    transform-origin: 50% 50%
}

fieldset {
    border: 1px solid var(--foreground);    
    display: grid;
    place-items: center;
}

.foreground {
    display:grid;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"header" "main" "footer"
}

.main {
    grid-area:main;
    max-width:90%;
    margin-top:10rem;
    padding-left:5%;
    padding-right:5%;
    font-size:1.23em;
    line-height:1.5rem
}

pre, code {
    font-family:'CodeFont', monospace
}

.row-or-column {
    flex-direction:row
}
@keyframes grow-progress {
    from { transform:scaleX(0) scaleY(0.5) }
    to { transform:scaleX(1) scaleY(1) }
}
.scroll-progress {
    width:100%;
    height:1rem;
    margin-top:auto;
    margin-bottom:auto;
    transform-origin:0 50%;
    background:linear-gradient(to right, transparent, var(--foreground));
    animation:grow-progress auto linear;
    animation-timeline:scroll()
}
.hljs {
    background:color-mix(in srgb, var(--background) 75%, transparent);
    color:var(--foreground)
}
.hljs-number { color:var(--cyan) }
.hljs-type { color:var(--purple) }
.hljs-string { color:var(--brightWhite) }
.hljs-built_in { color:var(--brightBlue); font-weight:demibold }
.hljs-variable { color:var(--green); font-weight:demibold }
.hljs-comment { color:var(--brightGreen); font-weight:demibold }
.hljs-literal { color:var(--brightWhite) }