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

#sec1 ul li {
    margin-top: 25px;
}

#sec1 ul {
    margin-left: 25px;
    margin-top: 35px;
}

#wrapper {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 4fr 4fr 4fr 1fr;
    grid-template-areas:"." "e" "b" "c" "d" "f";
    gap: 1.5vh;
}
body{
    font-family: "Poppins", sans-serif;
    background-color: #f2f2f0;
    background-image: url(" ../media/background.png");
}

h2 {
    border-radius: 5px;
    background-color: #A8BF56;
    color: black;
    font-family: "Poppins", sans-serif;
    text-align: center;
}
header {
    z-index: 100;
    position: fixed;
    font-family: "Poppins", sans-serif;
    background-color: #A8BF56;
    width: 100%;
    line-height: 6.25vh;
    min-height: 75px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    

}

.currentpage {
    text-decoration-color: rgb(0, 0, 0);
}

header h1 {
    font-size: 25px;
    padding-left: 100px;
    float: left;
    color: black;
    text-decoration: underline transparent;
    transition: 200ms ease;
}

header h1:hover {
    text-decoration-color: rgb(0, 0, 0);

}

header ul {
    margin-left: 75px;
    list-style-type: none;
    display: inline;
    float: left;
    text-align: center;




}

footer h3 {
    font-weight: 600;
}

#sec4 h2 {

    background-color: #A8BF56;

}

header ul li{
    float: left;
}


header ul li a {
    font-size: 20px;
    color: black;
    text-decoration: none;
    width: 12.5vw;
    transition: 0.2s;
    display: block;
    border-radius: 10px;
    text-decoration: underline transparent;
    transition: 200ms ease;

}



header ul li a:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-decoration-color: rgb(0, 0, 0);
}

#burgermenu {
    border-radius: 5px;
    position: absolute;
    width: 50px;
    height: 50px;
    margin-top: 12.5px;
    right: 20px;
    background-color: white;
}

#linecontainer {
    margin-top: 10px;
}

.lines {
    width: 35px;
    height: 5px;
    margin-left: 7.5px;
    margin-top: 7px;
    background-color: black;
    transition: 0.2s;
    border-radius: 2px;
}

#nav-mobile {
    /* display: none; */
    transition: 0.2s;
    transform: translate(0, -500px);

 }


nav {
    opacity: 0;
    transition: 0.2s;
    background-color: rgb(242, 236, 153);
    width: 100%;
    height: 30vh;
    position: fixed;
    box-shadow: 0 50px 70px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(242, 236, 153, 0.19);
}
nav ul   {
    margin-top: 90px;
    
    line-height: 100px;
    
}

#nackalogo {
    top: 4px;
    left: 25px;
    position: absolute;
    width: 60px;
    height: 75px;
}

header ul li a.floralgreen:hover {
    background-color: #c7dd65;
}

header ul li a.yellow:hover {
    background-color: #F2EC99;

}

header ul li a.lightgreen:hover {
    background-color: #A8BF56;

}

nav ul li a.floralgreen {
    background-color: #c7dd65;
}

nav ul li a.yellow {
    background-color: #F2EC99;

}

nav ul li a.lightgreen {
    background-color: #A8BF56;

}

nav ul li a{

    background-color: #F2EC99;
    text-align: center;
    display: block;
    height: 100px;
    transition: 0.2s;
    color: black;
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;

}



section {
    border-radius: 10px;
    padding: 15px;
    background-color: #ffffff;
    margin: 15px;
}
#sec1{
    grid-area: b;
}

#sec1 h2{
    background-color: #c7dd65;
}

#sec2{
    max-height: 600px;
    grid-area: c; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.underimgtitle {
    text-align: center;
    font-size: 12.5px;
    color: rgb(85, 85, 85);
}

#wrapper img{
    max-height: 100%; 
    max-width: 100%;
    padding: 15px;

}

#sec3{
    grid-area: d;
}

#sec3 h2 {
    background-color: #F2EC99;
}

#sec4 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-top: 100px;
    background-color: #F2F2F0;
    grid-area: e;
}

#sec5 {
    max-height: 250px;
    display: none;
    margin: auto;
    grid-area: g;
}

#sec5 img {
    max-height: 250px;
}

footer {
    font-family: "Poppins", sans-serif;
    padding: 12.5px;
    background-color: #A8BF56;
    grid-area: f;
}

#navheader {
    display: none;
}

#line1 {
    transition: 0.2s;
}
#line2 {
    transition: 0.2s;

}
#line3 {
    transition: 0.2s;

}

footer div {
    float: left;
    margin-right: 25px;
}

@media only screen and (min-width: 600px) {
    #sec2 {
        height: 230px;
    }
    #sec4 {
        margin-top: 200px;
    }
    #wrapper {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 2fr 3fr 3fr 1fr;
        grid-template-areas: 
						    "e e e e e e e e"
						    "b b b b c c c c"
						    "g g g g d d d d"
                            "f f f f f f f f";
    }
    #sec5 {
        display: grid;
    }
    header {
        line-height: 10vh;
    }
    #burgermenu {
        margin-top: 35px;
    }
    #nackalogo {
        top: 25%;
    }
}

@media only screen and (min-width: 769px) {

    #sec5 img {
        width: 250px;
        max-height: 300px;
        margin: auto;
        
    }

    #sec2 {
        height: 450px;
    }


    #nackalogo {
        top: 25%;
    }


    #sec4 {
        margin-top: 200px;
    }
    #burgermenu {
        display: none;
    }
    #navheader {
        display: inline;
    }


    
    #wrapper {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 2fr 3fr 3fr 1fr;
        grid-template-areas: 
						    ". e e e e e e ."
						    ". c c c b b b ."
						    ". d d d g g g ."
                            "f f f f f f f f";
    }
    

}