root{
    --bg:  hsl(240, 67%, 94%);
}

/* .theme-light {
    --bg: #ffffff;
    --fg: #000000;
    --border: #333333;
    --cell-bg: #fafafa;
    --cell-empty-bg: #f0f0f0;
    --month-bg: #ffffff;
    --shadow: rgba(0,0,0,0.15);
} */

.theme-Peacock{
    --bg: hsl(202, 77%, 25%);
    --fg: hsl(0, 0%, 99%);
}

.theme-Jade{
    --bg: hsl(60, 100%, 25%);
    --fg: hsl(0, 0%, 0%);
}

.theme-Eggpant{
    --bg: #3b245a;
    --fg: #fdfdfd;
}

.theme-Lavender{
    --bg: hsl(257, 21%, 67%);
    --fg: hsl(0, 0%, 0%);
}

.theme-Plum{
    --bg: hsl(317, 44%, 25%);
    --fg: hsl(0, 0%, 99%);
}

.theme-Berry{
    --bg: hsl(318, 52%, 30%);
    --fg: hsl(0, 0%, 99%);
}

/* Smooth theme transitions */
body, .calMonth, .calCell {
    transition: 
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

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


/* body{
    background-color: hsl(300, 100%, 25%);
} */

.main-content{
.main-content {
    text-align: center;
    display: grid;
    justify-content: center;
}}

.spacer{
    height: .5rem;
}
.header{
    display: grid;
    justify-content: center;
}

.header img {
    width: 350px;        /* Make image fill the div's width */
    height: auto;       /* Keep aspect ratio */
    display: block;     /* Remove bottom whitespace from inline images */
    border-radius: 8px; /* Optional: rounded corners */
    object-fit: cover;  /* Crop image to fit container without distortion */
}

.sub-content{
    display: grid;
    justify-content: center;
}

.weditem{
    font-size: 1.75em;
}