body{margin:0}header{background-color:#000;grid-template-columns:15% 70% 15%;place-items:center;width:100%;height:96px;display:grid}h2{color:#fff;text-align:center;text-wrap:nowrap}:root{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.navbar-container{z-index:1;background-color:#000;justify-content:center;align-items:center;gap:8px;width:50%;height:40px;margin:auto;display:flex;position:relative}.navbar-link{text-wrap:nowrap;color:#fff;justify-content:center;align-items:center;width:100%;height:100%;text-decoration:none;display:flex}.navbar-hover,.navbar-active{z-index:-1;border-radius:50px;height:100%;transition:left .5s;position:absolute}.navbar-hover{background-color:none;box-sizing:border-box;border:2px solid #a9a9a9}.navbar-active{background-color:gray}.toggle-container{z-index:2;background-color:#fff;border:none;border-radius:25px;width:100px;height:50px;padding:0;position:relative}.toggle-circle{background:linear-gradient(90deg,#ff0,orange);border-radius:50px;width:calc(50% + 10px);height:calc(100% + 10px);transition:left .25s ease-in-out;position:relative;transform:translate(-5px)translateY(-5px)}