style.css

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

body {
    font-family: 'Roboto Mono', monospace;
    display: flex;
    align-items:center;
    margin:0;
    height: 100vh;
    
}

.main{
    display: flex;
    align-items: center;
    padding: 70px 50px 50px 50px;
    width:100%;
    height: 100%;
    background-color:#d6ae7b;
    margin:0;
}

nav {
    display:flex;
    align-items: flex-start;
    justify-content:center;
    flex-direction: column;
    background-color: white;
    height: 100%;
    
}

nav > li {
    list-style-type: none;
    margin: 15px;
}
nav>h3{
    margin: 25px;
    
}


.move:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%; }
  .move:hover:after, .move:focus:after {
    width: 3px;
    height: 100%; }
  .move:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%; }
  .move:hover:before, .move:focus:before {
    width: 3px;
    height: 100%; }
  .move:after {
    top: 0;
    right: 50%; }
  .move:hover:after {
    right: 0; }
  .move:before {
    top: 0;
    left: 50%; }
  .move:hover:before {
    left: 0; }
    .element {
        display: inline;
        position: relative;
        z-index: 2;
        text-decoration: none;
        box-sizing: border-box;
        user-select: none; 
        padding: 10px;
        white-space: nowrap;
        transition: color 1s ease;
    }
    
    .element:hover,
    .element:focus {
        outline: 0;
        color: #b6956a;
        cursor: pointer;
    }
    
    .element:before {
        transition: all 1s ease; 
    }
    
    .element:after {
        transition: all 1s ease; 
    }
    
    .element:hover:after,
    .element:focus:after {
        outline: 0;
        background-color:#d6ae7b;
        transition:  all 1s ease; /* add delay if wanted */
    }
    
    .element:hover:before,
    .element:focus:before {
        outline: 0;
        background-color: #d6ae7b;
         transition:  all 1s ease; 
    }