@import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);
:root{--primaryColor: #fff;--navColor1: #21292c;--navColor2: #aa3e39;--navColor3: #aa6e39;--navColor4: #236267;--navColor5: #2c8437}html{box-sizing:border-box}body{margin:0;background:#000;font-family:Nunito,sans-serif}.overlay{position:fixed;z-index:9;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);transform:translateX(-100vw)}.overlay-slide-right{transition:all .4s ease-in-out;transform:translateX(0)}.overlay-slide-left{transition:all .8s ease-in-out;transform:translateX(-100vw)}nav,nav ul{height:100vh;margin:0;padding:0}nav ul{display:flex;flex-direction:column;justify-content:stretch;list-style:none}nav ul li{height:20%;overflow:hidden}nav li a{position:relative;top:45%;color:#fff;text-transform:uppercase;letter-spacing:4px;text-decoration:none;display:block;text-align:center}nav li a:hover{transform:scale(1.2)}nav li a::before{content:"";width:25vw;height:3px;background-color:#fff;position:absolute;top:47.5%;left:0;opacity:0}nav li a:hover::before{opacity:1}nav li:nth-of-type(1){background-color:var(--navColor1)}nav li:nth-of-type(2){background-color:var(--navColor2)}nav li:nth-of-type(3){background-color:var(--navColor3)}nav li:nth-of-type(4){background-color:var(--navColor4)}nav li:nth-of-type(5){background-color:var(--navColor5)}.slide-in-1{animation:slide-in .4s linear .2s both}.slide-in-2{animation:slide-in .4s linear .4s both}.slide-in-3{animation:slide-in .4s linear .6s both}.slide-in-4{animation:slide-in .4s linear .8s both}.slide-in-5{animation:slide-in .4s linear 1s both}@keyframes slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}.slide-out-1{animation:slide-out .3s linear .5s both}.slide-out-2{animation:slide-out .3s linear .4s both}.slide-out-3{animation:slide-out .3s linear .3s both}.slide-out-4{animation:slide-out .3s linear .2s both}.slide-out-5{animation:slide-out .3s linear .1s both}@keyframes slide-out{from{transform:translateX(0)}to{transform:translateX(-100%)}}.menu-bars{position:fixed;top:1rem;right:2rem;z-index:10;display:inline;cursor:pointer}.bar1,.bar2,.bar3{width:35px;height:2px;background-color:#fff;margin:8px 0;transition:.4s}.change .bar1{transform:rotate(-45deg) translate(-7px, 8px)}.change .bar2{opacity:0}.change .bar3{transform:rotate(45deg) translate(-6px, -8px)}section{width:100%;height:100vh;position:relative;display:flex;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:2px;color:var(--primaryColor)}section#home{background-image:url("https://images.unsplash.com/photo-1581453904507-626ddb717f14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80");background-size:cover;background-position:center center}section#home a{position:absolute;z-index:2;top:1.5rem;left:1.5rem;text-decoration:none;font-size:.8rem;padding-bottom:5px;color:var(--primaryColor);border-bottom:1px solid var(--primaryColor)}section#about{background-color:var(--navColor2)}section#skills{background-color:var(--navColor3)}section#projects{background-color:var(--navColor4)}section#contact{background-color:var(--navColor5)}@media(max-width: 600px){section#home a{top:1rem;left:1rem}.menu-bars{top:.5rem;right:1rem}}