@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400,500,600,700&display=swap');

:root {
    /* Red Color Scheme from 404 page */
    --primary-red: #DA4241;
    --dark-red: #c62828;
    --light-red: #ff5252;
    --accent-red: #ff8a80;
    
    /* Background and text colors */
    --body-bg: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
    --border: 1px solid rgba(229, 57, 53, 0.2);
    --border-radius: 8px;
    
    /* Main containers */
    --msger-width: 800px;
    --msger-height: 700px;
    --msger-bubble-width: 85%;
    --msger-bg: #ffffff;
    --box-shadow: 0 8px 32px rgba(229, 57, 53, 0.1);
    
    /* Whiteboard */
    --wb-width: 800px;
    --wb-height: 600px;
    --wb-bg: #ffffff;
    
    /* Selection and messages */
    --select-bg: #f8f9fa;
    --left-msg-bg: #f1f3f4;
    --right-msg-bg: var(--primary-red);
    --private-msg-bg: var(--dark-red);
    
    /* Buttons and interactive elements */
    --btns-bg-color: var(--primary-red);
    --btns-hover-scale: scale(1.05);
    --settings-bg: #ffffff;
    --tab-btn-active: rgba(229, 57, 53, 0.1);
    
    /* Button bars positioning */
    --btns-top: 50%;
    --btns-right: 0%;
    --btns-left: 20px;
    --btns-margin-left: 0px;
    --btns-width: 60px;
    --btns-flex-direction: column;
    
    /* Bottom buttons bar */
    --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: 20px;
    --bottom-btns-flex-direction: row;

    /* Transcription */
    --transcription-height: 680px;
    --transcription-width: 420px;
    --trx-bg: #ffffff;

    /* Editor */
    --editor-container-width: 100%;
    --editor-container-height: 100%;
    --editor-height: 85vh;

    /* Video */
    --vmi-wh: 15vw;
    --videoObjFit: cover;
    --videoBar-active: 2px solid var(--primary-red);

    /* Dropdown and text */
    --dd-color: #333333;
}

* {
    outline: none;
    font-family: 'IBM Plex Sans', sans-serif;
}