/*Jeg brugte adobe farvehjul for at hjælpe mig med alle farver for min hjemmeside. Hovedfarve var baaggrundfarve og jeg brugte begge analoge og komplementære farver. Komplementær farve brugte jeg kun for border af billeder.*/
body {
    font-family: sans-serif;
    background-color: #d85757;
    margin: 1em;
}

p{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    text-align: center;
}

h1 {
    color: #8C2A2A;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#menugrid div {
    font-size: 2em;
    color: #000000;
    text-align: center;
    border-color: #8C2A2A;
    border-width: 2px;
    border-style: solid;
    border-radius: 2em;
    padding: 0.5em;
    margin-bottom: 0.25em;
}

#menugrid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;

    grid-template-areas:
    "frsd selv udns inrs";
}

#menu1 {
    grid-area: frsd;
    background-color:#F06B54;
}

#menu2 {
    grid-area: selv;
    background-color:#F06B54;
}

#menu3 {
    grid-area: udns;
    background-color:#F06B54;
}

#menu4 {
    grid-area: inrs;
    background-color:#F06B54;
}

#maingrid div {
    font-size: 2em;
    color: #000000;
    text-align: center;
    border-color: #8C2A2A;
    border-width: 2px;
    border-style: solid;
    border-radius: 1em;
    padding: 0.5em;
}

#maingrid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    
    grid-template-areas: 
    "imag imag imag"
    "imag imag imag"
    "text text text"
    "text text text";
}

#text {
    grid-area: text;
    background-color: #E67C50;
}

#image {
    grid-area: imag;
    background-color: #E67C50;
}

.image1 {
   border-radius: 2em;
   border-color: #1C8C3C;
   border-style: solid;
   border-width: 2px;
}
/* Border-radius gøre kanterne af billeder rund.*/