bliss.town/public/style/main.css

@import url("/font/lora/lora-font.css");

:root {
        --foreground: #28261f;
        --background: #f9f1db;
        --primary: #92a40a;
}

@media screen and (prefers-color-scheme: dark) {
        :root {
                --foreground: #f9f1db;
                --background: #28261f;
                --primary: #d9e679;
        }
}

header {
        width: min(900px, calc(100vw - 4rem));
        margin: 0 auto;
        padding: 2rem 0;
        text-align: center;
}

header nav {
        font-size: .8em;
}

header nav a:not(:first-child)::before {
        content: '-';
        margin: 0 .8em 0 .5em;
}

body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        min-height: 100vh;
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        font-family: "Lora", serif;
        font-size: 1.5rem;

        color: var(--foreground);
        background-color: var(--background);
}

main {
        width: min(720px, calc(100vw - 4rem));
        margin: -2rem auto 0 auto;
        text-align: center;
}

hr {
        margin: 2rem 0;
        border-width: 1px 0 0 0;
}
hr::after {
        content: "✦";
        position: absolute;
        transform: translate(-50%, -50%);
        background: var(--background);
        color: var(--foreground);
        padding: 5px;
}

a {
        color: var(--primary);
        text-decoration: none;
        font-weight: bold;
}

footer {
        width: min(900px, calc(100vw - 4rem));
        margin: 0 auto;
        padding: 2rem 0;
        text-align: center;
}

#footer-links {
        font-size: .8em;
}