:root {
    --background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
    --background-svg: url('/static/bg.svg');
    --pico-font-family: Georgia, "Times New Roman" Times, serif;
}

/* Color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --background-image: radial-gradient(73% 147%, #252424 59%, #1a1818 100%), radial-gradient(91% 146%, rgba(22, 18, 18, 0.5) 47%, rgba(0,0,0,0.50) 100%);
        --pico-color: #efefef;
        --background-svg: url('/static/bg-light.svg');
    }
}

/* Color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
    --background-image: radial-gradient(73% 147%, #252424 59%, #1a1818 100%), radial-gradient(91% 146%, rgba(22, 18, 18, 0.5) 47%, rgba(0,0,0,0.50) 100%);
    --pico-color: #efefef;
    --background-svg: url('/static/bg-light.svg');
}






.hero {
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-image: var(--background-svg);
    background-size: auto 100%;
    background-position-x: right;
}


.hero h1{
    font-size: 3.5rem;
    font-weight:700;
    margin-bottom:0.2rem;
    line-height: 3.5rem;
    display: inline-block;
}
.hero span{
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight:600;
    color:var(--pico-muted-color)
}
.hero h2{
    font-size: 3.5rem;
    font-weight:700;
    line-height: 3.5rem;
}

p.lead{
    font-size:1rem;
}


@media (min-width: 768px) {

    .hero h1{
        font-size: 6rem;
    }
    .hero span{
        font-size: 1.8rem;
        line-height: 1.8rem;
    }
    .hero h2{
        font-size: 6rem;
        line-height: 4.5rem;
    }

    p.lead{
        font-size:1.5rem;
    }

}