@font-face {
    font-family: 'consoleregularmono';
    src: url('/static/fonts/pixeldroidconsoleregularmono-webfont.woff2') format('woff2'),
         url('/static/fonts/pixeldroidconsoleregularmono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    /* COLORS */
    --color-black: #333;
    --color-white: #eee;

    /* BACKGROUNDS */
    --color-touchbar-background: #888 url(/static/img/claris/claris12.gif);
    --color-video-background: var(--color-black) url(/static/img/claris/claris17.gif);

    /* FONTS */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    /* SIZES */
    --font-size-copy: 1.5vw;
    --sidebar-width: 100%;
    --main-width: 100%; 
    --video-height: 60vw;
    --touchbar-height: 4vw;
    --moodbar-height: 10vw;
}

@media (min-width: 940px) {
    :root {
        /* SIZES */
        --font-size-copy: 1rem;
        --sidebar-width: 20rem;
        --main-width: 940px;
        --video-height: 40rem;
        --touchbar-height: 2rem;
        --moodbar-height: 10rem;
    }
}

@media (prefers-color-scheme: dark) {

}

* {
    font-family: var(--font-base);
}

a {
    transition: 1s all ease;
}

main {
    width: var(--main-width);
    margin: 0 auto;
}

.video {
    width: 100%;
    height: var(--video-height);
    background: var(--color-video-background);
    position: relative;
    overflow: hidden;
}

.video video {
    margin: 0 auto;
    width: 100%;
}

.video-user-playhead {
    transition: background-color 1s ease;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background-color: rgba(255, 0, 0, 0);
    z-index: 1000;
}

.video-user-playhead.moving {
    background-color: rgba(255, 0, 0, 1);
}

.touchbar {
    background: var(--color-touchbar-background);
    width: 100%;
    height: var(--touchbar-height);
    position: absolute;
    left: 0;
    bottom: var(--moodbar-height);
}

.moodbar {
    border-top: 1vw solid #888;
    border-bottom: 1vw solid #888;
    height: var(--moodbar-height);
    width: 100%;
    background-color: #eee;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

.section {
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.section p {
    font-size: var(--font-size-copy);
}

.section .title {
    position: absolute;
    top: 1vw;
    right: 1vw;
}

.section .time {
    position: absolute;
    bottom: 1vw;
    right: 1vw;
}


.section.happy {
    background-color: #fff;
}

.section.meh {
    background-color: #999;
}

.section.sad {
    background-color: #333;
    color: #fff;
}


.section-controls {
    border-top: 0.1vw solid #ddd;
    border-bottom: 1vw solid #ddd;
    width: 100%;
    background-color: #eee;
    box-sizing: border-box;
    padding: 2vw;
    margin: 1rem 0;
}

.slider {
    height: 5vw;
    width: 100%;
    margin: 0;
    margin-top: 2vw;
    background-color: #333;
    position: relative;
    overflow: show;
}

.slider-handle {
    border-radius: 100%;
    width: 6vw;
    height: 6vw;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    background-color: #111;
}