:root {


    --colorText: #f2f2f2;
    --colorPrimary: #4B6991;
    --colorSecondary: #fff;
    --colorBorder: hsl(214, 32%, 33%);
    --colorHover: hsl(214, 32%, 47%);
    --colorActive: hsl(214, 32%, 38%);
    
    --colorIconText: #5a5a5a;
    --colorIconBorder: hsl(214, 32%, 53%);
    --colorIconHover: hsl(214, 32%, 83%);
    --colorIconActive: hsl(214, 32%, 73%);


    /* top */
    --top-color-bg: var(--colorPrimary);
    --top-color-border: transparent;
    --top-size-border: 0px;
    --top-btn-color: var(--colorText);
    --top-btn-color-hover: var(--colorText);
    --top-btn-color-active: var(--colorText);
    --top-btn-color-bg: transparent;
    --top-btn-color-bg-hover: var(--colorHover);
    --top-btn-color-bg-active: var(--colorActive);
    /* left*/
    --left-width: 110px;
    --left-color-bg: var(--colorPrimary);
    --left-color-border: transparent;
    --left-size-border: 0px;
    --left-item-color: var(--colorText);
    --left-item-color-hover: var(--colorText);
    --left-item-color-active: var(--colorText);
    --left-item-color-bg: transparent;
    --left-item-color-bg-hover: var(--colorHover);
    --left-item-color-bg-active: var(--colorActive);
    /* right */
    /* --right-color-bg: var(--colorHover); */
    --right-item-color: var(--colorIconText);
    --right-item-color-hover: var(--colorIconText);
    --right-item-color-active: var(--colorIconText);
    --right-item-color-border: transparent;
    --right-item-color-border-hover: var(--colorIconBorder);
    --right-item-color-border-active: var(--colorIconBorder);
    --right-item-color-bg: transparent;
    --right-item-color-bg-hover: var(--colorIconHover);
    --right-item-color-bg-active: var(--colorIconActive);
    /* modal */
    --modal-color-bg: var(--colorSecondary);
    --modal-header-color: var(--colorText);
    --modal-header-color-bg: var(--colorPrimary);
    --modal-header-btn-color: var(--colorText);
    --modal-header-btn-color-hover: var(--colorText);
    --modal-header-btn-color-active: var(--colorText);
    --modal-header-btn-color-bg: transparent;
    --modal-header-btn-color-bg-hover: var(--colorHover);
    --modal-header-btn-color-bg-active: var(--colorActive);
    --modal-body-color-bg: var(--colorSecondary);
    --modal-body-primary-color: var(--colorText);
    --modal-body-primary-color-bg: var(--colorPrimary);

    
}

.container>.top>h1 {
    color: var(--top-btn-color);
}