#primary-layer {
    border-image: linear-gradient(to bottom, var(--primary-color-light) 0, var(--background-color-light) 90% 80%) 1;
}
html {
    background: var(--background-color-light);
}
#background-overlay {
    background: var(--background-overlay-color-light);
}
body {
    /*background: var(--background-color-light);*/
    color: var(--color-light);
}

#scroll-top-btn {
    background-color: var(--primary-color-light);
    color: var(--background-color-light); /* box-shadow-color defaults to this */
    border-bottom: var(--background-color-light) 2px solid;
}
#content-container {
    border-color: var(--primary-color-light);
}
a:not(.navbar-item > a, #navbar-title, .inverted-link > a) {
    color: var(--primary-color-light);
}
a:not(.navbar-item > a, #navbar-title):visited {
    color: var(--secondary-color-light);
}
.inverted-link a {
    color: var(--background-color-light);
}
.navbar-item > a, .navbar-item > a:visited, #navbar-title, #navbar-title:visited {
    color: var(--color-light)
}
#footer .navbar-item > a, #footer .navbar-item > a:visited {
    color: var(--secondary-color-light);
}
#footer-links {
    border-top: solid 2px var(--secondary-color-light);
}

table, thead {
    border-bottom-color: var(--secondary-color-light);
}
tr:nth-child(even) {
    background-color: var(--tertiary-color-light);
}

@media screen and (prefers-color-scheme: dark) {
    #primary-layer {
        border-image: linear-gradient(to bottom, var(--primary-color-dark) 0, var(--background-color-dark) 90% 80%) 1;
    }
    html {
        background: var(--background-color-dark);
    }
    body {
        color: var(--color-dark);
    }
    #background-overlay {
        background: var(--background-overlay-color-dark);
    }

    #scroll-top-btn {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark); /* box-shadow-color defaults to this */
        border-bottom: var(--background-color-dark) 2px solid;
    }
    #content-container {
        border-color: var(--primary-color-dark);
    }
    a:not(.navbar-item > a, #navbar-title, .inverted-link a) {
        color: var(--primary-color-dark);
    }
    a:not(.navbar-item > a, #navbar-title, .inverted-link a):visited {
        color: var(--secondary-color-dark);
    }
    .navbar-item > a, .navbar-item > a:visited, #navbar-title, #navbar-title:visited {
        color: var(--color-dark)
    }
    .inverted-link a {
        color: var(--background-color-dark);
    }
    
    #footer .navbar-item > a, #footer .navbar-item > a:visited {
        color: var(--secondary-color-dark);
    }
    #footer-links {
        border-top: solid 2px var(--secondary-color-dark);
    }


    table, thead {
        border-bottom-color: var(--secondary-color-dark);
    }
    tr:nth-child(even) {
        background-color: var(--tertiary-color-dark);
    }
}