Altering link appearance throughout the site

I’m creating a new site using the Twenty Twenty Three. I would like to change the styling for all the links on the site, including the top menu, the footer, and the body of each page. I would like unvisited links to be underlined and blue. Visited links should be underlined and purple. Active links should be underlined and red.

I did some research online and tried the following CSS, but it didn’t seem to work – or maybe I entered it into the wrong place:

/* Menu links */
.wp-block-navigation-item__content {
text-decoration: underline;
}

.wp-block-navigation-item__content:link {
color: blue;
}

.wp-block-navigation-item__content:visited {
color: purple;
}

.wp-block-navigation-item__content:active {
color: red;
}

/* Text links */
a {
text-decoration: underline;
}

a:link {
color: blue;
}

a:visited {
color: purple;
}

a:active {
color: red;
}

I’m fairly new to WordPress, so don’t assume too much knowledge on my part. But I can follow instructions. Thank you in advance for any help you can provide.

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