@import url('https://fonts.googleapis.com/css2?family=ABeeZee&family=Open+Sans&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}


header{
    height: 120px;
    background: #333;
    color: #fff;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}


logo img{
    width: 200px; 
    height: 90px;
    position: absolute;
    left: 70px;
    top: 0;
}
    

#btn-menu{
    display:none;
}

header label{
    font-size:50px;
    cursor:pointer;
    display:none;
    text-align: center;
}


h1{
    float:right;
    font-size:50px;
}

.menu ul{
    // font-size:25px;
     background: #333;
     display: flex;
     flex-direction:column;
     display: block;
     list-style: none;
}

.menu ul ul {
    display: none;
}

.menu a{
    display:block;
    padding: 20px 30px;
    color: #fff;
    text-decoration:none;
}

.menu a:hover {
    background: rgba(0,191,255,0.2);
}

.menu a span {
    margin-left: 10px;
}

.menu ul li:hover ul {
    display:block;
    position:absolute;
}

@media (min-width:768px) {

    
    header{
        height: 100px;
        background: #333;
        color: #fff;
        display:flex;
        justify-content:flex-end;
        align-items:center;
    }
        
    header label {
        display:block;
    }
    
    h1{
        float:right;
        font-size:50px;
    }
     
    logo img{
        width: 220px; 
        height: 90px;
        position: absolute;
        left: 0px;
        top: 3px;
    }
    
    .menu {
        position:absolute;
        top: 100px;
        left:0px;
        width:100%;
        transform: translateX(-0%);
        transition:all 0.3s;
    }
    
    
    .menu ul{
        font-size:55px;
        display: block;
        background: #555;
    }
    
    .menu ul li:hover ul {
        display: none;
        position: static;
    }
    
    .menu a span {
        position: absolute;
        right: 5px;
    }
    
    #btn-menu:checked ~ .menu{
            transform: translateX(-0%);
    }
    
    .menu ul ul {
        background: rgba(0,191,255,0.4);
    }
    
    .menu ul ul a {
        padding: 20px 80px ;       
    }

    .menu ul ul ul {
        background: rgba(0,191,255,0.6);
    }
    
    .menu ul ul ul a {
        padding: 20px 130px ;       
    }
    
    
    .menu ul ul ul ul {
        background: rgba(255,0,0,0.4);
    }
    
    .menu ul ul ul ul a {
        padding: 20px 180px ;       
    }
    
    .menu ul ul ul ul ul {
        background: rgba(255,0,0,0.6);
    }
    
    .menu ul ul ul ul a {
        padding: 20px 210px ;       
    }    
    
}

@media (min-width:3040px) {
    
    header{
        height: 120px;
        background: #333;
        color: #fff;
        display:flex;
        justify-content:flex-end;
        align-items:center;
    }
    
    header label {
        display:block;
    }
    
    h1{
        float:right;
        font-size:50px;
    }    

    logo img{
        width: 200px; 
        height: 90px;
        position: absolute;
        left: 70px;
        top: 0;
    }    
    
    .menu {
        position:absolute;
        top: 100px;
        left:0px;
        width:100%;
        transform: translateX(-0%);
        transition:all 0.3s;
    }
    
    .menu ul{
        font-size:55px;
        display: block;
        background: #555;
    }
    
    .menu ul li:hover ul {
        display: none;
        position: static;
    }
    
    .menu a span {
        position: absolute;
        right: 5px;
    }
    
    #btn-menu:checked ~ .menu{
            transform: translateX(-0%);
    }
    
    .menu ul ul {
        background: rgba(0,191,255,0.4);
    }
    
    .menu ul ul a {
        padding: 20px 80px ;       
    }
    
    .menu ul ul ul {
        background: rgba(0,191,255,0.6);
    }
    
    .menu ul ul ul a {
        padding: 20px 130px ;       
    }
    
    .menu ul ul ul ul {
        background: rgba(255,0,0,0.4);
    }
    
    .menu ul ul ul ul a {
        padding: 20px 180px ;       
    }
    
    .menu ul ul ul ul ul {
        background: rgba(255,0,0,0.6);
    }
    
    .menu ul ul ul ul a {
        padding: 20px 210px ;       
    }    
    
}