.scroll-button {
    /* position should be fixed so that it sticks to the bottom */
    position: fixed;
    bottom: 5%;
    right: 5%;

    /* removing extra syles outline and border */
    outline: none;
    border: none;
    cursor: pointer;
    user-select: none;
    border-radius: 100%; /* making it rounded */

    /* Making it's content center */
    display: grid;
    place-items: center;

    /* Inital property so that user won't be able to see the button when he visit the page */
    pointer-events: none; /* any event won't work */
    opacity: 0; /* hiding button */
    transition: opacity 500ms ease; /* animation */
    -webkit-tap-highlight-color: transparent; /* removing tap hightlight */
}

/* Setting the Image dimensions */
.scroll-button > img {
    width: 50px;
    height: 50px;
}

.show-btn {
    opacity: 1 !important;
    pointer-events: all !important;
}