:root{
    --primary: #277650 ;
    --dark:  #003B1F;
    --medDark: #0F5935 ;
    --medLight: #4A9470 ;
    --light: #76B295 ;
    
  }
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    
    }
body{
    background-image: url(background.jpg);
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.wrapper{
    display:grid;
    grid-gap:5px;
    grid-template-columns:repeat(6,1fr);
    margin:3px;
}
.boxL1{
grid-column:span 6;
background:var(--light);
display:flex;
height: 35px;
justify-content:center;
padding-top:15px;
/*align-content:center;*/
}

.boxL2{
grid-column:span 2;
background: olivedrab;
}
.boxL3{
    grid-column:span 3;
    background:coral;
}

h2{
    color:blueviolet;
}
header{
    position:fixed;
    display: flex;
}
header h2{
    margin:10px;
    align-self:flex-start;
}
.hamburger{
    display:none;
}
body{
    font-family: 'Ubuntu', sans-serif;
}
.navigation{
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-end;
    list-style: none;
    margin:0;
    background-color:var(--medLight);

}
.navigation a{
    text-decoration:none;
    display:block;
    padding: .5cm;
    color:var(--dark);
}
.navigation a:hover{
    background-color:var(--light);
}
.push-left{
margin-right: auto;
justify-content:start;

}
.mainContent{
    display:flex;
    padding:50px;
    font-family: 'Mukta', sans-serif;
}
.topBox{
    border:2px solid var(--medDark);
}
.centerBox{
    border:2px solid var(--medDark);
    align-self:center;
}
.footer{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    list-style: none;
    margin:0;
    background-color:var(--medLight);
}
.footer a{
    text-decoration:none;
    display:block;
    padding: .5cm;
    color:var(--dark);
}
.footer a:hover{
    background-color:var(--light);
}
.boxCat{
    grid-column:3/4;
    border:double #223344;
    float:right;
    justify-content:center;
    background: var(--medLight);
}

@media all and (max-width:600px){
    header{
    position:fixed;
    display: flex;
    width: 100%;
    height: 45px;
    background-color: var(--medLight);
    justify-content: space-between;
    align-content:flex-start;
    margin-bottom:45px;
    }

    .navigation{
        flex-flow:column wrap;
        padding-top:45px;
        display:none;
        margin-bottom:-45px;
        /*padding-bottom:45px*/
    }
    .navigation a{
      text-align:center;
      padding:10px;
      border-top:1px solid var(--light);  
    }
    .footer{
        font-size:11.11px;
    }
    .mainContent{
        flex-flow:column wrap;
    }
    .hamburger{
        display: flex;
        font-size: 22pt;
        color: var(--dark);
        margin-right:25px;
    }
    .wrapper{
        padding-top:50px;
        display:grid;
        grid-template-columns:repeat(1,1fr);
    }
    .boxL1{
        grid-column:span 1;
    }
    .boxL2{
        grid-column:span 1;
        background: rgb(241, 241, 179);
    }
    .boxL3{
        grid-column:span 1;
        background: rgb(241, 241, 179);
    }
    .boxCat{
        grid-column:span 1;
    }

}