nav{
    background: #1f1e31;
    opacity: 0.90;
    /* sidebar stay to the top */
    top: 0;
    position: fixed;
    /* sidebar stays to the left */
    width: 2.4rem;
    white-space: nowrap;    
    /*no height, otherwise takes up length of body*/
    /* needs minimum width (not in %) otherwise, it flexes */
    
    transition: all 0.5s ease;
    border-radius: 0 0 15px 0;
    z-index: 100;
    padding: 0.5rem 0 0.6rem 0.5rem;
    box-shadow: 0 0 10px black;
    }

.logo-img {
    width: 30px; height: 30px;
    margin-left: -5px;
    padding-bottom: 5px 0 5px 0; 
}

i.bx.bx-home, 
i.bx.bx-door-open, 
i.bx.bx-camera, 
i.bx.bx-bomb, 
i.bx-chair, 
i.bx.bx-envelope, 
i.bx-dots-horizontal-rounded {
        color: #fcfbf4; line-height: 8px; font-size: 1.19em; padding: 0 1rem 0.6rem 0;}

i.fa-brands.fa-facebook, i.fa-brands.fa-x-twitter, i.fa-brands.fa-instagram{
    color: #fcfbf4; line-height: 10px; font-size: 1em;}

    i.bx.bx-home{color: coral;}

/*  ul */

    ul li{margin-left: -48px;}

      ul li a{display: block; padding: 0.5rem;}

      ul li a:hover{transform: scale(1.1);}

/*tooltip*/
    [data-title]:hover:after {
        opacity: 1;
        transition: all 0.1s ease 0.5s;
        visibility: visible;
    }

    [data-title]:after {
        content: attr(data-title);
        position: absolute;
        font-weight: 400;
        font-size: 0.8rem;
        bottom: 0.7em;
        font-family: "Wendy One", sans-serif;
        left: 90%;
        padding: 4px 4px 4px 4px;
        color: #222;
        white-space: nowrap; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px;  
        border-radius: 5px;  
        -moz-box-shadow: 0px 0px 4px #222;  
        -webkit-box-shadow: 0px 0px 4px #222;  
        box-shadow: 0px 0px 4px #222;  
        background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
        background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
        background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
        background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
        background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
        opacity: 0;
        z-index: 99999;
        visibility: hidden;
    }
    [data-title] {
        position: relative;
    }