html,body {
  height:100%;
}

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

ul{
  list-style:none;
}

body{
  font-size: 1rem;
  line-height: 1.6;
  background-color: #ecf0f1;
  color: #666;
  font-family: 'Roboto Condensed', sans-serif;
}

/*Nav Styles*/

header {
  background-color:#2c3e50;
  padding: 2rem 0;
}

nav{
    position: relative;
}

.logo{
  font-size: 1.5rem;
  color:#fff;
  font-weight:700;
}

/*
.menu li{
  position:relative;
}*/


.menu, .submenu, .submenu2{
    display:none;
}

.submenu{
  background-color: #92b9e0;
}

.menu a{
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 10px 1.5rem;
  transition: background-color .22s ease, color .22s ease;
}

#menu-checked{
    top:0px;
    right:20px;
}

#menu-checked,.submenu-check{
    position:absolute;
    z-index:100;
}

#menu-check:checked ~ .menu{
    display:block;
}

.submenu-check:checked ~ .submenu{
    display:block;
}


@media screen and (min-width:800px){
nav{
  max-width:1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#menu-check,.submenu-check{
    display:none;
}

.menu{
    display:block;
}

.menu > li, .menu > a{
  position:relative;
  display:inline-block;  
}




.menu a:hover{
  background-color: #f34949;
  color: #fff;
}

/*submenu level 1*/
.submenu{
  position:absolute;
  background-color: #2c3e50;
  left: 0;
  width:140px;
  display:none;
}

/*submenu level 2*/
.submenu2{
   position: absolute;
   background-color: #2c3e50;
   left:100%;
   top:0;
  display:none;
}

.menu li:hover > .submenu{
  display: block;
}    
}