Custom CSS link styles aren’t working reliably

Hi Everyone!

I have a front page with a bunch of links in the content pane, they’re written to look like a simple continuous paragraph, and designed so that when you hover over specific phrases they highlight black. I was able to do this using the Additional CSS field by introducing an a:hover override.

Furthermore, these links all fall into one of three categories of projects, and each has a specific link color. I introduced 3 link classes – ‘academic’, ‘professional’ and ‘indie’. The intent is for the actual links to show up on the page in either Blue, Red, or Green. I did this in Additional CSS field as well.

The issue is this – For some reason depending on where you view the page – phone, pc, different browser, you’ll see some of the styles showing up and some not – for instance on Chrome, only the green-styled links show up proper, same for iphone, meanwhile on MS Edge, I get all – green, blue, red.

My gut feeling is that I shouldn’t be using Additional CSS to do these style overrides and it’s just creating some sort of a clash, but then I have no idea where or how to put this CSS code in the actual theme stylesheets.

I hope this makes sense. Any idea on how I could address this?
Thanks so much!!

P.S.
My entire ‘Additional CSS’ code for the page right now is this:

.main-navigation li {
border: none !important;

}

.site-header a:hover {background-color: white;}

.main-navigation a {
font-size: 13px !important;
font-family: Courier New
!important;
font-weight: bold;
padding-top: 0em;
padding-bottom: 0em;
padding-left: 6.5em;
}

.main-navigation a:hover {
color: black !important;
text-decoration: none !important;
}

body {
background: #ffffff !important;
font-family: arial;
font-size: 20px !important;
letter-spacing: 0px;
color: black;

line-height: 22px
}

a:link {
color: black;
text-decoration: none !important;
border:none;
}

a:hover {
color: WHITE !important;
text-decoration: none !important;
background-color: BLACK;
border:none;
}

a.academic:link {
color: #becf00;
text-decoration: none !important;
border:none;
}

a.professional:link {
color: #6bbcff;
text-decoration: none !important;
border:none;
}

a.indie:link {
color: #b81200;
text-decoration: none !important;
border:none;
}

.site-info{
display:none;
}

#masthead > a {
display: flex;
align-items: center;
justify-content: center;
}

figcaption {
font-size: small;
}

The page I need help with: [log in to see the link]