:root{
    --brand-blue:#2b7fff;
    --icon-w: 32px;
    --icon-h: 32px;
    --btn-font-size: 20px;
    --btn-font-bold: 600;
}

body{
    background-color: #f2f2f2;
}

/** Brand **/

.brand-color{
    color:var(--brand-blue);
}

.brand-font{
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
}


.start-left-screen{
    min-height: 400px;
}

.videohub-icon{
    width: var(--icon-w);
    height:var(--icon-h);
}

.nav-icon{
    width:20px;
    height: 20px;
}
.bg-share-link{
    background-color:#a0a0a029;
}

.btn-text{
    font-size:var(--btn-font-size);
    font-weight: var(--btn-font-bold);
}


/* .share-link-font{
    font-size:10px;
    color:#201f1f;
} */

.share-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 500px;
}

.share-link-font {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #201f1f;
}

.copy-link-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
}




/* detect-camera-frame */
.media-controls {
    z-index: 10;
}

.media-control-btn {
    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    color: #212529;

    cursor: pointer;

    transition:
        background-color 0.2s,
        color 0.2s,
        transform 0.2s;
}

.media-control-btn:hover {
    transform: scale(1.05);
}

.media-control-btn.media-off {
    background: #dc3545;
    color: white;
}