:root {
    font-family: monospace;
    font-size: 14px;
    color: white;

    --delay-before: 0ms;
    --delay-after: 0ms;
    --reveal-delay: 0ms;
}

.image-aligner {
    flex: 1;
    display: flex;
}

.top { 
    align-items: flex-start;
}

.middle { 
    align-items: center;
}

.bottom { 
    align-items: flex-end;
}

.image-panel {
    /* flex-grow: 1; */

    background: white;
}

.text {
    padding: 8px;

    /* white-space: pre-wrap; */
}

.outline-a {
    box-shadow: 0 0 0 2px slategray;
}

.char {
    --reveal-delay: 25ms;
    --delay-after: 0;
    --delay-before: 0;
}

.comma {
    --delay-after: 150ms;
}

.period, .colon {
    --delay-after: 200ms;
}

.dash + .dash {
    --delay-after: 200ms;
}

h1, h2 {
    --delay-after: 500ms;
}

ul {
    padding-inline-start: 2em;
}

li {
    --delay-before: 200ms;
}

p {
    /* --delay-before: 200ms; */
}

hr {
    border: none;
    border-top: 2px solid slategray;

    --reveal-delay: 0ms;

    animation-duration: .5s !important;
    animation-name: char-reveal;

    opacity: .85;
}

hr.old {
    opacity: 25%;
}

.send {
    --delay-after: 1000ms;
}

.hidden {
    visibility: hidden;
}

.hidden.char {
    display: initial;
}

.background {
    position: absolute;
    left: center; top: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;
}
.location { 
    background: black; 
    color: white;
    font-size: 14px;
}

#visible {
    width: 800px;
    height: 600px;

    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);

    /* outline: dashed yellow 1px; */

    display: grid;
    grid-template-columns: 1fr 400px 1fr;
    padding: 16px;
    gap: 16px;
}

#right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 568px;
    width: 280px;
}

#log {
    flex: 1;
    max-height: 568px;
    color: black;
    background: rgba(16, 16, 16, 0.56);
    width: 480px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
}

#log .old {
    color: darkgray;
}

#location {
    align-self: flex-end;
}

.image-panel {
    display: flex;
    background: white;
}

.image-panel img, .image-panel video {
    width: 100%;
    background-color: white;
}

.text {
    color: white;
    padding: 8px;

    /* white-space: pre-wrap; */
}

.outline-a {
    box-shadow: 0 0 0 2px slategray;
}

#log :not(.hidden):not(.char-cursor) {
    animation-name: char-reveal;
    animation-direction: alternate;
    animation-duration: .25s;
}


.char-cursor {
    animation-name: char-cursor;
    animation-direction: alternate;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

    color: transparent;

    box-shadow: inset 0px 0px 0 1px white;
}

@keyframes char-reveal {
    0%   {
        box-shadow: inset 0px 0px 0 1px white;
        visibility: hidden; 
        background: white; 
    }
    50%  {
        box-shadow: inset 0px 0px 0 1px white;
        background: transparent; 
    }
    100% { 
        box-shadow: inset 0px 0px 0 1px transparent;
        color: white;
    }
}

@keyframes char-cursor {
    0%   { }
    100% { 
        background: white; 
    }
}

@keyframes grow-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes grow-out {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}


#right-column {
    position: relative;
    right: 0;
    z-index: 0;
}
#right-column-images {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: 568px;

}

#right-column-full {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    display: flex; flex-direction: column;
    align-content: center;
    z-index: -1;
}