html {
    scroll-behavior: smooth;
}
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0D0D0D;
    border-radius: 50px;
    padding: 0.5rem;
    text-decoration: none;
    transition: 0.2s ease-out;
}
.back-to-top span {
    color: #ffffff;
    font-size: 3rem;
    transition: 0.2s ease-out;
}
.back-to-top:hover {
    background-color: #323232;
}
.back-to-top:hover span {
    transform: translateY(-4px);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.back-to-top {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    display: inline-flex;
    opacity: 1;
}
.fadeIn {
    animation-name: fadeIn;
}
.fadeOut {
    animation-name: fadeOut;
}

/* Hide button on mobile screens */
@media (max-width: 500px) {
    .back-to-top {
        display: none !important;
    }
}