@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;0,900;1,400&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

.menuinicio{
    background: #000000;
    height: 3.5rem;
    width: 100%;
}
.enlace{
    position: absolute;
}

.menuinicio ul{

    margin-right: 3rem;
}
.menuinicio ul li{
    display: inline-block;
    line-height: 58px;
    margin: 0 5px 5px
}
.menuinicio ul li a{
    color: white;
    font-size: 18px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}

.checkbtn{
    font-size: 30px;
    color:  rgb(158, 110, 81);
    float:right;
    line-height: 70px;
    margin-right: 1rem;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}


@media (max-width: 55rem){
    .checkbtn{
        display: block;
    } 
    
    .menuinicio ul{
        position: fixed;
        width: 60%;
        height: 100vh;
        background: #000000f1;
        top: 50px;
        left: -100%;
        text-align: center;
        transition: all .3s;
    }
    .menuinicio ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    .menuinicio li a{
        font-size: 20px;
    }
    .menuinicio ul li a:hover, li a.active{
        background: none;
        color: rgb(158, 110, 81);
    }
    #check:checked ~ ul{
        left:0;
    }
}