:root {
    color-scheme: light dark;
}
* {
    font-family: Helvetica;
}
body {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
}
a {
    color: rgb(0, 64, 255);
    text-decoration: none;
    position: relative;
    transition: color 0.25s;
}
a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 2px solid rgb(0, 128, 255);
    transition: 0.4s;
}
a:hover:after {
    width: 100%;
    color: rgb(0, 128, 255);
}
a:hover {
    color: rgb(0, 128, 255);
}
ul {
    padding: 0;
    list-style-position: inside;
}
@media (prefers-color-scheme: dark) {
a {
    color: rgb(0, 128, 255);
    text-decoration: none;
    position: relative;
    transition: color 0.25s;
    }
    a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 2px solid rgb(78, 166, 255);
    transition: 0.4s;
    }
    a:hover:after {
    width: 100%;
    color: rgb(78, 166, 255);
    }
    a:hover {
    color: rgb(78, 166, 255); 
    }
}