*{
    margin: 0px;
    padding: 0px;
}
#todo-menu{
    top: 50px;
    left: 30px;
    position: relative;
    
}
.menu{
    float: left;
    display: inline-block;
    width: 700px;
    height: 55px;
    font-family: arial, sans-serif; 

    
}
.menu ul{
    list-style: none;
}
.menu ul li{
    font-size: 1.1rem;
    width:169px;
    float: left;
    
}

.menu a{
    padding:5px;
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;
}
.menu ul ul{
    position: absolute;
    visibility: hidden; 
}
.menu ul li:hover ul{
    visibility:visible;
    
}
.menu a:hover{
    color: #ff4000;
}
.menu ul ul li{
    float: none;
    order-bottom: solid 1px #ffffff ;
}
.menu ul ul li a{
    ackground-color:#01172cab;

}
label[for="bt-menu"]{
    padding: 5px;
    
    color: white;
    font-family: arial, sans-serif;
    text-align: center;
    font-size: 2px;
    cursor: pointer;
    width: 50px;
    height: 43px;
  
    
}
#bt-menu{
    display:none;
}
label[for="bt-menu"]{
    display: none;
    cursor: pointer;
    
}
@media(max-width:980px){
    #todo-menu{
        top: 50px;
        left: 0px;
        position: fixed;
      
        
        
    }
    
    
    label[for="bt-menu"]{
        display:block;
        color: rgb(255, 255, 255);
        font-size: 30px;
        background-color: #0000004b;
        margin-left: .1rem;
        
       
        
    }
    #bt-menu:checked ~ .menu{
        margin-left: 0;
        
    }
    .menu a{
        line-height: 80px;
        width:300px;
        height:80px;

        border-bottom: solid 1px #ffffff;
        background-color: rgba(0, 0, 0, 0.959);
    }

    .menu{
        width:300px ;
        height: 100px;
        font-family: arial, sans-serif; 
        border-radius: 2%;   
        margin-top: 5px;
        margin-left: -100%;
        transition: all .4s;
    }


    .menu ul li{
        width: 100%;
        float: none;
        
    }
    .menu ul ul li a{
        background-color:#01172cab;
    
    }
    .menu ul ul{
        position: static;
        overflow: hidden;
        max-height: 0;
        transition: all .4s;
        
    }
    .menu ul li:hover ul{
        height: auto;
        max-height: 300px;
        
    }
}