/*

nav {
    position: fixed;
    display:grid;
    height: 100vh;
    left: 0px;
    top: 0;
    bottom: 0;
    margin: 0;
    background-color: rgb(4, 4, 4);
    padding: 20px 0px;
    border-radius: 0px 0px 10px;
    z-index: 10000;
}

    nav ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: column;
        height: 100%;
    }

        nav ul li {
            width: 100%;
        }

            nav ul li a {
                text-decoration: none;
                color: rgb(62, 62, 62);
                display: flex;
                align-items: center;
                cursor: pointer;
                width: 100%;
                transition: 0.2s all ease;
            }

                nav ul li a svg {
                    width: 30px;
                    height: 30px;
                }

                    nav ul li a svg path {
                        transition: 0.2s all ease;
                    }

                nav ul li a span {
                    position: absolute;
                    background-color: #fefefe;
                    padding: 2px 15px;
                    border-radius: 30px;
                    margin-left: 10px;
                    font-weight: 500;
                    font-size: 15px;
                    visibility: hidden;
                    opacity: 0;
                    transition: 0.2s all ease;
                }

                nav ul li a.active,
                nav ul li a:hover {
                    color: #2000bb;
                }

                    nav ul li a.active span,
                    nav ul li a:hover span {
                        opacity: 1;
                        visibility: visible;
                        margin-left: 50px;
                    }

    nav.active ul li a span {
        position: relative;
        opacity: 1;
        visibility: visible;
        margin-left: 0;
    }

    nav.active ul li a:hover span {
        margin-left: 0;
    }