ericoc.css

@font-face { font-family: 'Permanent Marker'; src: local('Permanent Marker'), local('PermanentMarker'), local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url('/logo.woff') format('woff'), url('/logo.woff2') format('woff2'), url('/logo.ttf') format('truetype'); }
body { font-family: 'Open Sans', sans-serif; }
h1, header, header a:link, header a:visited  { color: #4682B4; font-family: 'Permanent Marker', cursive; font-size: 2rem; }
#logo, a:link, header a:hover, header a:active { color: #0096FF; text-decoration: none; }
a:active, a:hover { color: #4682B4; text-decoration: underline; }
a:visited { color: #4682B4; text-decoration: none; }
nav ul { list-style: none; padding: 0; text-align: center; word-spacing: 2em; }
nav li, footer li { display: inline; }
body { margin: auto; width: 80vw; background-color: #323639; color: #d6d6d7; }
h4 { font-style: italic; }
summary::marker { color: #d6d6d7; }
summary::-webkit-details-marker { color: #d6d6d7; }
.anchor-link {
    padding: 0 .175rem;
    font-weight: 400;
    color: #4682B4;
    text-decoration: none;
    opacity: 0;
    transition: color 0.15s ease-in-out,opacity 0.15s ease-in-out;
}
:target>.anchor-link {
    border-color: #0096FF;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 0.15rem;
}
main li a[target="_blank"]::after { margin-left: 0.25rem; content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); filter: invert(0.5); }
@media (prefers-reduced-motion: reduce) { .anchor-link { transition: none } }
.anchor-link::after { color: #4682B4; }
.anchor-link:focus, .anchor-link:hover, :hover>.anchor-link, :target>.anchor-link {
    color: #0d6efd;
    text-decoration: none;
    opacity: 1
}