html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

:root {
    --sidebar-width: 300px;
    --sidebar-padding: 20px;
    --sidebar-background: white;
    --sidebar-font-size: 1em;

    --bottombar-height: 80px;

    --main-background: #f5f5f5;

    --content-border: 1px solid #ccc; /* none */
    --element-border: 1px solid #a1a1a1;
    --content-shadow: none; /*0 0 10px rgba(0, 0, 0, 0.2); */

    --button-background: var(--main-background);
    --button-hover-background: #f8f8f8;
    --button-hover-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    --header-font-family: "Quicksand", serif;
    --body-font-family: system-ui, serif;
}

body {
    font-family: var(--body-font-family);
}

main {
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr var(--bottombar-height);

    background: var(--main-background);
}

.sidebar {
    padding: var(--sidebar-padding);
    background: var(--sidebar-background);
    box-shadow: var(--content-shadow);
    font-size: var(--sidebar-font-size);

    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 99;
}

.sidebar.left {
    border-right: var(--content-border);
    grid-row: span 2;
}

.bottombar {
    border-top: var(--content-border);
    box-shadow: var(--content-shadow);
    background: var(--sidebar-background);
    position: relative;
}

.main-container {
    position: relative;
}

.main-container #videoCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    box-shadow: var(--content-shadow);
    border: var(--content-border);

    background-image: url("assets/svgs/video-placeholder.svg");
    background-size: 100% 100%;
}

.main-container #videoCanvas:not(.has-video) {
    cursor: pointer;
}

.sidebar > * {
    text-align: center;
    width: 100%;
}

.sidebar h1, .sidebar h2, .sidebar h3,
.sidebar h4, .sidebar h5, .sidebar h6 {
    margin: 0;
}

.sidebar .range-container {
    box-sizing: border-box;
    background-color: var(--button-background);
    font-family: var(--body-font-family);
    padding: .5em;
    border: var(--element-border);
    font-size: 1em;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar .range-container * {
    width: 100%;
}

.sidebar .range-container input[type="range"] {
    cursor: pointer;
}

.sidebar button {
    background-color: var(--button-background);
    font-family: var(--body-font-family);
    padding: .5em;
    border: var(--element-border);
    cursor: pointer;
    font-size: var(--sidebar-font-size);
}

.sidebar button:hover {
    background: var(--button-hover-background);
    box-shadow: var(--button-hover-shadow);
}

.bottombar #timelineCanvas {
    height: 100%;
    width: 100%;
    position: absolute;
}