/* Default Light Theme Variables */
:root {
    --primary-color: #333;
    --bg-color: #ffffff;
    --font-color: #333;
    --card-bg: #f4f4f4;
}

/* Auto-detect System Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #90caf9;
        --bg-color: #121212;
        --font-color: #ffffff;
        --card-bg: #1e1e1e;
    }
}

/* Manual Overrides (if user clicks the toggle) */
[data-theme="dark"] {
    --primary-color: #90caf9;
    --bg-color: #121212;
    --font-color: #ffffff;
    --card-bg: #1e1e1e;
}

[data-theme="light"] {
    --primary-color: #333;
    --bg-color: #ffffff;
    --font-color: #333;
    --card-bg: #f4f4f4;
}

body {
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: Arial, sans-serif;
    transition: 0.3s; /* Smooth transition between themes */
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.container { text-align: center; }

/* Change display to vertical column */
.image-section {
    display: flex;
    flex-direction: column; /* This stacks the children vertically */
    align-items: center;    /* Centers the images horizontally */
    gap: 30px;              /* Space between the two pictures */
    margin-top: 30px;
    width: 100%;
}

.image-card {
    background: var(--card-bg);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 90%;
    transition: transform 0.2s;
}

/* Optional: Slight hover effect */
.image-card:hover {
    transform: scale(1.02);
}

img {
    border-radius: 0px;
    display: block;         /* Removes bottom whitespace in some browsers */
    height: auto;
    width: 100%;            /* Makes image responsive within the card */
    max-width: 960px;       /* Prevents images from getting too huge */
}