* {
    --accent-1-light: #C7B1DA;
    --accent-1-dark: #7D6EAA;
    --accent-2-light: #89B998;
    --accent-2-dark: #47794A;
    --accent-3: #5E95A0;

    --fg: black;
    --fg-inverse: white;

    --accent-bg: #D4DCCD;

    font-family: 'Cantarell', sans-serif;
}

/* things shouldn't feel cramped */
body {
    margin: 0.5em;
    background-image: url(/static/bg.png);
    background-repeat: repeat;
}

footer {
    display: block;
    width: 100%;
    text-align: center;
}

footer div {
    border: 1px solid black;
    padding: 0.5em;
    font-size: 14pt;
    display: inline-block;
}

/* top nav */
nav.main-nav {
    display: flex;
    justify-content: end;

    z-index: 99999999999999999;

    position: fixed;
    right: 0.5em;

    details {
        display: inline-block;

        summary {
            display: block;
            font-size: 300%;
            float: right;
            text-align: right;

            img {
                height: 1em;
                background-color: var(--accent-bg);
            }
        }
    }
}

nav.socials-media {
    margin: auto;
    text-align: center;
    ul {
        margin: 0;
        padding: 0;

        li {
            list-style-type: none;
            margin: 0;
            padding: 0;

            display: inline-block;

            img {
                max-height: 2em;
                margin: 0.4em;
                border-radius: 0;
            }
        }
    }
}

ul.nav-list {
    display: block;
    margin: 0;
    padding: 4em 0 0 0;

    li {
        display: block;
        list-style-type: none;

        font-size: 16pt;
        font-weight: bolder;

        width: 100%;

        padding: 0;
        margin: -5px 0 0 0;

        a {
            padding: 0.4em 1em;
            margin: 0.1em;
            width: 100%;
        }
    }
}

/* button list */
ul.button-list {
    display: block;

    padding: 0;

    li {
        display: inline-block;
        list-style-type: none;

        font-size: 16pt;
        font-weight: bolder;

        padding: 0;

        a {
            padding: 0.4em 1em;
        }
    }
}

ul.button-list li a, ul.nav-list li a {
    display: block;

    color: var(--accent-2-dark);
    background-color: var(--accent-bg);

    text-decoration: none;
}


/* hero box */
main .split-hero {
    width: fit-content;
    margin: auto;

    display: flex;
    flex-direction: row;
    align-items: center;

    .hero-info {
        margin: 0 1em;

        height: 100%;
        float: right;

        display: flex;
        flex-direction: column;

        justify-content: center;

        .campaign-name span {
            display: block;
            text-align: right;

            &:nth-child(1) {
                font-size: 48pt;
            }
            &:nth-child(2) {
                font-size: 24pt;
                font-style: oblique;
            }

            a {
                color: black;
                font-weight: inherit;
            }
        }
    }

    img {
        max-width: 20em;
        max-height: 70vh;
        height: auto;

        border-radius: 1em;

        margin: 1em 2em;
    }
}

main .split-hero.small-hero {
    .hero-info .campaign-name span {
        &:nth-child(1) {
            font-size: 32pt;
        }
        &:nth-child(2) {
            font-size: 16pt;
            font-style: oblique;
        }
    }

    img {
        max-height: 40vh;
        max-width: 12em;
    }
}

.image-below {
    background-size: cover;

    & > div {
        background: rgba(255, 255, 255, 0.7);
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

.content-box {
    padding: 0 1em;

    .links {
        display: block;
        margin: auto;
        width: fit-content;

        ul.button-list {
            width: fit-content;
        }
    }
}

.content-box .platform-box {
    width: fit-content;
    max-width: 20em;
    margin: auto;

    p {
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 0;
        font-size: 18pt;
    }

    ul {
        padding-top: 0;
        margin-top: 0;

        margin-left: 0;
        padding-left: 0;
        li {
            list-style-type: none;
            margin-left: 0;
            padding-left: 0;
        }
    }
}

p, li {
    font-size: 16pt;
}
summary {
    font-size:18pt;
    margin-bottom:12px;
}

a {
    color: var(--accent-2-dark);
    font-weight: bold;
}


section {
    p:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    &:not(:last-child) {
        border-bottom: 1px solid var(--accent-1-dark);
        padding-bottom: 1em;
    }
}

/* helper */

.volunteer-flex-row {
    display: flex;
    flex-direction: row;

    div {
        width: 100%;

        &:not(:last-child) {
            margin-right: 1em;
        }
    }
}

/* mobile display */
@media(max-width: 800px) {
    main .split-hero {
        flex-direction: column;
        justify-content: center;

        padding: 0;
        width: 100%;

        .hero-info .campaign-name span {
            text-align: left;

            &:nth-child(1) {
                font-size: 36pt;
                font-weight: bold;
                br {
                    /* did you know you could do this? I sure didn't. I hate it. */
                    display: none;
                }
            }
            &:nth-child(2) {
                font-size: 16pt;
                font-style: oblique;
                text-align: center;
            }
        }

        img {
            max-width: 80%;
            max-height: 40vh;
        }
    }

    ul.button-list li {
        display: block;
        width: 100%;
        text-align: center;

        &:not(:last-child) {
            padding-right: 0;
            padding-bottom: 0.4em;
        }

        a {
            display: block;
        }
    }

    .volunteer-flex-row {
        flex-direction: column;
        div:nth-child(1) { order: 2; }
        div:nth-child(2) { order: 1; }
    }
}

/* desktop only */
@media(min-width: 800px) {
    main .split-hero {
        max-width: 65em;
    }

    main .content-box {
        max-width: 65em;
        margin: auto;
    }

    .mobile-only { display: none !important; }
    .desktop-only { display: inherit; }
}

@media(max-width: 799px) {
    .mobile-only { display: inherit; }
    .desktop-only { display: none !important; }

    .split-hero.mobile-only .hero-image-media {
        display: flex;
        flex-direction: row;

        & > img {
            flex: 2;
            max-width: 70vw;
            max-height: 40vh;
            margin-left: -3vw; /* visual centering hack */
        }

        nav.socials-media ul {
            display: flex;
            flex-direction: column;

            li {
                max-height: 2.5em;
            }
        }
    }
}