@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*{
    box-sizing:border-box;
}
.tab-nav-container{
    background-color: rgb(226, 226, 226);
    box-shadow: 0 3px 6px rgba(0, 0, 0,0.16);
    position: fixed;
    bottom:0;
    display:flex;
    justify-content: space-between;
    padding: 10px;
    width:100%;
}
.tab {
    background-color: rgb(226, 226, 226);
    color:rgba(45, 44, 46, 0.89);
    border-radius: 30px;
    cursor:pointer;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    margin:0 10px;  
    height:45px;
    transition: background 0.4s linear;
}
.tab i{
    font-size: 1.2em;
}
.tab p{
    font-weight:bold;
    top:50%;
    overflow: hidden;
    max-width:0;
}
.tab.active{
    background-color: #c9baa0;
}
.tab.active p{
    margin-left: 10px;
    max-width:200px;
    transition:max-width 0.4s linear;
    color:#212541;

}
/* .tab.active.purple{
    background-color: rgb(250, 210, 143, 0.2);
    color:rgb(250, 210, 143,1);
} */
.tab.active.purple{
    background-color: rgba(91, 55, 183, 0.2);
    color:rgb(91, 55, 183,1);
    
}
.tab.active.pink{
    background-color: rgba(201, 55, 157, 0.2);
    color:rgba(201, 55, 157, 0.2);
    max-height:45px;
}
.tab.active.yellow{
    background-color: rgba(230, 169, 25, 0.2);
    color:rgba(230, 169, 25, 0.2);
}
.tab.active.teal{
    background-color: rgba(28, 150, 162, 0.2);
    color:rgba(28, 150, 162, 0.2);
}
@media screen and (min-width:561px) {
    .tab-nav-container{
        visibility:hidden
    }
}

@media screen and (max-width:560px) {
    .tab-nav-container{
        visibility:visible
    }
    .tab.active i{
        margin-left:-3px;
    }
    .tab p{
        position: relative;
        top:20%;
        font-size: 0.6em;
    }
    
    .tab.active p{
        margin-left: 8px;
        max-width:80px;
        transition:max-width 0.4s linear;
    }
}