.navbar {
   position: fixed;
   top: 0;
   height: var(--navbarh);
   box-sizing: border-box;
   z-index: 2;
   color: white;
   display: flex;
   width: 100%;
   opacity: 1;
   padding: 0 var(--hmargin);
   transition: background 0.3s linear, backdrop-filter 0.3s linear, opacity 0.3s ease-out;
}

.navbar_tos {
   background: #7b7b7b;
   position: relative;
}

.navbar_hidden {
   transition: opacity 0.3s ease-in;
   opacity: 0;
}

.navbar_scrolled {
   /* background: rgba(132, 132, 132, 0.81); */
   background: rgba(92, 92, 92, 0.808);
   backdrop-filter: blur(10px);
}

.navbar-inner {
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.navbar-logo,
.navbar-logo_fake,
.navbar-links {
   display: flex;
   align-items: center;
}

.navbar-logo {
   width: 300px;
   gap: 10px;
}

.navbar-logo_fake {
   color: transparent;
}

.navbar-logo-icon {
   width: 70px;
   aspect-ratio: 1 / 1;
}

.navbar-logo-text {
   font-size: 32px;
}

.navbar-links {
   padding: 0;
   gap: 30px;
   font-size: 24px;
   list-style-type: none;
}

.navbar-links > * {
   cursor: pointer;
}

.navbar-menuButton {
   display: none;
   aspect-ratio: 1 / 1;
   width: 60px;
   font-size: 32px;
   border: none;
   background: var(--dropdown-menu-bg);
   color: white;
   cursor: pointer;
}

@media screen and (max-width: 1400px) {

   .navbar-logo {
      width: unset;
   }

   .navbar-logo_fake {
      display: none;
   }

   .navbar-links {
      display: none;
   }

   .navbar-links_show {
      display: flex;
   }

   .navbar-menuButton {
      display: block;
   }
}

@media screen and (max-width: 600px) {
   .navbar {
      padding: 0 10px;
   }

   .navbar-logo-text{
      font-size: 26px;
   }
}