:root{--color-1:#4169e1;--color-2:#4169e1;--color-3:#4169e1;--color-4:#4169e1}*{margin:0;padding:0;text-decoration:none;scroll-behavior:smooth;box-sizing:border-box;list-style:none;font-style:normal}nav{top:0;left:0;z-index:50}nav a{transition:all .3s}nav a.active,nav a:hover{background-color:hsla(0,0%,100%,.05)}nav a.active{position:relative;color:#4169e1;border-bottom:3px solid #4169e1}nav a:first-child.active{color:var(--color-1)}nav a:nth-child(2).active{color:var(--color-2)}nav a:nth-child(3).active{color:var(--color-3)}nav a:nth-child(4).active{color:var(--color-4)}nav a.active:after{width:4px;height:100%;background-color:#daa520;position:absolute;top:0;margin-right:8px}nav a:first-child.active:after{background-color:var(--color-1)}nav a:nth-child(2).active:after{background-color:var(--color-2)}nav a:nth-child(3).active:after{background-color:var(--color-3)}nav a:nth-child(4).active:after{background-color:var(--color-4)}