/* spetna pisava*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* CSS barve pa oblike ki se bojo ponavljale da mi jih ne bo treba vsakic znova definirt bojo tuki, pa ce bo reba kej spremenit bo tudi lazje, ker samo na enem mestu spremenis */
:root {
    --barva-ozadje: #F0E5D2; /*vse barve so vzete iz logotipa*/
    --barva-besedilo: #45220E;
    --barva-poudarek: #60552C; /*ta je tista malo bolj zelena*/
    --barva-dodatna: #CE9550;

    --barva-kartice: #FFF9F0;
    --barva-besedilo-na-temnem: #F0E5D2;
    --barva-hero-prekrivna: rgba(69, 34, 14, 0.55);
    --barva-senca: rgba(69, 34, 14, 0.18); /* uporabljena vrednost rgba da lahko nastavim še prosojnost a- alpha chanell za prosojnost */

    --senca-kartice: 0 0.25rem 0.8rem var(--barva-senca); /*rem- relative unit of measurement, lažje prilagajanje, var- pa predstavlja vrednost definirano v root-u */
    --zaobljenost: 0.75rem;
}

/*osnovne nastavitve */

* {
    box-sizing: border-box; /* zvezdica pomeni da velja za vse */
}

html {
    font-size: 100%;
    scroll-behavior: smooth; /* men se je osebno samo lepše zdel da kamorkoli prideš da je vmes scroll transition da ne mors kr jumpat iz elementa na element */
    scroll-padding-top: 7rem; /* ko bom pri receptih uporabljala sidra in skakanje po strani "nazaj na vrh" da mi naslova ne bo prekrila glava, da bo vmes 7rem prostora */
}

body {
    margin: 0;
    background-color: var(--barva-ozadje);
    color: var(--barva-besedilo);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}

h1,
h2,
h3 {
    color: var(--barva-besedilo);
    font-family: "Fraunces", serif;
    line-height: 1.25; /*koliko je razmoke med vrsticami, če bi bilo 0 bi se besedila prekrivala */
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

img {
    max-width: 100%;
}

a {
    color: var(--barva-poudarek);
}

a:focus-visible { /*če klikneš Tab se okoli naslova pojavi obroč da veša kaj je izbrano*/
    outline: 0.15rem solid var(--barva-dodatna);
    outline-offset: 0.2rem;
}