/* Стиль для блока, который будет справа по центру */
.right-nav {
    --border: 8px;
    --paddings: 16px;


    display: flex;
    justify-content: flex-end;
    position: fixed;    
    width: var(--right-nav-width);     
    overflow: hidden;
    top: 50%;                    
    right: 0;              
    transform: translateY(-50%); 
    color: black;                 
    z-index: 1000;
    padding: calc(var(--paddings) / 2) 0;
    border-radius: var(--border) 0 0 var(--border);
    transition: background-color var(--animation-speed) ease-in-out, 
        width var(--animation-speed) ease-in-out,
        color var(--animation-speed) ease-in-out;      
}

.right-nav:hover {
    background-color: black;
    width: 320px;
    color: white;
}

.right-nav:hover .right-nav-page-indicator {
    background-color: white;
}

.right-nav-column {
    display: flex;
    flex-direction: column;
    width: 320px;
}

.right-nav-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: calc(var(--paddings) / 2) 0;
    cursor: pointer;
}

.right-nav-row:hover .right-nav-page-indicator {
    background-color: var(--main-color);
}

.right-nav-row:hover .right-nav-page-name {
    color: var(--main-color);
}

.right-nav-page-name {
    flex: 1;
    padding-left: var(--paddings);
    color: white;
}

.right-nav-page-indicator {
    background-color: black;
    width: 44px;
    height: 2px;
    margin: 0 var(--paddings);
}

.right-nav a.active .right-nav-page-name {
    color: var(--main-color);
}

.right-nav a.active .right-nav-page-indicator {
    background-color: var(--main-color);
}

@media (max-width: 768px) {
    .right-nav {
        display: none;
    }
}