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

    --eggplant: hsl(266, 43%, 25%);
    --peacock: hsl(202, 77%, 25%);
    --jade: hsl(60, 100%, 25%);
    --plum: hsl(317, 44%, 25%);
    --berry: hsl(318, 52%, 30%);
    --lavender: hsl(257, 21%, 67%);


    --linear-theme: linear-gradient(135deg, var(--eggplant),var(--peacock), var(--jade), var(--plum),var(--berry),var(--lavender));
    --radial-theme: radial-gradient(var(--eggplant),var(--peacock), var(--jade), var(--plum),var(--berry),var(--lavender));
    --conic-theme: conic-gradient(var(--eggplant),var(--peacock), var(--jade), var(--plum),var(--berry),var(--lavender));
}

/* .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-all{
    --bg: var(--linear-theme);
    --fg: hsl(0, 0%, 99%);
}

.theme-all-radial{
    --bg: var(--radial-theme);
    --fg: hsl(0, 0%, 99%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.theme-all-conic{
    --bg: var(--conic-theme);
    --fg: hsl(0, 0%, 99%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

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

.theme-Jade{
    --bg: var(--jade);
    --fg: hsl(0, 0%, 0%);
}

.theme-Eggpant{
    --bg: var(--eggplant);
    --fg: #fdfdfd;
}

.theme-Lavender{
    --bg: var(--lavender);
    --fg: hsl(0, 0%, 0%);
}

.theme-Plum{
    --bg: var(--plum);
    --fg: hsl(0, 0%, 99%);
}

.theme-Berry{
    --bg: var(--berry);
    --fg: hsl(0, 0%, 99%);
}

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

/* Smooth theme transitions 
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s ease; 
}*/

/* body.theme-gradient-active::before {
    opacity: 1;
}

body:not(.theme-gradient-active)::before {
    opacity: 0;
} */

body {
    background: var(--bg);
    color: var(--fg);
    transition: 
        background-color 0.75s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}



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

.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;
    text-align: center;
}

.weditem{
    font-size: 1.75em;
}