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

body {
  height:100%;
  width: 100%;
  background-color:#FFFFCC;
}

.head {
  background-color: #00FF66;
  height:50px;
  width: 100vw;
}


.container {
  display:grid;
  grid-template-areas: 'leftpane rightpane';
  grid-template-columns: 160px auto;
  height: 100%;

}
.leftpane {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
  grid-area: leftpane;
  justify-self: start;
  background-color: #CCFFCC;
}


.rightpane {
  grid-area: rightpane;
  justify-self: start;

}
.footer {
  background-color: #00FF66;
  font-size: smaller;
  color: grey;
  height:20px;
  width: 100%;
}
/* menu css */
.topnav {width: 150px;overflow: hidden;text-align: left;background-color: transparent;margin:0;z-index:999}
.topnav a {overflow:hidden;display: block;color: black;padding:5px;text-align: left;text-decoration: none;background-color:#CCFFCC;}
.topnav .icon {display: none;}
.dropbtn a {font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;font-weight: 400;font-size: 13px;}
.dropdown {overflow: hidden;border:none;}
.dropdown .dropbtn {color:black;width:100%;padding:5px;text-align: left;border:none;background-color:#CCFFCC;}
.dropdown-content {margin:-22px 0 0 150px;display: none;position: absolute;background-color: #CCFFCC;z-index: 999;}
.dropdown-content a {float: none;position:relative;padding:5px;border-left: 1px solid black;border-right: 1px solid black;color: black;display: block;text-align: left;z-index:99}
.dropdown-content > a:last-child {border-bottom: 1px solid black;}
.dropdown-content > a:first-child {border-top: 1px solid black;}
.topnav a:hover, .dropdown:hover .dropbtn {}
.dropdown-content a:hover {}
.dropdown:hover .dropdown-content {display: block;}
@media screen and (min-width: 1300px) {
.topnav a {}
.dropdown .dropbtn {}
}
@media screen and (max-width: 1300px) {
.topnav a {}
.dropdown .dropbtn {}
}

@media screen and (max-width: 800px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav {position: relative;}
  .topnav .icon {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav a {
    float: none;
    display: block;
    text-align: left;
    border-radius:0px;
    margin:0px;
  }
  .topnav .dropdown {float: none;}
  .topnav .dropdown-content {position: relative;}
  .topnav .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    border-radius:0px;
    margin:0px;
  }

.dropdown-content {margin:0px;display: none;position: absolute;background-color: #CCFFCC;z-index: 999;}

  .topnav .dropdown-content a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  border:none;
  }
}