#side_btns {
    position: absolute;
    right: 0; top: 0; width: 7rem; height: 100%;   
    z-index: 20;
}

#side_btns button {
    position: absolute;
    display: block;
    width: 4rem; height: 4rem;
    background-color: transparent;
    padding: 0;
}

#side_btns .bg_outline::before,
#side_btns .bg_outline::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-radius: 2rem;
    left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
}

#side_btns .bg_outline::before {
    border: 0.3rem solid rgba(20, 20, 20, 0.2);;
    background-clip: content-box;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#side_btns .bg_outline::after {
    border: 0.1rem solid rgba(255, 255, 255, 1);    
}

#side_btns button img {
    position: relative;
    pointer-events: none;
    width: 4rem; height: 4rem;
    border: 0;
    z-index: 2;
}


#side_btns button.menu { left: 0; top: 3rem; }
#side_btns button.fs { left: 0; bottom: 3rem; }



#side_btns .zoom {
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
}

#side_btns .zoom .in_out {
    position: relative;
    display: flex;
    flex-direction: column;
}

#side_btns .zoom .in_out button {
    position: relative;
}

#side_btns button.gyro {
    position: absolute;
    left: 0; bottom: 3rem;
}

@media (width < 500px) {
    #side_btns { width: 5rem; }
    #side_btns button.menu { top: 1rem; }
}

@media (pointer:coarse) {
    #side_btns button.fs { display: none; }
}