/* Color scheme from : https://www.colourlovers.com/palette/4970290/Asian_Cooking */
@font-face {
    font-family: 'Carme';
    src: url("/assets/fonts/Carme/Carme-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Nunito';
    src: url("/assets/fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf") format('truetype');
}

@font-face {
    font-family: 'Sonsie';
    src: url("/assets/fonts/Sonsie_One/SonsieOne-Regular.ttf") format('truetype');
}

:root {
    --main-color-letters: #333;
    --light-white: #FEFFFF;
    --main-accent: #EE4601;
    --second-accent: #320574;
    --third-accent: #D6CD61;

    --fourth-accent: #E8A67A;
    --fifth-accent: #EDE6B3;
}

/* 0. reset  */
body, figure {
    margin: 0;
    padding: 0;
}

/* 1. Colors and border */
body {
    background-color: var(--light-white);
    font-family: "Nunito", 'Times New Roman', Times, serif ;
}

h1 {
    color: var(--main-accent);
}

h2 {
    color: var(--second-accent);
    border-color: var(--second-accent);
}

a {
    color: var(--main-accent);
    text-decoration: none;
}


a:visited {
    color: var(--fifth-accent);
}

a:hover {
    color: var(--fourth-accent);
}

/** class **/


/* 2. Typography */
h1 {
     font-family: "Sonsie", 'Times New Roman', Times, serif;
}

h2,
h3 {
    font-family: "Carme", Arial, Helvetica, sans-serif;

}

h1 {
    font-size: 5rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.1rem;
}

p {
    font-size: 1rem;
}

/* 3. Layout */
.main-hero {
    width: 100%;
    margin: auto;
}

img {
    width: 100%;
}

@media print {

    h1,
    h2,
    p {
        color: var(--main-color-letters);
    }

    #homepage-main-hero {
        border-color: var(--main-accent);
        border-style: none;
    }

}

/** Mobile, small screen */
@media screen and (min-device-width: 1000px) {
    #homepage-main-hero {
        border-color: var(--main-accent);
        border-style: solid;
        border-width: 2px;
    }

    .main-hero {
        padding: 20px;
        width: 760px;
        margin: auto;
    }
}

@media screen and (orientation: landscape) {
    p {
        color: var(--main-color-letters);
    }

}

@media screen and (orientation: portrait) {

    h1,
    h2,
    p {
        color: var(--main-accent);
    }

}