@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@400;700&family=BIZ+UDPMincho:wght@400;700&display=swap');

body {
    padding: 0 1rem;
    margin: 0;
    background: url("/static/escheresque.png");
}

:root, button, input, h1, h2, h3 {
    font-family: "BIZ UDPMincho", serif;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #246;
    padding: 0.5rem;
    color: white;
    border-bottom: 5px solid #0003;
    margin: 0 -1rem;
    margin-bottom: 1rem;
    a {
        color: #4af
    }
    .language-selector {
        opacity: 0.8;
        font-size: 0.8rem;
    }
}

h3 {
    background: #246;
    color: #fff;
    padding: 0.5rem 1rem;
    margin: -1rem;
    margin-bottom: 0;
    font-size: 1rem;
}

label, form, fieldset {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: stretch;
}

form.inline {
    padding: 0.5rem;
    flex-direction: row;
    justify-content: stretch;
    border: 1px solid #0003;
    border-radius: 3px;
    background: #fff;
    align-items: center;
    label {
        flex-direction: row;
        justify-content: stretch;
        align-items: center;
        input {
            width:0;
        }
    }
}

button, input, label {
    font-size: 1rem;
    padding: 4px;
    color: black;
}

button, a.buttonLink {
    border: 1px solid #003c74;
    padding: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4);

    &:hover {
        box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
    }

    &:active {
        box-shadow: none;
        background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1);
    }

    &:focus {
        box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4;
    }
}

form, fieldset {
    gap: 1rem;
    margin: 0;
}

article, section {
    border: 1px solid #777;
    padding: 1rem;
    border-radius: 5px;
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin-bottom: 1rem;
    box-shadow: 4px 4px 6px 0 #0004;
}

p {
    margin: 0;
}

fieldset {
    border: none;
}

input {
    box-shadow: 2px 2px 3px 0 #0002 inset;
    border: 1px solid #999;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    outline: none;
    border-radius: 3px;

    &:focus {
        outline: none;
        border: 1px solid #08a;
    }
}

a {
    text-decoration: none;
    color: #06d;

    &:hover {
        text-decoration: underline;
    }
}


fieldset {
    padding: 0.5rem;
    justify-content: stretch;
    flex-grow: 1;
}

input, label {
    flex-grow: 1;
}


ul {
    display: flex;
    flex-direction: column;
    padding: 0; margin: 0;
    gap: 0;
}
li.row {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    a {
        padding: 0.5rem 0;
        &:hover {
            text-decoration: none;
            background: #fff;
        }
    }
    a.rowLink {
        flex-grow: 1; display: block;
    }
    border-bottom: 1px solid #0003;
}

a.buttonLink {
    display: inline-block;
    color: #000;
    &:hover {
        text-decoration: none;
    }
}

/* promo */
section.hero, section.features, section.cta {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-wrap: balance;
    line-height: 1.2;
    h3 {
        padding: 0.5rem;
        margin: 0;
        border-radius: 1rem;
    }
    h2 {
        font-size: 2rem;
        font-weight: 400;
        margin: 0;
        text-wrap: balance;
    }
    text-align: center;
    padding: 2rem 1rem;

    a {
        color: white;
        background: linear-gradient(180deg, #5e74af, #25497c 86%, #16305a);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;

        &:hover {
            background: #16305a;
            box-shadow: none;
        }

        &:active {
            box-shadow: none;
            background: linear-gradient(180deg, #000000, #0f356a 20%, #6d82b8);
        }

        &:focus-visible {
            box-shadow: inset -1px 1px #3f81c5, inset 1px 2px #002c77, inset -2px 2px #004db3, inset 1px -1px #001f55, inset 2px -2px #89ade4;
        }
    }
}
section.features div.cardset {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    flex-wrap: wrap;
    gap: 1rem;
    div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 250px;
        flex-grow: 1;
        text-wrap: balance;
    }
}

section.hero {
    background: #246;
    color: white;

    p:first-of-type {
        color: white;
    }
    h2:first-of-type {
        font-weight: bold;
        text-shadow: 2px 2px 0 #000;
    }
    a {
        border: 2px solid #fff;
    ;
        font-size: 1.3rem;
    }
}

section.cta {
}

footer {
    padding: 1rem;
    text-align: center;
}