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}@media (max-width: 1024px){nav#side-nav{position:fixed;bottom:0;left:0;width:100%;height:60px;flex-direction:row;justify-content:center;align-items:center;background-color:#f5f5f6;z-index:9999;box-shadow:0 -2px 10px #0000000d}nav#side-nav a#navLogo{display:none}nav#side-nav div.container{flex-direction:row;justify-content:space-around;align-items:center;row-gap:0;-moz-column-gap:0;column-gap:0;height:100%}nav#side-nav div.container a.box{height:50px;width:auto;padding:0 20px;border-radius:15px;row-gap:4px}nav#side-nav div.container a.box div.icon{height:30px;width:30px}nav#side-nav div.container a.box div.icon svg{height:12px}nav#side-nav div.container a.box span{font-size:.6em}}