:root {
    --dbg-bg11: rgba(255, 0, 0, 0.4);
    --dbg-bg21: rgba(0, 255, 0, 0.4);
    --dbg-bg32: rgba(0, 0, 255, 0.4);
    --dbg-bg41: rgba(255, 255, 255, 0.4);
    --dbg-bg12: rgba(255, 0, 0, 0.7);
    --dbg-bg22: rgba(0, 255, 0, 0.7);
    --dbg-bg32: rgba(0, 0, 255, 0.7);
    --dbg-bg42: rgba(255, 255, 255, 0.7);
    --dbg-bg13: rgb(255, 0, 0);
    --dbg-bg23: rgb(0, 255, 0);
    --dbg-bg33: rgb(0, 0, 255);
    --dbg-bg43: rgb(255, 255, 255);
}

* {
    margin: 0;
    padding: 0;
    transition-duration: 0.3s;
    transition-property: background, color, background-color, src;
    font-family: 'Segoe UI', Tahoma, sans-serif; 
}
p, h1, h2, h3, h4, h5 {
    width: fit-content;
}

body {
    background: var(--bg-main);
}

main {
    --main-padding-w: 7%;
    padding: 5% var(--main-padding-w);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    --in-w: min(calc(var(--screen-w) - var(--main-padding-w)*2 - 10px*2), calc(400px + 20px));
}

div#account-block {
    background-color: var(--bg-sec);
    padding: 10px;
    width: var(--in-w);
    border: 2px var(--border-4) dashed;
    margin-bottom: 20px;
    /**/
    div.top-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5px;
        /**/
        h2#username {
            color: var(--text-main);
        }
        p#lvl {
            color: var(--text-main);
        }
    }
    div#xp-block{
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        /**/
        div#xp-bar {
            --bord-w: 3px;
            height: calc(15px - var(--bord-w)*2 - 4px);
            width: calc(var(--in-w) - 88.87px - var(--bord-w)*2 - 2*2px - 5px);
            margin-right: calc(var(--bord-w) + 2px);
            /**/
            border-image-source: var(--border-img-main);
            border-image-repeat: round;
            border-image-slice: 10;
            border-image-width: var(--bord-w);
            border-image-outset: calc(var(--bord-w) + 2px);
            /**/
            div#xp-bar-inner {
                height: 100%;
                width: 0%;
                width: var(--xp-percent);
                margin-right: auto;
                background-color: var(--xp-col);
                transition: width 1s ease-out 0.2s !important;
            }
        }
        p#xp-disp {
            color: var(--text-main);
            margin-top: -2px;
        }
    }
    p#total-progress {
        color: var(--text-main);
    }
}

div#scanner-block {
    border: 3px solid var(--border-main);
    padding: 10px;
    width: var(--in-w);
    background-color: var(--bg-sec-dk);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    button {
        height: 40px;
        color: var(--text-main-acc);
        font-weight: 500;
        font-size: 20px;
        &#start-scan {
            background-color: transparent;
            border: none;
            width: 100%;
        }
        &#stop-scan {
            background-color: var(--bg-dk);
            border: solid 3px var(--border-main);
            width: 80%;
            margin-top: 10px;
        }
    }
    video#scan-vid-disp {
        width: 100%;
        height: 100%;
    }
    svg.scan-region-highlight-svg {
        stroke: var(--border-4) !important;
        stroke-width: 5px !important;
    }
    svg.code-outline-highlight {
        stroke: var(--border-4) !important;
    }
}

div#toplist-block {
    background-color: var(--bg-sec);
    padding: 10px;
    width: var(--in-w);
    border: 2px var(--border-4) dashed;
    margin-bottom: 20px;
    /**/
    ol#toplist {
        list-style-position: inside;
        color: var(--text-main);
        font-size: 18px;
        margin-left: 5px;
        /**/
        li::marker {
            color: var(--text-sec-dk);
            font-weight: bold;
            font-size: 16px;
        }
        li#toplist-1 {
            color: var(--text-main-X-acc);
            font-weight: bold;
        }
        li#toplist-1::marker {
            color: var(--text-main-X-acc);
            font-size: 18px;
        }
        li#toplist-10 {
            margin-left: -9px;
        }
        li span#toplist-LVL-disp {
            display: inline-block;
            font-weight: normal;
            width: fit-content;
            position: absolute;
            right: calc(var(--main-padding-w) + 10px - 3px);
            color: var(--xp-col)
        }
    }
}

.hidden {
    display: none !important;
}