:root {
    /*--primary-hue: 182deg;
    --primary-saturation: 92%;
    --primary-lightness: 45%;*/
    --primary-hue: 194deg;
    --primary-saturation: 100%;
    --primary-lightness: 61%;

    /* Page width - also configurable via hugo.yaml params.page.width */
    --hextra-max-page-width: 90rem; /* default: 80rem (normal), 90rem (wide), 100% (full) */

    /* Navbar width - also configurable via hugo.yaml params.navbar.width */
    --hextra-max-navbar-width: 90rem; /* independent navbar width */

    /* Footer width - also configurable via hugo.yaml params.footer.width */
    --hextra-max-footer-width: 80rem; /* independent footer width */
}

.button-ghost {
    background-color: transparent;
}

.landing-hero {
    display: flex;
    flex-direction: row;

    img {
        max-width: 55%;
        height: auto;
    }

    & > div {
        max-width: 45%;
        padding: 4rem 2rem;
        font-size: 1.25rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-grow: 1;
        align-content: space-between;

        a {
            /*align-self: start;*/
            font-size: 1rem;
            margin: 2rem 0 0 0;
        }
    }
}

.landing-cards {
    width: 70%;
    margin: 0 auto;
}

@media (max-width: 1000px) {
    .landing-hero {
        flex-direction: column;

        img,
        & > div {
            max-width: 100%;
        }

        & > div {
            padding: 2rem 1rem;
        }
    }

    .landing-cards {
        width: 90%;
    }
}

/* person card */

.person-card {
    display: flex;
    flex-direction: column;
    width: 200px;
    text-align: center;
    margin-top: 2rem;

    .avatar {
        max-width: 130px;
        border-radius: 50%;
        corner-shape: squircle;
        width: 100%;
        filter: grayscale(1);
    }

    .name {
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .title {
        font-size: 0.9rem;
    }

    .social-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            margin: 0;
            padding: 0;

            a {
                display: inline-block;

                img {
                    width: 1.5rem;
                    height: 1.5rem;
                    background-color: #fff;
                    padding: 0.1rem;
                }
            }
        }
    }
}

.persons-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2rem;
    margin: 0 auto;
}

.site-banner {
    width: 100%;
    background-color: #ffc900;

    .container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .text {
            padding: 20px 10px;
            color: #000;
            font-size: 0.95rem;

            a {
                text-decoration: underline;
            }
        }

        .close-button {
            color: #000;
            font-weight: bold;
        }
    }
}