nav#side-nav{height:100vh;width:var(--nav-width);display:flex;flex-direction:column;justify-content:center;align-items:center}nav#side-nav a#navLogo{display:flex;position:absolute;top:20px}nav#side-nav img#logo{height:75px;display:flex}nav#side-nav div.container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;row-gap:25px}nav#side-nav div.container a.box{height:100px;width:75%;background-color:#fff;border-radius:25px;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:10px;cursor:pointer;transition:.2s all}nav#side-nav div.container a.box:hover{box-shadow:0 0 20px #eee}nav#side-nav div.container a.box:active{transform:scale(.9)}nav#side-nav div.container a.box span{font-size:.8em;font-family:Bahnschrift;color:#8a88aa}nav#side-nav div.container a.box div.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background-color:#e5fed5;height:50px;width:50px}nav#side-nav div.container a.box div.icon svg{height:15px}nav#side-nav div.container a.yellow div.icon{background-color:#fff9d4}nav#side-nav div.container a.purple div.icon{background-color:#e9d4ff}nav#side-nav div.container a.selected{background-color:#9dec65;box-shadow:0 0 5px #8dec65}nav#side-nav div.container a.selected div.icon{background-color:#fff}nav#side-nav div.container a.selected div.icon svg path{fill:#9dec65}nav#side-nav div.container a.selected span{color:#fff}nav#side-nav div.container a.selected.yellow{background-color:#e8d56b;box-shadow:0 0 5px #e8d56b}nav#side-nav div.container a.selected.yellow div.icon svg path{fill:#e8d56b}