#top_and_bottom_buttons {
    z-index: 105;
    display: flex;
    flex-direction: column;
    position: fixed;
}

#top_button, #bottom_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: .15;
}

#bottom_button {
    transform: rotate(180deg);
}

/* [window_within_buttons_clickable_height="false"] {
  pointer-events: none;
  border-color: #333;
} */

@media only screen and (max-width: 349px) {
    #top_and_bottom_buttons {
        font-size: 30px;
        right: 12.5px;
        bottom: 12.5px;
        #top_button, #bottom_button {
            height: calc(80px*var(--scroll_buttons_size_fraction_for_under_350px_wide_screens));
            width: calc(80px*.8*var(--scroll_buttons_size_fraction_for_under_350px_wide_screens));
        }
        #top_button img, #bottom_button img {
            height: calc(80px*.3*.5832*var(--scroll_buttons_size_fraction_for_under_350px_wide_screens));
            width: calc(80px*.3*var(--scroll_buttons_size_fraction_for_under_350px_wide_screens));
        }
    }
}
@media only screen and (min-width: 350px) and (max-width: 575px) {
    #top_and_bottom_buttons {
        font-size: 30px;
        right: 14.191px;
        bottom: 14.191px;
        #top_button, #bottom_button {
            height: calc(80px*var(--scroll_buttons_size_fraction_for_350px_through_576px_wide_screens));
            width: calc(80px*.8*var(--scroll_buttons_size_fraction_for_350px_through_576px_wide_screens));
        }
        #top_button img, #bottom_button img {
            height: calc(80px*.3*.5832*var(--scroll_buttons_size_fraction_for_350px_through_576px_wide_screens));
            width: calc(80px*.3*var(--scroll_buttons_size_fraction_for_350px_through_576px_wide_screens));
        }
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    #top_and_bottom_buttons {
        font-size: 30px;
        right: 15.625px;
        bottom: 15.625px;
        #top_button, #bottom_button {
            height: calc(80px*var(--scroll_buttons_size_fraction_for_576px_through_767px_wide_screens));
            width: calc(80px*.8*var(--scroll_buttons_size_fraction_for_576px_through_767px_wide_screens));
        }
        #top_button img, #bottom_button img {
            height: calc(80px*.3*.5832*var(--scroll_buttons_size_fraction_for_576px_through_767px_wide_screens));
            width: calc(80px*.3*var(--scroll_buttons_size_fraction_for_576px_through_767px_wide_screens));
        }
    }
}
@media only screen and (min-width: 768px) {
    #top_and_bottom_buttons {
        font-size: 30px;
        right: 20px;
        bottom: 20px;
        #top_button, #bottom_button {
            height: 80px;
            width: calc(80px*.8);
        }
        #top_button img, #bottom_button img {
            height: calc(80px*.3*.5832);
            width: calc(80px*.3);
        }
    }
}