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

/*allt*/
body {
    font-family: 'Ubuntu', sans-serif;
    background-color: #A2A64D;
    margin-left: 2%;
    margin-right: 2%;
}

h2{
    text-align: center;
}

#intr{
    text-align: center;
    margin-bottom: 2%;
}

p{
    margin-bottom: 1%;
}

/* Style till navigationsmeny */

.topnav {
    overflow: hidden;
    background-color: #30420D;
    position: relative;
    margin-bottom: 5%;
}

/* Gömm navigationslänkar föruton loggan */
.topnav #myLinks {
    display: none;
}

/* Style till navigationslänkar */
.topnav a {
    color: #F4F3F8;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Style till hamburgarmeny */
.topnav a.icon {
    background: #140D14;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

/* Lägg till vit bakgrund vid hover */
.topnav a:hover {
    background-color: #F4F3F8;
    color: #140D14
}

/*speciellt mobil*/
footer {
    margin-top: 2%;
    font-size: smaller;
}

.rubrik {
    margin-bottom: 3%;
    margin-top: 4%;
}

section {
    margin-top: 2%;
}

img {
    width: 100%;
}

#logga {
    width: 5%;
}

h1 {
    background-color: #A2A64D;
    color: #140D14;
}

h4 {
    color: #140D14;
    margin-bottom: 2%;
}

footer {
    background-color: #30420D;
    color: #F4F3F8;
    text-align: center;
}

#wrapper{
    display: grid;
    grid-gap: 1vw;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(10, 1fr);
}

#ett {
    grid-column: 1;
    grid-row: 1;
}

#el {
    grid-column: 1;
    grid-row: 2;
}

#två {
    grid-column: 1;
    grid-row: 5;
}

#tre{
    grid-column: 1;
    grid-row: 3;
}

#mat {
    grid-column: 1;
    grid-row: 4;
}

#vatten {
    grid-column: 1;
    grid-row: 6;
}

#avfall{
    grid-column: 1;
    grid-row: 7;
}

#kläder{
    grid-column: 1;
    grid-row: 8;
}

#etik {
    grid-column: 1;
    grid-row: 9;
}

#hållbarhet {
    grid-column: 1;
    grid-row: 10;
}

/*specillt tablet*/
@media only screen and (min-width:600px) {
    h1 {
        text-align: center;
        height: 2%;
    }

    h4 {
        height: 2%;
        background-color: #A2A64D;
    }

    section {
        background-color: #A2A64D;
        display: block;
    }

    img {
        width: 75%;
    }

    #logga {
        width: 2.5%;
    }

    #wrapper {
        display: grid;
        grid-gap: 1vw;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 1fr);
    }

    #ett {
        grid-column: 1;
        grid-row: 1;
    }

    #el {
        grid-column: 2;
        grid-row: 1;
    }

    #två {
        grid-column: 1;
        grid-row: 2;
    }

    #tre{
        grid-column: 1;
        grid-row: 3;
    }

    #mat {
        grid-column: 2;
        grid-row: 2;
    }

    #vatten {
        grid-column: 2;
        grid-row: 3;
    }

    #avfall{
        grid-column: 1;
        grid-row: 4;
    }

    #kläder{
        grid-column: 2;
        grid-row: 4;
    }

    #etik {
        grid-column: 1;
        grid-row: 5;
    }

    #hållbarhet {
        grid-column: 2;
        grid-row: 5;
    }
}

/*speciellt desktop*/
@media only screen and (min-width:769px) {
    #wrapper {
        display: grid;
        grid-gap: 1vw;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    #ett {
        grid-column: 1;
        grid-row: 1;
    }

    #el {
        grid-column: 2;
        grid-row: 1;
    }

    #två {
        grid-column: 1;
        grid-row: 2;
    }

    #tre{
        grid-column: 1;
        grid-row: 3;
    }

    #mat {
        grid-column: 3;
        grid-row: 1;
    }

    #vatten {
        grid-column: 2;
        grid-row: 2;
    }

    #avfall{
        grid-column: 3;
        grid-row: 2;
    }

    #kläder{
        grid-column: 2 / span 2;
        grid-row: 3;
    }

    #etik {
        grid-column: 1 / span 2     ;
        grid-row: 4;
    }

    #hållbarhet {
        grid-column: 3;
        grid-row: 4;
    }
}

/*speciellt stor skärm >1000px*/
@media only screen and (min-width:1000px) {
    body {
        margin-left: 0.5%;
        margin-right: 0.5%;
    }
}