:root {
    /* Active state styling variables */
    --active-border-thickness: 1px;
    --active-border-color: rgb(255, 255, 255);
    --active-outline-thickness: 3px;
    --active-outline-color: rgb(36, 149, 255);

    /* Static Variables */
    --frame-size: 15px;
    /* Default frame thickness */
    --frame-margin: 0px;
    /* Default frame passepartout thickness */
    --shadow-opacity: 0.3;
    /* General shadow opacity */
    --font-family: "Roboto", sans-serif;
    --secondary-color: #ffffff;
    --hover-color: #0e458d;
    --border-radius: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Dynamic Variables (Updated by JS) */
    --frame-thickness: 15px;
    --frame-width: 600px;
    --frame-height: 400px;
    --outer-shadow-opacity: 0.6;
    --inner-shadow-opacity: 0.6;

    /* New Variables */
    --shadow-horizontal-offset: 8px;
    /* Bottom shadow horizontal offset */
    --shine-width: 8px;
    /* Frame-shine thickness */

    /* Passepartout Colors */
    --passepartout-white: #fafafa;
    --passepartout-black: #272525;
    --passepartout-creme: #f7f3ed;
    --passepartout-gray: #444443;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 20px;
    background: #f0f0f0 url("/assets/bg2.jpg") no-repeat center center fixed;
    background-size: cover;
    user-select: none;
}