Remove underline for text links and create a hover over/mouse click color

As title states - trying to remove hyperlinks from all pages on the site, and then add a custom hover colour in the footer. I think I have tried everything. Nothing works.

SOS.

Help 🙂 thanks!

@TABJ90 Based on the screenshot you shared, there's an error in your code that's preventing it from working. However, since you didn't share the complete code, it's not possible to pinpoint the exact issue.

Sorry about that - here is the existing custom css (missing opening '{' :

a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}

#page {overflow-x:hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 50%;
 margin-right: 5%
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -225%; }
}

a {
text-decoration: none !important
}

<a id="back-to-top" title="Back to top">🔝</a>
<style>
 #back-to-top {
    position: fixed;
    bottom: 4vw;
    right: 4vw;
    z-index: 9999;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #DDD;
    cursor: pointer;
    border-radius: 5px;
   opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
#back-to-top:hover {
    background: #CCC;
}
</style>
<script>
// When the user scrolls down 400px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
        document.getElementById("back-to-top").style.opacity = "1";
    } else {
        document.getElementById("back-to-top").style.opacity = "0";
    }
}

// When the user clicks on the button, smoothly scroll to the top of the document
document.getElementById("back-to-top").addEventListener("click", function(event){
    // Prevent the default anchor behavior
    event.preventDefault();
    // Smoothly scroll to the top
    window.scrollTo({top: 0, behavior: 'smooth'});
});
</script>

---

trying to add colour change over hover with this:

footer a:hover {
  color: #0D974B !important;
}

//Remove Link Underline
h1,h2,h3,h4,p,code,nav {
 a,span {
   background-image: none!important;
   text-decoration: none!important;
 }
}

and remove all hyperlinks with one of these:

#footer-sections a {
  text-decoration: none !important;
}

or 

//remove underlines from hyperlinks//

.sqs-block-html a {background-image:none!important}

/* Remove non-background image underline for heading and paragraph links */
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}

all in the custom CSS section!

Thank you tuanphan. That worked! ❤️