/* LAYOUT */

body {
    margin: auto;
    line-height: 1.5rem;
    font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
    padding: 1em;
    display: table;
}

main {
    float: left;
    max-width: 80ch;
}

nav {
    float: left;
    display: block;
    max-width: 24ch;
}

nav > ul > li {
    font-size: 14px;
    list-style: none;
    line-height: 1.2em;
}

nav > ul.tags > li {
    display: block;
    float: left;
    margin-right: 0.5em;
}

/* TYPO */

header > h1 {
    font-family: sans-serif;
}

article > header {
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 1px dashed black;
}

article > header > h1 {
    font-family: sans-serif;
    margin: 0 0 0.25em 0;
}

/* ELEMENTS */

article > header > h1 > a:link,
article > header > h1 > a:visited,
article > header > h1 > a:hover,
article > header > h1 > a:active
{
    text-decoration: none !important;
    color: initial;;
}


img.intermission {
    width: 100%;
}

figure > img {
    width: 100%;
}

figcaption {
    text-align: right;
}

pre > code, pre > samp {
    display: block;
    max-width: 78ch;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
}

pre {
    white-space: normal;
    overflow-wrap: anywhere;
}

.inline-code {
    background: black;
    color: lime;
    font-family: monospace;
    padding: 2px;
    max-wihdth: 78ch;
}

section > time {
    border: 1px solid black;
    padding: 2px;
}

@keyframes blinking-cursor {
    0% { opacity: 1}
    66% { opacity: 0}
}

section:first-child > p:last-child::after {
    content: "";
    width: 0.05em;
    height: 1.1em;
    background: black;
    display: inline-block;
    animation: blinking-cursor 1.5s steps(1) infinite;
    margin-top: 0.1em;
    margin-left: 0.1em;
    position: absolute;
}

.strike {
    text-decoration: line-through;
}

.notice {
    background: lightyellow;
    padding: 1em;
}

.gram {
    max-width: 320px;
    max-height: 320px;
}

/* TODO: Filter for actual AR */

.youtube {
    width: 100%;
    height: calc(100vh / 1.77);
    padding-bottom: 1em;
}

.youtube > iframe {
    position: relative;
    width: 100%;
    height: 100%;
}