/* header links */
.headerlinks {
    margin: 0;
    position: absolute;
    top: 20%;
    right: 0px;
    list-style: none;
}
.headerlinks li {
    display: inline;
    text-transform: lowercase;
}
.headerlinks > li:not(:last-child):after {
    content: " /";
    background: transparent;
}

/* link hover animation */
@supports (transition: background-position) {
    .hoverbg {
        background: linear-gradient(to top, #575757 50%, transparent 50%);
        background-size: 100% 200%;
        background-position: top;
        transition: background-position 0.1s ease-out;
    }
    .hoverbg:hover {
        background-position: bottom;
    }
    header a, .readmore {
        background: linear-gradient(to top, #ffffff 50%, #575757 50%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        background-size: 100% 200%;
        background-position: top;
        transition: background-position 0.1s ease-out;
    }
    header a:hover, .readmore:hover {
        background-position: bottom;
    }
}

/* frontpage article excerpt */
.article-excerpt p {
    display: inline;
}
.readmore {
    font-family: "Unifont", monospace;
    text-transform: lowercase;
    text-decoration: none;
}

/* footer */
#footer {
    text-align: center;
    height: 400px;
    margin: 0;
    margin-left: -8px;
    margin-bottom: -8px;
    width: 100vw;
    background-image: url("/img/bottombanner.jpg");
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#footeroverlay {
    margin-left: auto;
    margin-right: auto;
    max-width: 255px;
    color: white;
    font-family: "Unifont", monospace;
    background-color: rgba(0,0,0,0.6);
}
#fadelinespacer {
    height: 50px;
}
#fadeline {
    width: 100vw;
    height: 50px;
    background: linear-gradient(to bottom, whitesmoke 0%, transparent 100%);
}
#footeraddrbox {
    width: 90%;
    background-color: #232323;
    border: 1px solid #565656;
    margin-top: 5px;
    color: white;
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    font-size: 16px;
}
#footersubmitbtn {
    width: 90%;
    background-color: #232323;
    color: white;
    font-family: "Unifont", monospace;
    margin-bottom: 6px;
}
@media (prefers-color-scheme: dark) {
    @supports (transition: background-position) {
        header a, .readmore {
            color: #ababab;
            background: linear-gradient(to top, #ffffff 50%, #ababab 50%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            background-size: 100% 200%;
            background-position: top;
            transition: background-position 0.1s ease-out;
        }
    }
}