@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doppio+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');


*{
    padding: 0;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    transition: all .2s linear;
    text-decoration: none;
    outline: none;
    border: none;
}

:root{
    --mainBg: #f8f8f8;
    --background: #ffffff;
    --text: #222222;
    --surface: #f8f8f8;
    --surface-alt: #e2e2e2;
    --border: #999999;
    --shadow: #cccccc;
    --control: #eeeeee;
    --control-text: #333333;
    --muted-text: #333333;
    --textTimes:"Doppio One", sans-serif;
    --textDancing:"Dancing Script", cursive;
    --TextHand:"Caveat", cursive;
    --textTimes2:"Aleo", serif;
}

@media (prefers-color-scheme: dark){
    :root:not([data-theme]){
        --mainBg: #111;
        --background: #111111;
        --text: #eeeeee;
        --surface: #181818;
        --surface-alt: #222222;
        --border: #333333;
        --shadow: #000000;
        --control: #333333;
        --control-text: #cccccc;
        --muted-text: #aaaaaa;
    }
}

/* El tema elegido al arrancar tiene prioridad sobre la preferencia del sistema. */
:root[data-theme="dark"]{
    --mainBg: #111;
    --background: #111111;
    --text: #eeeeee;
    --surface: #181818;
    --surface-alt: #222222;
    --border: #333333;
    --shadow: #000000;
    --control: #333333;
    --control-text: #cccccc;
    --muted-text: #aaaaaa;
    
}


html{
    background-color: var(--mainBg);
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    cursor: default;
    color: var(--text);
    scroll-padding-top: 6rem;
    scroll-padding-bottom: 6rem;
    /* background: url(/images/calzone/calzone.webp) no-repeat;
    background-position: center;
    background-size: cover; */
    background: var(--mainBg);
}

section{
    min-height: 100svh;
    padding: 2rem 7%;
}