@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

:root {
    --body-bg: linear-gradient(135deg, #07111f, #0d2340);
    --border: 0.5px solid rgb(255 255 255 / 18%);
    --border-radius: 1.125rem;
    --msger-width: 800px;
    --msger-height: 700px;
    --msger-bubble-width: 85%;
    --msger-bg: linear-gradient(135deg, #07111f, #0d2340);
    --wb-width: 1920px;
    --wb-height: 1080px;
    --wb-bg: linear-gradient(135deg, #07111f, #0d2340);
    --select-bg: #0b1b2f;
    --select-border-radius: 12px;
    --select-focus-color: rgba(102, 190, 255, 0.5);
    --left-msg-bg: #091624;
    --right-msg-bg: #10243a;
    --private-msg-bg: #0e3a5b;
    --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
    --btns-hover-scale: scale(1.1);
    --settings-bg: linear-gradient(135deg, #07111f, #0d2340);
    --tab-btn-active: #12365c;
    --btns-bg-color: rgba(7, 17, 31, 0.82);

    /* bottom buttons bar horizontal default */
    --bottom-btns-top: auto;
    --bottom-btns-left: 50%;
    --bottom-btns-bottom: 0;
    --bottom-btns-translate-X: -50%;
    --bottom-btns-translate-Y: 0%;
    --bottom-btns-margin-bottom: 18px;
    --bottom-btns-flex-direction: row;

    --transcription-height: 680px;
    --transcription-width: 420px;
    --trx-bg: linear-gradient(135deg, #07111f, #0d2340);

    --editor-container-width: 100%;
    --editor-container-height: 100%;
    --editor-height: 85vh;

    --vmi-wh: 15vw;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
    --videoObjFit: cover;

    --dd-color: #66beff;

    --videoBar-active: 1px solid rgba(102, 190, 255, 0.32);
}

* {
    outline: none;
    font-family: 'Montserrat';
}

*:focus-visible {
    outline: 2px solid var(--select-focus-color);
    outline-offset: 2px;
}