/* under construction */

    /**:has(>.under-construction){
         nothing 
    }*/

    .under-construction {
        --bhw: 24px;
        --overflow: 0px;
        --col1: #FCBF49;
        --col12: #FDDC9B;
        --col13: #D29D31;
        --col2: #003049;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% + (var(--overflow) * 2));
        height: calc(100% + (var(--overflow) * 2));
        position: absolute;
        left: calc(0% - var(--overflow));
        top: calc(0% - var(--overflow));
    }

    body>.under-construction {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .under-construction::before {
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.75;
        background: var(--col1);
        background: repeating-radial-gradient(var(--bhw) var(--bhw) at center, var(--col2) 0%, var(--col1) 1px, var(--col1) calc(50% - 1px), var(--col2) calc(50% + 1px), var(--col2) 100%);
        clip-path: polygon(0 0, var(--bhw) 0, 50% calc(50% - var(--bhw)), calc(100% - var(--bhw)) 0, 100% 0, 100% var(--bhw), calc(50% + var(--bhw)) 50%, 100% calc(100% - var(--bhw)), 100% 100%, calc(100% - var(--bhw)) 100%, 50% calc(50% + var(--bhw)), var(--bhw) 100%, 0 100%, 0 calc(100% - var(--bhw)), calc(50% - var(--bhw)) 50%, 0 var(--bhw));
    }

    .under-construction .plate {
        display: flex;
        aspect-ratio: 1 / 1;
        flex-direction: column;
        justify-content: center;
        width:min-content;
        height:min-content;
        align-items: center;
        padding: 4px;
        border: 4px solid var(--col12);
        background: var(--col1);
        box-shadow: 5px 5px 0px 0px var(--col13);
        gap: 8px;
    }

    .under-construction .plate i {
        font-size: 32px;
        color: var(--col2);
        text-align: center;
    }

    .under-construction .plate .text {
        font-size: 16px;
        color: var(--col2);
        font-family: beaufort-pro;
        line-height: 16px;
        font-weight: 900;
        text-align: center;
    }

    .under-construction:has(>.plate .message) .plate {
        width: fit-content;

    }

    .under-construction .plate .message {
        max-width: 200px;
        font-size: 16px;
        color: var(--col2);
        font-family: beaufort-pro;
        line-height: 16px;
        font-weight: 700;
        text-align: center;
    }