bliss.town/public/style/main.css

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

:root {
    --background: #fffcf7;
    --on-background: #322e1f;
    --primary: #f7eddb;
    --on-primary: #92a40a;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --background: #1b141e;
        --on-background: #e2dfe3;
        --primary: #352640;
        --on-primary: #cda1ec;
    }
}

body {
    margin: 0;
    padding: 0;

    font-family: "Lora", serif;
    font-size: 20px;

    color: var(--on-background);
    background-color: var(--background);

    transition: color .2s linear, background-color .2s linear;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    transform: none;
    border-bottom: 1px solid var(--primary);
    background-color: var(--background);
    z-index: 1000;
    transition: background-color .2s linear, box-shadow .2s linear, border-color .2s linear;
}

header nav {
    width: min(900px, calc(100vw - 4rem));
    margin: 0 auto;
    font-size: .8em;
    user-select: none;
}

header nav>span,
header nav>div,
header nav>a {
    margin: 0;
    padding: .5em 1em;
    display: inline-block;
    color: var(--on-primary);
}

header nav .nav-title {
    color: var(--on-background);
}

header nav div {
    margin: 0 .4em;
    display: inline-block;
}
header nav div img {
    display: inline-block;
}

main {
    width: min(900px, calc(100vw - 4rem));
    min-height: calc(100vh - 9.4em);
    margin: 4em auto 0 auto;
    padding: 0;
}

.only-light {
    opacity: 1;
    transition: opacity .2s linear;
}

.only-dark {
    opacity: 0;
    transition: opacity .2s linear;
}

hr {
    width: 100%;
    margin: 2em 0 1.5em 0;
    border-width: 1px 0 0 0;
    text-align: center;
}
hr::after {
    content: "✦";
    position: absolute;
    transform: translate(-50%, -54.5%);
    padding: 5px;
    color: var(--on-background);
    background: var(--background);
    transition: color .2s linear, background-color .2s linear;
}

a {
    color: var(--on-primary);
    text-decoration: none;
    font-weight: bold;
    transition: color .2s linear;
}

a:hover {
    text-decoration: underline;
}

button {
    padding: .5em 1.2em;
    font-size: .8em;
    font-family: inherit;
    font-weight: bold;
    color: var(--on-background);
    background-color: var(--primary);
    border: none;
    border-radius: 2em;
    cursor: pointer;
    transition: color .2s linear, background-color .2s linear, transform .1s ease-out;
}

button:hover {
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

footer {
    width: min(900px, calc(100vw - 4rem));
    margin: 0 auto;
    padding: 1em 0;
    text-align: center;
    opacity: .5;
    transition: opacity .1s ease-out;
}

footer:hover {
    opacity: 1;
}

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

.title-icon {
    position: relative;
    width: 1.3em;
    height: 1.1em;
    margin: 0 .1em;
    display: inline-block;
}

.title-icon img {
    width: 1.4em;
    height: 1.4em;
    position: absolute;
}

.col-on-primary {
    color: var(--on-primary);
}

@media screen and (prefers-color-scheme: dark) {
    .only-light {
        opacity: 0;
    }
    .only-dark {
        opacity: 1;
    }

    header {
        box-shadow: 0 2px 8px #0c03116e;
    }
}

@media screen and (max-width: 500px) {
    h1 {
        font-size: 1.2em;
    }
}