arimelody.me/public/style/main.css

@import url("/style/colours.css");
@import url("/style/header.css");
@import url("/style/footer.css");
@import url("/style/prideflag.css");

@font-face {
        font-family: "Monaspace Argon";
        src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
        font-weight: 125 950;
        font-stretch: 75% 125%;
        font-style: oblique 0deg 20deg;
}

body {
        margin: 0;
        padding: 0;
        background: #080808;
        color: #eee;
        font-family: "Monaspace Argon", monospace;
        font-size: 18px;
        text-shadow: 0 0 3em;
        scroll-behavior: smooth;
}

main {
}

a {
        color: var(--links);
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
}

a.link-button {
        padding: .3em .5em;
        border: 1px solid var(--links);
        color: var(--links);
        border-radius: 2px;
        background-color: transparent;
        transition-property: color, border-color, background-color;
        transition-duration: .2s;
        animation-delay: 0s;
        animation: list-item-fadein .2s forwards;
        opacity: 0;
}

a.link-button:hover {
        color: #eee;
        border-color: #eee;
        background-color: var(--links) !important;
        text-decoration: none;
        box-shadow: 0 0 1em var(--links);
}

small {
        font-size: 1em;
        color: #aaa;
}

span.newchar {
        animation: newchar 0.25s;
}

a#backtotop {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        padding: .5em .8em;
        display: block;
        border-radius: 2px;
        border: 1px solid transparent;
        text-decoration: none;
        opacity: .5;
        transition-property: opacity, transform, border-color, background-color, color;
        transition-duration: .2s;
}

a#backtotop.active {
        top: 4rem;
}

a#backtotop:hover {
        color: #eee;
        border-color: #eee;
        background-color: var(--links);
        box-shadow: 0 0 1em var(--links);
        opacity: 1;
}

@keyframes newchar {
        from {
                background: #fff8;
        }
}

@keyframes list-item-fadein {
        from {
                opacity: 1;
                background: #fff8;
        }

        to {
                opacity: 1;
                background: transparent;
        }
}

#overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
        background-size: 100vw .2em;
        background-repeat: repeat;
        opacity: .5;
        pointer-events: none;
        mix-blend-mode: overlay;
}

@media screen and (max-width: 780px) {
        body {
                font-size: 14px;
        }

        main {
                margin-top: 4rem;
        }
}