*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: grid;
    height: 100vh;
    width: 100vw;
    gap: 2px;
    grid-template-columns: 100%;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas: "topnav"
                         "header"
                         "bild3"
                         "text1"
                         "bild4"
                         "text2"
                         "bild1"
                         "text3"
                         "bild2";
                         

}

    .topnav{
        background-color: darkblue;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        grid-area: topnav;
    }
    .topnav a{
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18px;
    }
    .topnav a:hover{
        background-color: lightslategray;
        color: black;
    }
    .topnav a.active{
        background-color: darkblue;
        color: white;
    }

header{
    text-align: center;
    grid-area: header;
    background-color: lightgray;
    border: 2px solid black;
    margin-top: 50px;
}

#bild1{
    grid-area: bild1;
}
#bild1 img{
    width: 100vw;
    height: 30vh;
}
#bild2{
grid-area: bild2;
}
#bild2 img{
    width: 100vw;
    height: 30vh;
}
#bild3{
grid-area: bild3;
}
#bild3 img{
    width: 100vw;
    height: 30vh;
}
#bild4{
grid-area: bild4;
}
#bild4 img{
    width: 100vw;
    height: 30vh;
}
#text1{
    grid-area: text1;
    background-color: lightgray;
    border: 2px solid black;
}
#text2{
    grid-area: text2;
    background-color: lightgray;
    border: 2px solid black;
}
#text3{
    grid-area: text3;
    background-color: lightgray;
    border: 2px solid black;
}

@media only screen and (min-width: 600px) {
    /* Här skriver du design för tablet */
    body{
        display: grid;
        height: 100vh;
        width: 100vw;
        grid-row-gap: 7.5px;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(8, 1fr);
        grid-template-areas: "topnav topnav"
                             "header header"
                             "text1 bild3"
                             "bild2 bild2"
                             "text2 text2"
                             "bild1 bild1"
                             "text3 text3"
                             "bild4 bild4";
}
    #bild2 img{
        width: 100vw;
        height: 30vh;
        
    }
    #bild3 img{
        width: 100%;
        height: 30vh;
        
    }
    #bild4 img{
        width: 100vw;
        height: 30vh;
        
    }
    #text1{
        width: 50vw;
        height: 30vh;
    }
    #text2{
        width: 100vw;
        height: 30vh;
    }
    #text3{
        width: 100vw;
        height: 30vh;
    }
    header{
        width: 100vw;
    }
    
}
    

@media only screen and (min-width: 769px) {
    /* Här skriver du design för desktop */
   body{
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: "topnav topnav"
                         "header header"
                         "text1 text1"
                         "text2 bild1"
                         "text3 bild2";

   }
   #text1{
     margin-top: 0px;
     width: 95%;
     height: 30vh;
     margin-left: 2.5%;
   }
   #text2{
    width: 97.5%;
    height: 44vh;
    margin-left: 1%;
   }
   #bild1 img{
    width: 100%;
    height: 44vh;
    margin-left: 0.2%;
   }
   #text3{
    width: 97.5%;
    height: 44vh;
    margin-left: 1%;
    margin-top: 0px;
   }
   #bild2 img{
    width: 100%;
    height: 44vh;
   }
   #bild3{
    display: none;
   }
   #bild4{
    display: none;
   }
   
}
/*Slideshow ska vara ett bildspel, men det fungerar tyvärr ej, därav display: none;