/* Global Scope (:root matches the <html> tag) */
:root {
    /* 1rem = 16 */
    --color-body: white;
    --background-color-body: rgba(0,0,255,0.9);
    --background-color-body: #222222;
    --background-color-label: grey;
    --font-size-desktop: 1rem;
    --font-size-desktop-small: calc( 1rem * 0.8);
    --font-size-mobile: 1.2rem;
    --font-size-mobile-small: calc( 1.2rem * 0.8);
    --label-padding-desktop: 0.3125rem;
    --label-padding-mobile: 0.3125rem;
    --input-padding-desktop: 0.3125rem;
    --input-padding-mobile: 0.3125rem;
    --button-padding-desktop: 0.3125rem;
    --button-padding-mobile: 0.3125rem;
}
body{
    color: var(--color-body);
    background-color: var(--background-color-body);
    /* font-family: Consolas, "Lucida Console", "Courier New", monospace; */
    font-family: 'Roboto', sans-serif;
    font-size: var(--font-size-mobile);
    width: 100%;
    margin: 0;
}
main{
    position: relative;
    display: flex;
    flex-direction: column;
}

/* STREAM start */
    .media-container {
        position:relative;
        /* Shrinks container down to 320px */
            width:fit-content;
        /* Shrinks container down to 320px */
        border: 2px solid white;
    }
    /* MEDIA-ELEMENT LAYERS 1 2 & 3 start */
        .webcam-video{
            /* Base video stays in normal flow to give the container height */
            display: block;
            width: 320px;
            height: 240px;
            /* width: 95%; */
            object-fit: cover;
            z-index: 1;
        }
        .video-canvas,
        .canvas-image{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-canvas{
            z-index: 2;
            display:none;
        }
        .canvas-image{
            z-index: 3;
            opacity:50%;
        }
    /* MEDIA-ELEMENT LAYERS 1 2 & 3 end */
    /* START STOP BUTTONS start */
        .wrapper-start-stop-buttons{
            position:absolute;
            width:310px;                
            top:5px;
            left:5px;
            display:flex;
            flex-direction: row;
            justify-content:space-between;
            z-index: 200;
        }
        .stop-button{
            margin:5px;
            padding:5px;
            color:white;
            background-color: red;
            cursor:pointer;
        }
        .start-button{
            margin:5px;
            padding:5px;
            color:white;
            background-color: green;
            cursor:pointer;
        }
    /* START STOP BUTTONS end */
    /* CAMERA FACING MODE TOGGLE BUTTON start */
        .wrapper-camera-facing-mode-toggle{
            position:absolute;
            width:310px;                
            bottom:5px;
            left:5px;
            /* display:flex;
            flex-direction: row;
            justify-content:space-around; */
            z-index: 200;
        }
        .camera-facing-mode-toggle{
            visibility:hidden;
            margin:5px;
            padding:5px;
            color:black;
            background-color: white;
            cursor:pointer;
            border:1px solid black
        }
    /* CAMERA FACING MODE TOGGLE BUTTON start */
/* STREAM end */

/* DASHBOARD start */
    .sec-cam-dashboard{
        display: none;
        position: relative;
        border:2px solid black;
        margin-top:10px;
        margin-left:3px;
        width: 320px;
    }
    .sec-cam-dashboard p{
        background: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
        padding: 10px;
        border-radius: 5px;
        text-align: center;
    }
/* DASHBOARD end */

/* PREVIEW IMAGE (preview of captured image) start */
    .preview-image-container{
        position:relative;
        /* Shrinks container down to 320px */
            width:fit-content;
        /* Shrinks container down to 320px */
        /* left:3px; */
        /* height:240px; */
        margin-top: 3px;
        /* background: orange; */
        /* z-index: 300; */
    }
    .preview-image-ttile{
        text-align: center;
        position: relative;
        width:320px;
        top:1px;
        left:1px;
        background-color: white;
        color:blue;
        border:1px solid blue;
        /* z-index: 300; */
    }
    .preview-image{
        display:block;
        /* position:absolute; */
        top:0px;
        left:0px;
        width: 320px;
        height: 240px;
        /* width: 95%; */
        border: 2px solid black; /* Optional for visibility */
        object-fit: cover; /* Ensures proper scaling for images and videos */
        /* background-color: purple; */
        /* z-index: -300; */
    }
/* PREVIEW IMAGE (preview of captured image) end */

/* CUSTOM ALERT start */
    .custom-alert-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* border: 1px solid chartreuse; */
        z-index: 9999;
    }
    .custom-alert-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #007bff;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }
    .custom-alert-dialog button {
        margin-top: 10px;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }
    .custom-alert-dialog button:hover {
        background-color: #0056b3;
    }
/* CUSTOM ALERT start */

/* STILL FRAME HISTORY start */
    .still-frame-history-container{
        margin-top:10px;
        margin-left:3px;
        /* width: 320px; */
        width: 90%;
        border: 1px solid darkgreen;
        /* background-color: aqua; */
    }
    .still-frame-history{
        padding-left: 3px;
        color:yellow;
        background-color:darkcyan;
        background-color: #0056b3;
        /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    }
/* STILL FRAME HISTORY end */

/* STANDARD BUTTON start */
    .sec-cam-std-button {
        margin: 0 0.5rem 0.25rem 0.5rem;
        font-size: var(--font-size-mobile);
        padding: var(--button-padding-mobile);
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 500ms ease;
    }
    .sec-cam-std-button:hover {
        background-color: silver;
    }
    .sec-cam-std-button.animate{
        animation: buttonClick 200ms ease-in-out;
    }
    @keyframes buttonClick {
        0% {transform: scale(1);}
        50% {transform: scale(1.5);}
        100% {transform: scale(1);}
    }
/* STANDARD BUTTON end */

/* SPECIFIC BUTTONS start */
    .danger-button{
        color: white;
        background-color: red;
    }
/* SPECIFIC BUTTONS end */

/*   🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 S T A R T */
    /* @media screen and (max-width: 768px) and (orientation: portrait) {
    } */

    /* @media screen and (max-width: 768px) and (orientation: landscape) {
    } */

    /* Styles for when the app is launched as an installed PWA */
        /* @media screen and (display-mode: standalone) {
            body {
                padding-top: env(safe-area-inset-top);
            }
        } */

    @media screen and (min-width: 1000px) {
        body{
            display: flex;
            flex-direction: column;
            width: 500px;
            background-color: red;
        }
    }
/*   🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 🖥️💻🖥️💻🖥️💻🖥️💻🖥️💻 E N D     */