body
{
    overflow-x: hidden;
}
.text-centred
{
    width: 100%;
}

h1, h2, h3, .sidenote
{
    text-align: center;
}
a, a:visited
{
    /* never go purple */
    color: blue;
}

header > h1
{
    margin-bottom: 0;
}
.sidenote
{
    display: block;
    margin-top: 0;
    font-style: italic;
    white-space: normal;
}

p
{
    /* max-width: 70em; */
    max-width: 120ch;
}

hr.small
{
    border-top: 1px solid lightgray;
    width: 95%;
}

#backButton
{
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    margin: 10px;
}

#date
{
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 0.9rem;
    text-align: center;
    vertical-align: middle;
    margin: 10px;
    font-style: italic;
}

img
{
    max-width: 90vw;
    object-fit: contain;
}

.columns
{
    display: flex;
    justify-content: space-evenly;
}

iframe
{
    /* width: 100%; */
    aspect-ratio: 16 / 9;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 65ch)
{
    /* For desktop: */
    .columns
    {
        display: block;
    }
    
    #backButton
    {
        position: relative;
    }
    header > h1
    {
        margin-top: 0;
    }
}