/* side_nav.css */

/* #VERTICAL NAV */

.arrow_next_section {
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    text-align: center;
    border: dashed 0px orange;
}

.arrow_next_section a {
    display: block;
    font-size: 60px;
    border: dashed 0px red;
}

.vertical_nav_buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -60px;
    width:75px;
    padding: 0px;
    background-color: #666;
    box-shadow: 1px 0 12px rgba(55, 55, 55, 0.7);
    border-radius: 0 10px 10px 0;
    height: auto;
    z-index: 910;
    transition: left 250ms ease-out;
}

.vertical_nav_buttons:hover {
    left: -4px;
    transition: left 250ms ease-out;
}

#go_top a,
.vertical_nav_buttons a {
    display: inline-block;
    aspect-ratio: 1/1;
    margin: 10px 5px 10px auto;
    padding: 8px;
    text-align:center;
    font-size: 22px;
    font-weight: 600;
    color: var(--link_color);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
    background: var(--nav_btn_bg, #454545);
    border-radius: 50%;
    border: solid 1px rgba(232, 232, 232, 0.25);
    box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    transition: color, background 250ms ease-out;
}

#go_top a:hover,
.vertical_nav_buttons a:hover {
    color: var(--link_color_hover);
    background: var(--nav_btn_bg_hover, #666666);
    transition: color, background 250ms ease-out;
}

.vertical_nav_buttons a:hover::before {
    display: none;
}