/*gäller för alla sidor*/

* {
    box-sizing: border-box;
}

body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/*header*/

/*header centrerar och lägger den högst på sidan*/
header {
    display: flex;
    text-align: center;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 2;
    background-color: black;
    color: greenyellow;
    width: 100%;
    height: 100px;
    padding: 20px;
}

header a {
    color: greenyellow;
    font-family: sans-serif;
    background-color: black;
    text-decoration: none;
    font-size: 20px;
    margin: 12px;
}

/*ändrar hur header ser ut vid hover*/
.hem:hover, .produkter:hover, .jamfor:hover, .om_oss:hover, .kontakt:hover, .faq:hover, .bestall:hover {
    transform: scale(1.1);
    text-decoration: underline;
}

.img0, .img01 {
    width: 25px;
    height: 25px;
}

/*header ändras lite*/
@media (max-width: 900px) {
    header {
        height: auto;
        padding: 15px;
    }
}

/*header byter form*/
@media (max-width: 600px) {
    header {
        display: grid;
        grid-template-areas: 
        'hem none jamfor bestall'
        'produkter kontakt om_oss faq';
        height: auto;
        padding: 10px;
    }

    .jamfor {
        font-size: 30px;
    }

    .produkter, .kontakt, .om_oss, .faq {
        font-size: 15px;
    }

    .img0, .img01 {
        height: 40px;
        width: 40px;
    }

    footer {
        text-align: center;
        padding: 20px;
    }
}

/*footer*/

footer {
    color: white;
    background-color: black;
    display: grid;
    grid-template-areas:
    'foot1 foot2'
    'footer footer';
    gap: 20px 100px;
}

/*individuell stil + grid-area*/

.foot1 {
    grid-area: foot1;
    text-align: right;
    padding-top: 50px;
}

.foot2 {
    grid-area: foot2;
    text-align: left;
    padding-top: 50px;
}

footer a {
    color: white;
    font-size: 20px;
}

footer a:hover {
    color: rgb(170, 170, 170);
}

.center {
    grid-area: footer;
    margin-top: auto;
    text-align: center;
    font-size: 20px;
}

/*grid-area*/

.hem {
    grid-area: hem;
}

.produkter {
    grid-area: produkter;
}

.jamfor {
    grid-area: jamfor
}

.om_oss {
    grid-area: om_oss
}

.kontakt {
    grid-area: kontakt;
}

.faq {
    grid-area: faq;
}

.bestall {
    grid-area: bestall;
}