*{  
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}


.texts{
    padding: 10px;
    background-color: rgb(34, 44, 78, 0.7);
}


#body{
    /*background-color: rgb(191, 202, 228, 0.8);*/
    background-color: rgba(43, 79, 163, 0.8);
}

#main{
    height: 130vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 40px 60px 820px;
    grid-template-areas: "m m" "n1 n1" "t t" "s1 s1" "ps ps" "mp mp";

}

#nav1{
    margin-left: 10%;
    text-align: center;
    background-color: rgb(74, 64, 138, 0.5);
    height: 100%;
    width: 80%;
    display: none;
    grid-area: n1;
    


}

#title{
    grid-area: t;
    color: rgb(0, 0, 0);
    font-size:xx-large;
    text-align: center;
}

.list{
    width: 33.33%;
    height: 100%;
    list-style-type: none;
    border: 2px solid;
    float: left;
}

#sec1{
    width: 100%;
    display: grid;
    grid-area: s1;
    grid-template-columns: 1fr 20px 1fr;
    /*grid-template-rows: 150px 130px 120px 40px 130px 280px;*/
    grid-template-rows: 21vh 20px 40vh 20px 20vh 10px 40px 40vh 20px 20vh;
    grid-template-areas: "c c c" ". . ." "te1 te1 te1" ". . ." "p1 . p2" ". . ." "ti2 ti2 ti2" "te2 te2 te2" ". . ." "p3 p3 p3";
}

#city{
    grid-area: c;
    width: 80%;
    margin-left: 10%;
}

#menu{
    width: 10%;
    grid-area: m;
    cursor:pointer;
    
}


#text1{
    grid-area: te1;
    width: 90%;
    height: 100%;
    margin-left: 5%;

}

#title2{
    color: black;
    grid-area: ti2;
    text-align: center;
    font-size: large;
}


#placeholder1{
    grid-area: p1;
    width: 100%;
    height: 100%;
}

#placeholder2{
    grid-area: p2;
    width: 100%;
    height: 100%;
}

#text2{
    height: 100%;
    grid-area: te2;
    width: 100%;
}

#memberspage{
    margin-top: 20px;
    width: 100%;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "m1 mt1" "m2 mt2" "m3 mt3" "m4 mt4" "m5 mt5";
    display: none;
    grid-area: mp;
}

#mem1{
    grid-area: m1;
    width: 80%;
    height: 80%;
}

#mem2{
    grid-area: m2;
    width: 80%;
    height: 80%;
}

#mem3{
    grid-area: m3;
    width: 80%;
    height: 80%;
}

#mem4{
    grid-area: m4;
    width: 80%;
    height: 80%;
}

#mem5{
    grid-area: m5;
    width: 80%;
    height: 80%;

}

#memtext1{
    grid-area: mt1;
}

#memtext2{
    grid-area: mt2;
}

#memtext3{
    grid-area: mt3;
}

#memtext4{
    grid-area: mt4;
}

#memtext5{
    grid-area: mt5;
}

#process{
    height: 150vh;
    width: 100%;
    display: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 20px 0.75fr 60px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 40px 200px;
    grid-template-areas: "pa pa" ". ." "pt pt" "pti2 pti2" "pp1 pp1" ". ." "prt1 prt1" ". ." "pp2 pp2" ". ." "prt2 prt2" ". ." "pp3 pp3" ". ." "prt3 prt3" ". ." "dc dc";
    grid-area: ps;
}

#progressAnimation{
    height: 90%;
    width: 85%;
    margin-left: 7.5%;
    grid-area: pa;
}

#processText1{
    width: 80%;
    margin-left: 10%;
    grid-area: pt;
}

#processTitle2{
    text-align: center;
    color: black;
    margin-top: 20px;
    height: 100%;
    grid-area: pti2;
}

#progressPic1{
    height: 100%;
    width: 90%;
    margin-left: 5%;
    grid-area: pp1;
}

#progressPic2{
    height: 100%;
    width: 90%;
    margin-left: 5%;
    grid-area: pp2;
}

#progressPic3{
    height: 100%;
    width: 90%;
    margin-left: 5%;
    grid-area: pp3;
}

#proText1{
    grid-area: prt1;
}

#proText2{
    grid-area: prt2;
}

#proText3{
    grid-area: prt3;
}

#disc{
    height: 100vh;
    grid-area: dc;
}

#placeholder3{
    grid-area: p3;
    width: 100%;
}

.mt{
    font-size: large;
}

@media only screen and (min-width: 600px) {
    /* Här skriver du design för tablet */

    #main{
        height: 100vh;
        grid-template-rows: 100px 40px 60px 700px;
        grid-template-areas: "m m" "n1 n1" "t t" "s1 s1";
    }

    #sec1{
        display: grid;
        width: 100%;
        padding: 5%;
        row-gap: 2.5%;
        grid-template-columns: 1fr 20px 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "a . b" "c . d" "e . ." "g . f";
    }

    #title{
        margin-top: 10px;
    }
    

    #city{
        grid-area: a;
        height: 100%;
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }

    #text1{
        margin: 0;
        width: 100%;
        grid-area: b;
        
    }

    #placeholder1{

        grid-area: c;
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #placeholder2{
        grid-area: d;
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #title2{
        text-align: left;
        grid-area: e;
    }

    #text2{
        margin: 0;
        width: 100%;
        grid-area: f;
    }

    #placeholder3{
        margin: 0;
        grid-area: g;
        height: 100%;
        width: 100%;
    }

    #memberspage{
        margin-top: 20px;
    }

    #progressAnimation{
        height: 100%;
        width: 80%;
        margin-left: 10%;
    }

    #processTitle2{
        text-align: left;
    }

    #disc{
        height: 40vh;
    }

    #process{
        height: 80vh;
        grid-template-rows: 250px 20px 0.75fr 60px 1fr 20px 1fr 20px 1fr 20px 200px;
        grid-template-areas: "pa pa" ". ." "pt pt" "pti2 pti2" "pp1 prt1" ". ." "pp2 prt2" ". ." "pp3 prt3" ". ." "dc dc"
    }
}

@media only screen and (min-width: 769px) {
    /* Här skriver du design för desktop */

    #main{
        grid-template-columns: 50px 1fr 1fr;
        grid-template-rows: 50px 100px 40px 60px 820px;
        grid-template-areas: "t t t" "m n1 n1" "s1 s1 s1";
        padding: 3%;
        height: 90vh;
    }

    #title{
        text-align: center;
        margin-top: 0px;
    }

    #menu{
        width: 100%;
    }

    #nav1{
        height: 50%;
        margin-top: 5%;
    }

    .list{
        font-size: x-large;
    }
    #memberspage{
        margin-top: 80px;
        width: 100%;
    }

    #title2{
        margin: 0;
        font-size: x-large;
    }

    #sec1{
        display: grid;
        grid-template-rows: 1fr 20px 1fr 40px 40px 20px 1fr 1fr 1fr;
        grid-template-areas: "a . b" ". . ." "c . d" ". . ." "e e e" ". . ." "f . g";
        padding: 2%;
    }

    #process{
        grid-template-rows: 250px 25px 100px 160px 1fr 20px 1fr 20px 1fr 20px 250px;
        grid-template-areas: "pa pa" ". ." "pt pt" "pti2 pti2" "pp1 prt1" ". ." "pp2 prt2" ". ." "pp3 prt3" ". ." "dc dc";
    }

    #progressAnimation{
        width: 70%;
        margin-left: 15%;
    }

    #processTitle2{
        font-size: xx-large;
        margin-top: 80px;
    }
}