header{background-color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.1);position:sticky;top:0;z-index:1000;width:100%}.navbar{display:flex;justify-content:space-around;align-items:center;height:80px}.nav-items{list-style:none;display:flex;&.open{flex-direction:column;position:absolute;top:70px;left:0;width:100%;min-height:20vh;background-color:var(--secondary-color);align-items:center;justify-content:center;.nav-item a{color:white;margin-bottom:80px}}}.nav-item{margin-left:30px}.nav-item a{text-decoration:none;color:var(--dark-text-color);font-size:1.2rem;font-family:var(--font-ui);font-weight:750;position:relative;padding-bottom:5px}.nav-item a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--primary-color);transition:width .3s;&.open{background-color:white}}.nav-item a:hover:after{width:100%}.primary-navigation{list-style-type:none;padding:2rem 0 0;margin:0 auto;flex-direction:column;align-items:center;text-align:center}.primary-navigation a{​​text-decoration:none}.btn-navbar button{margin-right:10px}.btn-mobile,.mobile-menu{display:none;cursor:pointer}.btn-mobile{background-color:transparent;font-size:24px;color:var(--primary-color);border:none}@media screen and (max-width:768px){.btn-mobile{display:flex}.nav-items{display:none;&.open{display:flex}}.btn-navbar{display:none;&.open{display:flex;position:absolute;top:200px;left:0;width:100%;min-height:20vh;background-color:var(--secondary-color);align-items:center;justify-content:center;button{background-color:white;color:var(--secondary-color);align-items:center;margin-left:30px}box-shadow:0 4px 6px -2px rgba(0,0,0,.25)}}}