@font-face {
        font-family: 'open_sanslight';
        src: url('../assets/fonts/opensans-light-webfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'poppins_light';
        src: url('../assets/fonts/Poppins-Light.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'howdy_monkeyregular';
        src: url('../assets/fonts/howdy-monkey-webfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'digital-7';
        src: url('../assets/fonts/digital-7-webfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    :root {
        --banner-color: #c8fdbd;
        --banner-shadow: 240, 46, 170;
    }

    html { min-height: 100vh; height: 100%; user-select: none; }
    body {
        margin: 0; padding: 0; background-color: #002f59; user-select: none; overscroll-behavior-y: none;
        font-family: 'open_sanslight', sans-serif; min-height: 100vh; height: 100%;
    }
    [x-cloak] { display: none !important; }

    .flex-box { display: flex; }
    .flex-box-fullw { width: 100%; }
    .flex-box-fullh { height: 100%; }
    .flex-box-fullvh { height: 100vh; }
    .v-centered { align-items: center; }
    .h-centered { justify-content: center; }
    .centered { align-items: center; justify-content: center; }

    #main {
        box-sizing: border-box; width: 360px; height: 100%; margin: 0 auto; background-color: #022747;
        display: flex; flex-direction: column;
    }
    .boot-msg { font-family: 'Courier New', Courier, monospace; padding-left: 4px; font-size: 12px; font-weight: 700; }
    .ok-msg { color: chartreuse;} .nok-msg { color: red; padding-bottom: 3px; }


    .modal-msg { margin-top: 16px; color: aliceblue; letter-spacing: 1px; font-weight: 600; }
    .modal-close-btns {
        padding: 3px 10px;
        background-color: #07cc07; /* Green background */
        color: aliceblue;
        font-weight: bold;
        letter-spacing: 2px;
        border-radius: 8px;
        border: 1px solid aliceblue;
        transition: all 0.3s ease;
        margin-top: 16px; margin-bottom: 16px;
    }

    .modal-btns:active {
        transform: translateY(2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* keypad */
    .keypad {
        position: absolute; width: 100%; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 500;
        box-sizing: border-box; background-color: #002f59; border-radius: 10px;
        box-shadow: 0px 40px 45px rgba(0, 0, 0, .4); padding-top: 6px; border: 1px solid #536a7e;
    }
    .up-arrow {
        --t: 30%; /* control the tail part */
        --h: 40%; /* control the head part */
        
        aspect-ratio: 1/.9;
        height: 16px;
        background: #4ABFCE;
        clip-path: polygon(calc(50% - var(--t)/2) 100%,calc(50% - var(--t)/2) var(--h),0 var(--h),50% 0,100% var(--h),calc(50% + var(--t)/2) var(--h),calc(50% + var(--t)/2) 100%);
    }
    .keypad-row { display: flex; justify-content: center; margin-bottom: 8px; column-gap: 10px;}
    .keypad-btn {
        border-radius: 5px; background-color: #022747; padding: 2px 6px; border: 1px solid #536a7e;
        font-size: 18px; font-weight: 700; color: #00BCD4;
    }
    .keypad-btn:active { background-color: rgba(255, 255, 255, 0.712); }