:root{
    --width: 240px;
    --height: calc(var(--width) * 3 / 4);
    /* width:height - 4:3 */
}

body {
    background-color:#0E1D2B;
    font-family: 'Roboto Mono', monospace;
}

p {
    color:#DBE4E7;
}
label {
    color:#DBE4E7;
}

.topBar {
    color:#DBE4E7;
    background-color:#0B1823;
    width:100%;
    height:60px;
    position:sticky;
    z-index: 999;
    display:flex;
    justify-content: center;
    top:0;
    left:0;
}

button {
    background-color:#379e92;
    color:#DBE4E7;
    width:max-content;

    border-style:none;
    border-radius:5px;
    font-family: 'Roboto Mono', monospace;
    
}

.photoBooth{
    display:flex;
    justify-content: center;
}

.boothButtons {
    display:flex;
    justify-content: center;
    position:relative;
    justify-content:space-evenly;
    padding: 40px;
    top: 100px;
}

video {
    width: var(--width);
    height: var(--height);
    position:relative;
    top: 80px;
    display:flex;
    border-style:solid; 
    border-color:#379e92;
    border-radius:3px;
    border-width:5px;
    border-bottom-right-radius: 0%;
    border-top-right-radius: 0%;
}

canvas {
    width: var(--width);
    height: var(--height);
    position:relative;
    top: 80px;
    display:flex;
    border-style:solid; 
    border-color:#379e92;
    border-radius:3px;
    border-width:5px;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
}

.allSpotify {
    position: relative;
    justify-content: center;

}