div.nav-bar{background:#181818;width:60px;height:100%;position:fixed;top:0;z-index:3;min-height:500px}div.nav-bar nav{display:block;text-align:center;position:absolute;height:210px;top:50%;margin-top:-120px;width:100%}div.nav-bar nav a{font-size:22px;color:#4d4d4e;display:block;line-height:51px;height:51px;position:relative;text-decoration:none}div.nav-bar nav a i{transition:all .3s ease-out}div.nav-bar nav a:hover{color:gold}div.nav-bar nav a:hover svg{opacity:0}div.nav-bar nav a:hover:after{opacity:1}div.nav-bar nav a:after{content:"";font-size:9px;letter-spacing:2px;position:absolute;bottom:0;display:block;width:100%;text-align:center;opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}div.nav-bar nav a:first-child:after{content:"HOME"}div.nav-bar nav a.active svg{color:gold}div.nav-bar nav a.portfolio-link:after{content:"PORT."}div.nav-bar nav a.qualifications-link:after{content:"QUAL."}div.nav-bar nav a.service-link:after{content:"SERV."}div.nav-bar nav a.keys-link:after{content:"KEYS"}ul.navigation{position:absolute;bottom:20px;width:100%;display:block;padding:0;list-style:none;text-align:center;margin:0}ul.navigation li a{padding:7px 0;display:block;font-size:15px;line-height:16px;color:#4d4d4e}ul.navigation li a svg.github g{fill:gold}ul.navigation li:hover .anchor-icon{color:gold}html{background:#181818;color:#ececec;font-family:Ubuntu,sans-serif}a:active{color:#ff4040;text-decoration:none;font-weight:400}a:link{color:#add8e6}a:hover{color:#fff}a:visited{color:#6d4b8d}a.skip-link{position:fixed;top:-40px;left:0;background-color:#fff;color:#000;padding:0;z-index:100}a.skip-link:focus,a.skip-link:hover{top:0}span.visually-hidden{display:none;visibility:hidden}div.page{display:flex}div.content{margin-left:60px;width:calc(100% - 60px)}