style.css

:root{
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-weight: 400;
}

*{
   margin: 0;
   box-sizing: border-box;
}

.page{
   min-height: 100vh;
   background-color: #fff;
   color: #000;
}

.navbar{
   position: sticky;
   top: 0;
   background-color: #212529;
   color: #fff;
}

.navbar-inner{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height: 64px;
   max-width: 1440px;
   margin-inline: auto;
   padding-inline: 4%;
}

.navbar-toggler,
.navbar-toggler-check{
   display: none;
}

.navbar-menu{
   display: flex;
   flex-direction: row;
   gap: 1rem;
}

.navbar-link{
   display: block;
   padding: .5rem 1.25rem;
   text-align: center;
   text-decoration: none;
   color: rgba(255, 255, 255, .5);
   transition: color .15s;
}

.navbar-link:hover{
   color: #fff;
}

.navbar-link-active{
   color: #fff;
   pointer-events: none;
}

.logo{
   font-family: "Montserrat", sans-serif;
   font-size: 1.75rem;
   font-weight: 600;
   letter-spacing: 1px;
}

.logo-link{
   text-decoration: none;
   color: inherit;
}

.button{
   display: inline-block;
   padding: .5rem 1.75rem;
   text-align: center;
   text-decoration: none;
   background-color: #0d6efd;
   color: #fff;
   border-radius: 9999px;
   transition: filter .15s;
}

.button:hover{
   filter: brightness(.9);
}

@media only screen and (max-width:1024px) {
   .navbar-menu{
      gap: .5rem;
   }

   .button{
      padding-inline: 1.5rem;
   }
}

@media only screen and (max-width:768px) {
   :root{
      font-size: 15px;
   }
   
   .navbar-menu{
      position: absolute;
      top: -100vh;
      left: 0;
      width: 100%;
      flex-direction: column;
      padding: .5rem 4% 1rem;
      background-color: #212529;
      z-index: -1;
      transition: top .5s;
   }

   .navbar-toggler{
      display: block;
      font-size: 1.5rem;
   }

   .navbar-toggler-check:checked + .navbar-menu{
      top: 64px;
   }
}