:root {
    --pico-font-family: "fang";
    --color-dark-olive-1: rgb(27, 28, 20);
    --color-dark-olive-2: rgb(26, 27, 19);
    --color-dark-olive-3: rgb(25, 26, 18);
    --color-dark-olive-4: rgb(23, 25, 17);
    --color-muted-gray-brown: rgb(63, 59, 52);
    --background-color: rgb(240, 238, 229);
    --link-color-light: #005691;
    --link-color-dark: #40a8ff;
    --logo-stroke-color-light: none;
    --logo-stroke-color-dark: #fff;
    --logo-fill-color-light: #000;
    --logo-fill-color-dark: none;
    --illustration-filter-light: invert(18%) sepia(9%) saturate(532%) hue-rotate(182deg) brightness(94%) contrast(88%);
    --illustration-filter-dark: invert(82%) sepia(10%) saturate(300%) hue-rotate(182deg) brightness(50%) contrast(110%);
}

/* Light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --pico-background-color: var(--background-color);
    --pico-link-color: var(--link-color-light);
    --logo-stroke-color: var(--logo-stroke-color-light);
    --logo-fill-color: var(--logo-fill-color-light);
    --illustration-filter: var(--illustration-filter-light);

}

/* Dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-background-color: var(--color-dark-olive-1);
        --pico-link-color: var(--link-color-dark);
        --logo-stroke-color: var(--logo-stroke-color-dark);
        --logo-fill-color: var(--logo-fill-color-dark);
        --illustration-filter: var(--illustration-filter-dark);
    }
}

/* Dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --pico-background-color: var(--color-dark-olive-1);
    --pico-link-color: var(--link-color-dark);
    --logo-stroke-color: var(--logo-stroke-color-dark);
    --logo-fill-color: var(--logo-fill-color-dark);
    --illustration-filter: var(--illustration-filter-dark);
}

body {
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    line-height: normal;
    background-color: var(--pico-background-color);
    color: var(--pico-font-color, #000); /* Default text color as fallback */
    font-family: var(--pico-font-family);
}

a {
    color: var(--pico-link-color);
    text-decoration: none;
    white-space: nowrap;
}

a:hover {
    text-decoration: underline;
    filter: brightness(1.2); /* Brighten color on hover */
}

header {
    grid-row: 1;
}

main {
    grid-row: 2;
}

footer {
    grid-row: 3;
}

body.container {
    display: flex;
    flex-direction: column;
}

p {
    font-size: 1.25rem;
}

.container>footer {
    margin-top: auto;
}

.section {
    position: relative;
}

.intro {
    display: grid;
}

.intro h1 {
    align-self: flex-end;
    font-size: 2.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.section.intro {
    position: relative;
    margin-bottom: 4rem;
}

.section.intro h1 {
    position: relative;
    z-index: 2;
    margin: 0;
    line-height: 1.05;
}

.section.intro .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12rem;
    height: auto;
    opacity: 0.1;
    z-index: 1;
}

@media (min-width: 768px) {
    .container {
        max-width: 43.5rem;
    }

    .section.intro {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        align-items: center;
    }

    .section.intro .logo {
        position: static;
        transform: none;
        opacity: 1;
    }
}