:root {
    /* Color palette */
    --color-primary: #F8FCFF;
    --color-secondary: #FFE330;
    --color-menu-background: rgba(0, 0, 0, 0.75);
    --color-menu-font: white;
    --color-slider-bg: rgba(255, 255, 255, 0.3);

    /* Dimensions */
    --dimen-controls-height: 5em;
}

html, body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: sans-serif;

    display: grid;
    grid-template-areas: 'main' 'controls';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr var(--dimen-controls-height);
}

main {
    grid-area: main;
    display: flex;
    background-color: var(--color-primary);
    width: 100%;
}

main > model-viewer {
    width: 100%;
    height: auto;

    /* Vertical panning for the model-viewer element */
    touch-action: none;
}

#controls {
    grid-area: controls;
    height: var(--dimen-controls-height);

    display: grid;
    grid-template-areas: 'progress';
    grid-template-columns: 1fr;
    gap: .2em;
    align-items: center;

    padding-left: 1em;
    padding-right: 1em;

    background-color: var(--color-primary);
}

#controls > #progress {
    grid-area: progress;

    width: auto;
    height: 0.4cm;

    background-color: var(--color-slider-bg);
    border-radius: .6em;
    border: 0;
    outline: none;
    cursor: pointer;
    transition: .2s;
    -webkit-transition: .2s;
    -webkit-appearance: none;
}

#controls > #progress::-webkit-slider-runnable-track {
    height: 1em;
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-secondary);
}

#controls > #progress::-moz-range-track {
    height: 1em;
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-secondary);
}

#controls > #progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 1.5cm;
    height: 1.5cm;
    margin-top: -0.55cm;
    border: 0;
    border-radius: 50%;
    background-image: url('../assets/slider.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#controls > #progress::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 1.5cm;
    height: 1.5cm;
    margin-top: -0.55cm;
    border: 0;
    border-radius: 50%;
    background-image: url('../assets/slider.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#controls > #progress:focus {
    outline: 0;
}

model-viewer {
    background-color: #F8FCFF;
    overflow-x: hidden;
    --poster-color: white;
  }

.time_middle
{
    background-color: #DCEFFF;
    color: #301E5F;
    border: none;
    border-radius: 12px;
}

.time_start
{
    background-color: #DCEFFF;
    color: #301E5F;
    border: none;
    border-radius: 12px;
}

.time_end
{
    background-color: #DCEFFF;
    color: #301E5F;
    border: none;
    border-radius: 12px;
}