* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-color);
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: background 1s;
}

:root {
    --bg-color: linear-gradient(135deg,
            #FF9A9E 0%,
            /* Soft Pink */
            #FFC3A0 30%,
            /* Pink to Yellow transition */
            #FAD961 55%,
            /* Sunny Yellow - center focus */
            #D0F4A0 80%,
            /* Yellow to GreenYellow transition */
            #B5FFB0 100%
            /* GreenYellow */
        );
    --a-hover: #ff0000;
    --white: #fff;
}

/*
linear-gradient(135deg, #0f172a 0%, #111827 45%, #1e1b4b 100%);
linear-gradient(135deg, #0b0f14 0%, #111827 50%, #17122b 100%);
linear-gradient(135deg, #050816 0%, #0B1026 45%, #17103A 100%);
linear-gradient(135deg, #070B1A 0%, #101A3D 45%, #24104F 100%);
linear-gradient(135deg, #09090F 0%, #13112B 50%, #25143D 100%);
accepted by me:
linear-gradient(135deg, #070B1A 0%, #101A3D 45%, #24104F 100%);
*/

:has(input:checked) {
    --bg-color: linear-gradient(135deg, #070B1A 0%, #101A3D 45%, #24104F 100%);

    #landing-page>div,
    footer {
        color: #fff;
    }
}

#cards {
    position: relative;
}

#heading {
    color: var(--white);
    text-align: center;
}

#heading>a {
    text-decoration: none;
    font-style: italic;
    transition: color 0.35s;
}

#heading>a:hover {
    color: var(--a-hover);
}

#landing-page>div {
    text-align: center;
}

#blogs {
    position: absolute;
    top: 18vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 5px;
}

#blogs>li {
    text-decoration: none;
    list-style: none;
    padding: 34px;
    margin: 12px;
    /* border: 2px solid black; */
    border-radius: 3px;
    width: 23vw;
    height: 27vh;
    /* text-align: center; */
    /* align-content: center; */
    color: var(--white);
    background-color: var(--white);
    background-image: url("40custom-ai.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: aqua; */
    position: relative;
    cursor: pointer;
}

#navbar {
    display: flex;
    justify-content: flex-end;
    /* border: 2px solid black; */
    padding: 30px;
}

#navbar>li {
    list-style: none;
    padding: 23px;
    /* border: 2px solid blue; */
    font-size: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#navbar>li::before {
    content: attr(data-icon);
    font-size: 25px;
    line-height: 1;
}

#navbar>li>a {
    text-decoration: none;
    color: var(--white);
    font-size: 23px;
    /* border: 2px solid yellow; */
    padding: 0px;
    transition: color 0.35s;
}

#navbar>li>a:hover {
    color: var(--a-hover);
}

.par-para {
    position: absolute;
    bottom: 52px;
    font-size: 25px;
    font-weight: 600;
    font-family: Helvetica, sans-serif, Arial;
}

.para {
    position: absolute;
    bottom: 18px;
}

footer {
    text-align: center;
}

label {
    cursor: pointer;
}