/* Khers Family Site - System Theme */

/* ========================= */
/*       DEFAULT / LIGHT     */
/* ========================= */

html {
    background-color: #ffffff;
}

body {
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 20px;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ========================= */
/*       NAVIGATION          */
/* ========================= */

nav {
    background-color: #f2f2f2;
    border-bottom: 1px solid #cccccc;

    padding: 15px;

    margin: -20px -20px 20px -20px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

nav a {
    color: #0066cc;
    text-decoration: none;
    margin-right: 20px;
    font-weight: bold;

    transition: color 0.2s ease;
}

nav a:hover {
    color: #004499;
    text-decoration: underline;
}


/* ========================= */
/*       HEADINGS            */
/* ========================= */

h1 {
    color: #000000;
}

h2 {
    color: #222222;
}


/* ========================= */
/*       LINKS               */
/* ========================= */

a {
    color: #0066cc;
}

a:hover {
    color: #004499;
}


/* ========================= */
/*       PARAGRAPHS          */
/* ========================= */

p {
    color: #222222;
}


/* ========================= */
/*       IMAGES              */
/* ========================= */

img {
    border-radius: 10px;
}


/* ========================= */
/*       FAMILY MEMBERS      */
/* ========================= */

/* ========================= */
/*       FAMILY MEMBERS      */
/* ========================= */

.family-members {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.members {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 10px;
    margin: 10px;

    position: relative;
}

.image-box {
    height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 10px;
}

.member-link {
    color: #121212;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;

    background-color: rgb(165, 162, 160);

    border-radius: 9px;
    padding: 2px 5px;
}


/* ========================= */
/*       DARK MODE           */
/* ========================= */

@media (prefers-color-scheme: dark) {

    .member-link {
        color: #ffffff;
        background-color: #333333;
    }

    .member-link:hover {
        background-color: #444444;
    }
}


/* ========================= */
/*       SELECTION           */
/* ========================= */

::selection {
    background-color: #cccccc;
    color: #000000;
}


/* ========================= */
/*       DARK MODE           */
/* ========================= */

@media (prefers-color-scheme: dark) {

    html {
        background-color: #121212;
    }

    body {
        background-color: #121212;
        color: #ffffff;
    }


    /* Navigation */

    nav {
        background-color: #1e1e1e;
        border-bottom-color: #333333;
    }

    nav a {
        color: #66b3ff;
    }

    nav a:hover {
        color: #99ccff;
    }


    /* Headings */

    h1 {
        color: #ffffff;
    }

    h2 {
        color: #dddddd;
    }


    /* Links */

    a {
        color: #66b3ff;
    }

    a:hover {
        color: #99ccff;
    }


    /* Paragraphs */

    p {
        color: #dddddd;
    }


    /* Member buttons */

    .member-link {
        background-color: #333333;
        color: #ffffff;
    }

    .member-link:hover {
        background-color: #444444;
        color: #ffffff;
    }


    /* Selection */

    ::selection {
        background-color: #444444;
        color: #ffffff;
    }

    /* Footer and copyright */
    footer {
    background: #111;
    color: #aaa;
    padding: 25px 20px;
    margin-top: 50px;
    border-top: 1px solid #333;
}

.footer-content {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: left;
}

.footer-content img {
    width: 120px;
    height: auto;
}

.footer-content p {
    margin: 4px 0;
    font-size: 14px;
}

.footer-content p:first-child {
    color: #fff;
    font-weight: 600;
}
css
/* ========================= */
/*          PAGE             */
/* ========================= */

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}


/* ========================= */
/*          FOOTER           */
/* ========================= */

footer {
    background-color: #111111;
    color: #aaaaaa;

    padding: 25px 20px;

    border-top: 1px solid #333333;
}

.footer-content {
    max-width: 1100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
}

.footer-content img {
    width: 120px;
    height: auto;
}

.footer-content p {
    margin: 4px 0;
    font-size: 14px;
    color: #aaaaaa;
}

}