:root {
    --blue: #1e69ff;
    --dark-blue: #120c4c;
    --dark-blue--opacity: rgba(18, 12, 76, 0.67);
}

body {
    background: black url("https://zkdungeon.com/static/images/background-black-4.webp") no-repeat center center fixed;
    background-size: cover;
    color: white;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body main h1 {
    font-size: 6rem;
    font-weight: 600;
    margin: 0 0 2rem;
}

svg {
    max-width: 100%;
}

body main {
    max-width: 800px;
    position: absolute;
    top: 29%;
    padding: 1rem;
}

@media (max-width: 800px) or (max-height: 600px) {
    body main {
        position: relative;
        top: unset;
    }
    body main h1 {
        font-size: 14vw;
    }
}

footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: monospace;
    padding: 1rem;
    font-size: 0.8rem;
}

button {
    background-color: var(--dark-blue--opacity);
    border: 2px solid #fbb3ff;
    cursor: pointer;
    color: #fff;
    width: -moz-fit-content;
    width: fit-content;
    height: 50px;
    padding: 0 2.1875rem;
    pointer-events: auto;
}

button:hover {
    background-color: var(--dark-blue);
}

/* MISC */

a[href="https://twitter.com/zkDungeon"] {
    color: #1da1f2;
}

a[href="mailto: contact@zkdungeon.com"] {
    color: #fbb3ff;
}