nav.css

nav {
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 0;
    transition: right 0.5s;
}

/* when nav bar is not tall enough */
@media (max-height: 431px) {
    nav {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

nav ul {
    margin: 20px;
    list-style: none;
}

nav ul li {
    margin-top: 17px;
}

nav a {
    text-decoration: none;
}

.material-icons {
    font-size: 30px;
    transition: transform 0.5s;
}
.material-icons:hover, i.active {
    transform: scale(1.2);
}

i#menu {
    position: fixed;
    bottom: 10px;
    transform: translate(-55px, 0);
    cursor: pointer;
    color: rgb(231, 227, 227);
    background-color: rgba(0, 0, 0, 0.356);
    border-radius: 50%;
    font-size: 33px;
    padding: 5px;

    /* we need both visibility and opacity
     * if we don't have visibility, a pointer will still show even opacity is set to 0
     * if we don't have opacity, the transition animation doesn't work
    */
    visibility: hidden;
    transition: opacity 0.5s ease;
}

i#menu.active {
    text-shadow: 0px 0px 5px rgb(216, 213, 213), 0px 0px 5px rgb(216, 213, 213);
}

@media (max-width: 770px) {
    nav ul {
        margin: 13px;
    }
}

i#home {
    color: rgb(216, 213, 213);
}
i#home:hover, i#home.active {
    text-shadow: 0px 0px 5px rgb(216, 213, 213), 0px 0px 5px rgb(216, 213, 213);
}

i#person {
    color: rgb(245, 143, 145);
}
i#person:hover, i#person.active {
    text-shadow: 0px 0px 5px rgb(245, 143, 145), 0px 0px 3px rgb(245, 143, 145);
}

i#school {
    color: rgb(42, 89, 177);
}
i#school:hover, i#school.active {
    text-shadow: 0px 0px 5px rgb(42, 89, 177), 0px 0px 3px rgb(42, 89, 177);
}

i#business_center {
    color: rgb(255, 182, 72);
}
i#business_center:hover, i#business_center.active {
    text-shadow: 0px 0px 5px rgb(255, 182, 72), 0px 0px 3px rgb(255, 182, 72);
}

i#laptop_mac {
    color: rgb(137, 65, 196);
}
i#laptop_mac:hover, i#laptop_mac.active {
    text-shadow: 0px 0px 5px rgb(137, 65, 196), 0px 0px 3px rgb(137, 65, 196);
}

i#favorite {
    color: rgb(9, 141, 158);
}
i#favorite:hover, i#favorite.active {
    text-shadow: 0px 0px 5px rgb(9, 141, 158), 0px 0px 3px rgb(9, 141, 158);
}

i#receipt_long {
    color: rgb(253, 171, 132);
}
i#receipt_long:hover, i#receipt_long.active {
    text-shadow: 0px 0px 5px rgb(253, 171, 132), 0px 0px 3px rgb(253, 171, 132);
}

i#memory {
    color: rgb(202, 202, 14);
}
i#memory:hover, i#memory.active {
    text-shadow: 0px 0px 5px rgb(202, 202, 14), 0px 0px 3px rgb(202, 202, 14);
}