*{
    margin:0;
    box-sizing: border-box;
}

/*Generel styling*/

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f5f2;
}

h1, h2, h3, h4 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-bottom: 1rem;
}

h1{
    font-size: 35px;
}

p, a{
    font-size: 1rem;
    line-height:1.4;
}

p{
    padding-bottom: 0.5rem; /*Der laves mellemrum mellem paragrafferne*/
}

img{
    max-width: 100%;
}

.blog-1 a, .blog-2 a{
    border: 2px solid white;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    color: white;
    display: inline-block; /*Vi tilføjer inline-block til vores a-tag så den opfører sig som en blok og ikke overlapper teksten*/
    margin-top: 1rem;
}

/*Hovedindholdet*/

.flexbox{
    margin: 2rem;
}

.grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr); /*Der oprettes 6 kolonner af størrelsen 1 fraction*/
    grid-template-rows: repeat(4, 1fr); /*Der oprettes 4 rækker af størrelsen 1 fraction*/
}

.intro-tekst{
    background-color: #0e7dcd;
    grid-column: 1/7;
    grid-row: 1/3;
    padding: 2rem;
}

.blog-1, .blog-2{
    padding: 2rem;
}

.blog-1{
    grid-column: 1/7;
    grid-row: 3/4;
    background-color: #b11352;
}

.blog-2{
    grid-column: 1/7;
    grid-row: 4/5;
    background-color: #7318ea;
}

/*Footer*/

footer{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer section:nth-of-type(1){
    margin-bottom: 1rem;
}



/*Desktop version*/

@media screen and (min-width: 769px /*769px i stedet for for 768px for at sikre at de mest gængse tablet størrelser er inkluderet*/){
    .flexbox{
        display: flex;
        gap: 1rem;
    }

    .flexbox div{
        width: 60%;
    }

    .flexbox img{
        width:40%;
    }

    .intro-tekst{
        grid-column: 1/4;
        grid-row: 1/5;
    }

    .blog-1{
        grid-column: 4/7;
        grid-row: 1/3;
    }

    .blog-2{
        grid-column: 4/7;
        grid-row: 3/5;
    }

    footer{
        flex-direction: row;
        justify-content: space-between;
        align-items: start; /*Får sektionerne til at være på linje med hinanden i toppen af footeren.*/
    }


}