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