:root {
    --verr: 5;
    --berlin: rgb(120, 120, 120);
    --zagreb: rgb(31, 31, 31);
    --sydney: rgb(57, 185, 236);
    --helsinki: rgb(126, 248, 240);
    --dublin: rgb(160, 160, 160);

    --lisabon: rgb(59, 55, 70);
    --tokio: rgb(243, 54, 70);
    --rome: rgb(10, 10, 10);
    --toronto: rgb(255, 255, 255);

    --c1: rgb(229, 115, 115);
    --c2: rgb(176, 196, 222);

    --correspondent: var(--berlin);
    --resident: var(--dublin);


    --bgr-0: var(--berlin);
    --fnt-0: var(--helsinki);
    --lne-0: var(--lisabon);
    --bgr-1: var(--sydney);
    --fnt-1: var(--dublin);
    --lne-1: var(--lisabon);

    --snk_bg_color: var(--zagreb);
    --snk_root_button: var(--tokio);
    --snk_inactive_items: var(--rome);
    --snk_system_items: var(--lisabon);
    --snk_selected_items: var(--helsinki);
    --snk_page_label: var(--sydney);

    /*sizes*/
    /*
 RGB: #A0A0A0 → (160, 160, 160)
       --dublin: rgb(143, 188, 143);
          --dublin: rgb( 160, 160, 160);
    --item_height: 76px;
    --item_width: 76px;
    */

    --item_height: 80px;
    --item_width: 80px;

    --item_marg: 5px;
    /*
   
    --item_marg: 5px;
    */

    /*  --item_marg: 2px;- 5px ok*/
    --item_border: 0px;
    --ord_item_marg: 2px;

    --chevron-marg: 6px;

    --outer-marg: 6px;
    --outer-width: calc(var(--item_width) - var(--outer-marg));
    --outer-height: calc(var(--item_height) - var(--outer-marg));

    --outer-2marg: calc(2* var(--outer-marg));
    --outer-2m_width: calc(var(--item_width) - var(--outer-2marg));
    --outer-2m_height: calc(var(--item_height) - var(--outer-2marg));
    /*sizes*/
}


body {
    margin: 0 auto;
    height: 100vh;
    background-color: #121212;
    color: #ffffff;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
}


/*for help*/

.editor_panel {
    position: absolute;
    width: 700px;
    height: 20px;
    background-color: darksalmon;
    padding: 12px;
    border-radius: 12px;
    bottom: 40px;
    z-index: 9999;
}

.btn {
    border-radius: 8x;
    border: 0cap;
    background-color: darkseagreen;
    cursor: pointer;
}

.wrk-panel {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 509px;
    height: 831px;
    overflow: hidden;
}