:root {
    /* picocss overrides */
    --typography-spacing-vertical: .5em;
    --border-radius              : .4em;

    /* my variables */
    --post-spacing: 5em;
}

[x-cloak] {
    display: none !important;
}

header {
    display: flex;
}

header img {
    flex-shrink  : 1;
    margin-right : 2em;
    border-radius: 50%;
    height       : 5em;
}

hgroup {
    cursor: pointer;
}

.post {
    /* border-top    : 1px solid var(--muted-color);
    padding-top   : var(--typography-spacing-vertical);
    padding-bottom: var(--typography-spacing-vertical); */
    margin-bottom: var(--post-spacing);
}

.post>p:last-of-type {
    margin-bottom: .5em;
}


.post img,
.post video {
    max-width : 100%;
    max-height: 50vh;
}

.post img {
    border-radius: var(--border-radius);
    margin-bottom: 1em;
}

.post video {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius : var(--border-radius);
}

.video-wrapper {
    max-width: max-content;
}

.video-wrapper>.controls {
    padding                   : .5em .5em;
    display                   : flex;
    background-color          : var(--muted-border-color);
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius : var(--border-radius);
}

.controls>.btn-full-screen {
    margin-left: auto;
}

small {
    color: var(--muted-color);
}


/* Container size override */
@media (min-width:768px) {
    .container {
        max-width: 700px
    }
}

.btn-toggle-video {

    --size: 0.5em;

    border      : 0px;
    background  : transparent;
    box-sizing  : border-box;
    height      : calc(var(--size) *2);
    width       : 0;
    border-color: transparent transparent transparent currentColor;
    transition  : 100ms all ease;
    cursor      : pointer;
    border-style: solid;
    border-width: var(--size) 0px var(--size) calc(var(--size) * 1.6);
}

.btn-toggle-video.pause-symbol {
    border-style: double;
    border-width: 0px 0px 0px calc(var(--size) * 1.6);
}

.btn-full-screen {
    --size  : 1em;
    --border: calc(var(--size) * .2);
    --space : 4;

    cursor        : pointer;
    vertical-align: middle;
    box-sizing    : border-box;
    display       : inline-block;
    border        : var(--border) solid currentColor;
    width         : var(--size);
    height        : var(--size);
    position      : relative;
}

.btn-full-screen:before,
.btn-full-screen:after {
    content         : '';
    background-color: var(--muted-border-color);
    position        : absolute;
}

.btn-full-screen:before {
    /* firefox fix */
    height   : calc(var(--size) + 1px);
    width    : calc(var(--size) / var(--space));
    left     : 50%;
    top      : calc(var(--border) * -1);
    transform: translateX(-50%);
}

.btn-full-screen:after {
    /* firefox fix */
    width    : calc(var(--size) + 1px);
    height   : calc(var(--size) / var(--space));
    top      : 50%;
    left     : calc(var(--border) * -1);
    transform: translateY(-50%);
}