:root{--lblack:#424242;--lgreen:#a4cf9b;--lblue:#61dafb;--grey:#dadada;--white:#fff;--dgreen:#5a874f;--dblack:#222222}.header-container{display:flex;justify-content:center}.header{position:fixed;top:0;left:0;width:100vw;display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#282c34;color:#fff;font-size:1.2rem;letter-spacing:.1rem;z-index:100}.logo{font-weight:700;text-decoration:none;color:var(--lgreen);padding-left:1.5rem}.header-links{transition:color .5s ease-in-out}.logo-white{color:var(--white)}.logo:hover{color:var(--lblue)}.header-links a{margin-right:1rem;margin-bottom:.5rem;text-decoration:none;color:var(--white);transition:color .5s ease-in-out;padding-right:2rem}.header-links a:hover span{color:var(--lblue)}.about span,.arrow,.projects span{color:var(--lgreen)}.arrow{display:inline-block;transition:transform .3s ease;transform-origin:center;padding-bottom:1px;padding-right:2px}.about:hover .arrow,.logo:hover .arrow,.projects:hover .arrow{transform:rotate(90deg);color:var(--lblue)}.mobile{display:none}.mobile,.mobile-links{justify-content:center;align-items:center;flex-direction:column}.mobile-links{box-shadow:var(--lblack) 0 1px 5px;animation:fadeInUp .6s ease-in-out;margin-top:57px;background-color:var(--lblack);padding:10px 30px;width:100vw;display:flex;position:fixed}.mobile-item{margin:15px 0 10px}.divider{width:100vw;padding:1px 0;background-color:var(--dblack);margin:2px 0}@keyframes fadeInUp{0%{opacity:0}to{opacity:1}}@media only screen and (max-width:768px){.header{padding:1rem;font-size:1rem;letter-spacing:.05rem;justify-content:space-between}.header-links{display:none}.mobile{display:flex}}