body, html {
    height:100%;
    padding:0;
    margin:0;
    background:#000;
    color:#eee;

    font-family:
        "Baskerville", /* macOS/iOS */
        "Libre Baskerville", /* Android (bundled on some) */
        "Georgia", /* Windows, cross-platform */
        "Times New Roman", /* Windows fallback */
        "Times", /* macOS/Linux fallback */
        serif; /* ultimate fallback */
}
a {
    color:#899ce8
}
a:visited {
    color: #b089e8;
}

.game {
    position: relative;
}
iframe {
    border: none;
    max-height: 85vh;
    height: 500px;
    min-height: 60vh;
    margin:5px auto 1em;
}
.game .instructions {
    text-align: center;
    margin: 0;
    font-size: 0.8em;
    font-family: Helvetica, sans-serif;
    color:#ddd;
}

body.game-focussed {
    .content, footer {
        opacity: 0.29;
    }
    .game .instructions {
        opacity: 0.3333;
    }
}

#download-link {
    position: fixed;
    top: 40px;
    left: 40px;
}

div.lead {
    margin:2em 0 1em;
    display: flex;
    gap: 2em;
}
div.lead .features {
    flex: 1;
    margin:0;
    padding:0;
    list-style: none;

    li+li {
        margin-top: 0.5em;
    }

    li {
        list-style: none;
        padding-left: 40px;
        position: relative;
    }
    li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        background-color: #c88;
        mask: url(feature-bullets/warning.svg) no-repeat center / contain;
    }

    li.download::before {
        mask-image: url(feature-bullets/app-store.svg);
    }
    li.no-ads::before {
        mask-image: url(feature-bullets/no-ads.svg);
    }
    li.no-inapp-purchase::before {
        mask-image: url(feature-bullets/no-shopping-cart.svg);
    }
    li.offline::before {
        mask-image: url(feature-bullets/airplane.svg);
    }
    li.infinite-levels::before {
        mask-image: url(feature-bullets/infinity.svg);
    }
    li.not-affiliated::before {
        mask-image: url(feature-bullets/warning.svg);
    }
}
div.lead .words {
    flex: 1;

    p:first-child::first-line {
        font-variant: small-caps;
    }
    p:first-child strong {
        font-weight: inherit
    }
}

.words.detail {
    border-top: 1px solid #222;
    padding-top: 1em;
}

.words p {
    margin: 0 0 1em;
    line-height: 1.4em;
    font-size: 1.1em;
}


.content,footer,header,nav{
    max-width:60rem;
    margin: 0 auto;
}
body.narrow {
    .content,header,nav{
        max-width:36rem;
    }
}

nav{
    padding:1px;
}

.content {
    position: relative;
    font-size:1.2em;
    color:#aaa;
}

footer {
    position: absolute;
    bottom:0;
    left:0;right:0;
    text-align: center;
    margin-bottom: 0.5em;

    h1.logotype {
        text-align: center;
        margin:0; padding:0;
        font-size:inherit;
        font-weight: inherit;
        position: relative
    }

    p.copyright {
        position: absolute;
        bottom: 0.66666em;
        width: 100%;
        left: 0;
        margin:0;padding:0;
        color:#ecc;
        font-style:italic;
    }

    p.disclaimer {
        font-variant: small-caps;
        font-style: normal;
        margin:0.5em 0 0;
        padding-bottom:1em;
    }
}

header h1 {
    font-size: 2em;
    font-weight:normal;
    text-align: center;
    letter-spacing: 0.1em;
    margin: 0.5em 0 1.25em;
    padding: 0;
    text-transform: uppercase;
}

h2, h3 {
    font-weight:normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

strong {
    font-weight: 600;
    letter-spacing: 0.1em;
    color:#ddd
}

.wrapper {
    position: relative;
    min-height: 100vh;
    padding-bottom: 240px; /* footer height */
    box-sizing: border-box;
}
.wrapper:has(footer .disclaimer) {
    padding-bottom: calc(240px + 2em);
}

body, .wrapper {
    min-height: 100vh;
}

/* Feedback form */

form {
    margin: 2em 0 0;
}

.form-field {
    margin-bottom: 1em;
    label {
        display: block;
        margin-bottom: 0.3em;
    }
    input, textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5em;
        font-size: 1em;
        font-family: inherit;
    }
}
.form-actions {
    text-align: right;
}
button {
    padding: 0.7em 1.5em;
    font-size: 1em;
    font-family: inherit;
    background-color: #9b3131;
    color: #eee;
    border: none;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-weight:bold;
    cursor: pointer;
}