body {
    background-color: #E3EAC7;
    font-family: 'Asap Condensed', verdana, sans-serif;

    display: grid;
    grid-template-columns: 1fr;
  
    grid-template-areas: 
          "title"
          "menu"
          "brood"
          "fruit"
          "drank"
          "zuivel"
          "snoep"
          "alcohol"
          "foot";
}
.header{
    grid-area: title;
}
#menu {
    grid-area: menu;
}
.brood {
    grid-area: brood;
}
.fruit {
    grid-area: fruit;
}
.drank {
    grid-area: drank;
}
.zuivel {
    grid-area: zuivel;
}
.snoep {
    grid-area: snoep;
}
.alcohol {
    grid-area: alcohol;
}  
.foot {
    grid-area: foot;
}

*, 
*:before,
*:after{
	box-sizing: inherit;
}

.menutoggle {
    width: 30px;
}
.menutoggle a{
    font-size: 2em;
    color: #5A5D3D;
    text-decoration: none;
}
.active {
    width: 100%;
    transition: width 0.6s;
}  
.inactive {
    width: 0;
    transition: width 0.6s;
}

.info {
    background-color: #E3E5D7;
    padding: 50px 25% 20px 25%;
}
.grid-element {
    margin: auto;
}

nav {
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100vh; 
    display: flex;
    flex-flow: column;
    padding: 0;
    margin: 0;
}  
nav ul {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: 0;
    margin: 0;
}  
nav ul li {
    display: flex;
    padding: 1em;
    margin: 0;
    list-style: none;
    justify-content: center;
}  
nav > ul > li > a {
    color: #5A5D3D;
    text-decoration: none;
}
.title {
    background-color: #E3EAC7;
    text-align: center;
    font-size: 2em;
    margin: auto;
    padding-bottom: 5px;
    transform: translate(0%, 50%);
    width: 75%;
    border-radius: 10px;
}

.text {
    background-color: #C8DB40;
    text-align: center;
    margin: auto;
    padding-bottom: 5px;
    transform: translate(0%, 50%);
    width: 50%;
    border-radius: 10px;
}

.fruit .text, .zuivel .text, .alcohol .text {
    background-color: #E3EAC7;
}
.brood, .drank, .snoep {
    background-color: #C8DB40;
}

footer {
    color: #FFFFFF;
    background-color: #5A5D3D;
    text-align: center;
    padding: 10px 0px 10px 0;
    border-radius: 10px 10px 0px 0px;
}

.side {
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1365px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr;
      
        grid-template-areas: 
              "title title"
              "menu menu"
              "brood fruit"
              "drank zuivel"
              "snoep alcohol"
              "foot foot";    
    }
    .zuivel, .zuivel .text {
        background-color: #C8DB40;
    }
    .drank, .drank .text {
        background-color: #E3EAC7;
    }

}

@media only screen and (min-width: 1366px) and (max-width: 1919px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;;
      
        grid-template-areas: 
              "title title title title"
              "menu menu menu menu"
              "side brood fruit drank"
              "side zuivel snoep alcohol"
              "foot foot foot foot"; 
    }  
}

@media only screen and (min-width: 1920px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: 
              "title title title title title title title"
              "menu menu menu menu menu menu menu"
              "side brood fruit drank zuivel snoep alcohol"
              "foot foot foot foot foot foot foot";
    }
}

/*----- zelfde voor 2 grote schermen -----*/
@media only screen and (min-width: 1366px) {
    .info {
        display: none;
    }
    .side {
        display: block;
        border: #5A5D3D solid 2px;
        padding: 50px;
        width: 200px;
    }
    .menutoggle {
        display: none;
    }    
    .active, .inactive {
        width: unset;
    }
    nav {
        position: static;
        height: unset;
        display: flex;
        flex-flow: row;
    }
    nav ul{
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        padding: 0;
    }
    nav ul li {
        display: flex;
        padding: 1em;
        margin: 0;
        list-style: none;
        justify-content: center;
        border: none;
    }
    nav ul li:hover {
        background-color: rgba(50, 50, 50, 0.5);
    }
}