:root{
    --clr-lite-shades: #F4F3EE;
    --clr-lite-accent: #879190;
    --clr-main-brand: #cb9e5a;
    --clr-dark-accent: #804840;
    --clr-dark-shades: #2b3638;
}

@font-face {
    font-family: GrapeNuts;
    src: url(../fonts/GrapeNuts-Regular.ttf);
}
@font-face {
    font-family: Scriptorial;
    src: url(../fonts/Scriptorial.ttf);
}
@font-face {
    font-family: IndieFlower;
    src: url(../fonts/IndieFlower-Regular.ttf);
}

body{
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    background-color: var(--clr-dark-shades);
    grid-template-columns: 1fr 3fr;
}

p{
    font-family: IndieFlower;
    font-size: large;
    color: var(--clr-lite-accent);
}
h1{
    font-family: GrapeNuts;
    font-size: 72px;
    font-style: normal;
    font-weight: normal;
    color: var(--clr-lite-accent);
}

h2{
    font-family: GrapeNuts;
    font-size: 72px;
    font-style: normal;
    font-weight: normal;
    color: var(--clr-main-brand);
}
h3{
    font-family: IndieFlower;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    color: var(--clr-lite-accent);
}

a{
    text-decoration: none;
    color: var(--clr-dark-accent);
}
a:hover{
    color: var(--clr-main-brand);
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

ul li a{
   display: block;
    text-align: center;
    padding: 14px 16px;
   
}

.textHighlight {
    color: #804840;
}




/* HEADER CONFIG */

header {
    border: 1px solid var(--clr-main-brand);
    grid-column: 1/5;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, fr);
}


.logo{
    grid-column: 1;
    grid-row: 1;
    max-width: 200px;
    margin: 5px;
    border: solid 1px var(--clr-main-brand);
    fill: var(--clr-main-brand);
}
.title{
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}
.pic{
    grid-column: 3;
    grid-row: 1;
    max-width: 200px;
    margin: 5px;
    border: solid 1px var(--clr-main-brand);
    justify-self: end;
}
.picSVG{
    grid-column: 3;
    grid-row: 1;
    max-width: 200px;
    margin: 5px;
    border: solid 1px var(--clr-main-brand);
    justify-self: end;
    fill: var(--clr-dark-accent); /* FIXME fill does not work */
}





nav{
    border: 2px solid var(--clr-main-brand);
    grid-column: 1/5;
    grid-row: 2;
}





aside{
    border: 2px solid var(--clr-main-brand);
    grid-column: 1;
    margin: 0;
    padding: 1em;
    
}
td{
    font-family: IndieFlower;
    font-size: large;
    color: var(--clr-lite-accent);
}
.alignRight{
    text-align: right;
}
.ingridiences{
    display: flex;
    justify-content: center;
}




section{
    border: 2px solid var(--clr-main-brand);
    grid-column: 2/5;
}



footer{
      border: 2px solid var(--clr-main-brand);
      grid-column: 1/5;
      
     
}
.liFooter{
    

}