@import url("https://fonts.googleapis.com/css2?family=Gupter&family=Noto+Serif+JP&display=swap");

:root {
    --text: #000;
    --bg: #dcd7ca;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000;
        --text: #dcd7ca;
    }
}

html {
    margin: 0;
    padding: 0;

    background: var(--bg);
    color: var(--text);
    font-family: "Noto Serif JP", serif;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
}

.wordmark {
    letter-spacing: 1em;
    text-indent: 1em; /* to fix bad rendering of last character, thanks chromium for making this standard... */

    font-size: 3em;
}

.wordmark > span {
    display: block;
}

.content > img {
    position: absolute;

    transform: translate(-50%, -100%);
}

.coming-soon {
    position: absolute;

    transform: translate(-50%, 0%);
}

.email {
    position: fixed;

    bottom: 0;
    left: 50%;

    transform: translate(-50%, -25%);

    color: var(--text);
}