/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --body-bg: #EEE2DC;
        --body-color: #AC3B61;
        --body-link-color: #AC3B61;
        --card-bg: #EDC7B7;
    }

    .site-nav {
        background-color: #EEE2DC;
        border: 1px solid #AC3B61;
    }

    .site-nav .menu-icon > svg {
        fill: #AC3B61;
    }

    .site-title, .site-title:visited, .site-nav .page-link {
        color: #AC3B61
    }

    .site-header {
        border-bottom: #AC3B61 1px solid;
    }

    .site-footer {
        border-top: #AC3B61 1px solid;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #111111;
        --body-color: #bfc5c1;
        --body-link-color: #FFCCBB;
        --card-bg: #212529;
    }

    .site-nav {
        background-color: #111111;
    }

    .site-nav .menu-icon > svg {
        fill: #bfc5c1
    }

    .site-title, .site-title:visited, .site-nav .page-link {
        color: rgb(205, 205, 205)
    }
}

/* Mobile-Specific  */

@media only screen and (max-width: 768px) {
    .selfie {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    iframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 350px;
        height: 350px;
    }
}

/* Desktop-Specific */
@media only screen and (min-width: 769px) {
    .selfie {
        float: right; 
        padding: 30px;
        margin-top: 90px;
    }

    .site-nav {
        border: 0px;
    }

    iframe {
        display: block;
        margin: 0 auto;
        width: 600px;
        height: 600px;
    }
}

body {
    background-color: var(--body-bg);
    color: var(--body-color);
}

a:link { color: rgb(75, 154, 162); text-decoration: none; font-weight: normal; }
a:visited { color: rgb(75, 162, 113); text-decoration: none; font-weight: normal; }
a:hover { color: rgb(98, 203, 215); text-decoration: none; font-weight: none; }