.material-symbols-outlined {
   font-variation-settings:
      "FILL" 0,
      "wght" 400,
      "GRAD" 0,
      "opsz" 48;
}

.f-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 60px;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   padding: 0 22px;
   background-color: var(--background-nav);
   border-bottom: 1px solid var(--border);
   -webkit-backdrop-filter: var(--backdrop-filter);
   backdrop-filter: var(--backdrop-filter);
}

.f-nav #icon-container {
   display: flex;
   align-items: center;
}

.f-nav .icon {
   display: flex;
   align-items: center;
   height: 26px;
   color: var(--text-primary);
   text-decoration: none;
   transition: opacity 0.2s ease;
}

.f-nav .icon:hover {
   opacity: 0.75;
}

.f-nav .icon img {
   height: 26px;
   width: auto;
   padding: 0;
   display: block;
}

.f-nav-right {
   display: flex;
   align-items: center;
   gap: 22px;
}

.f-nav-right .navbar-link {
   display: inline-flex;
   align-items: center;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
   text-decoration: none;
   color: var(--text-primary);
   cursor: pointer;
   opacity: 0.85;
   transition: opacity 0.2s ease;
}

.f-nav-right .navbar-link:hover {
   opacity: 1;
}

.navbar-icon {
   font-size: 12px;
   margin-right: 6px;
   opacity: 0.9;
}

.navbar-link:hover > .settings-icon {
   animation: spin 0.5s;
   animation-timing-function: cubic-bezier(0, 1.04, 0.91, 0.99);
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

@media (max-width: 560px) {
   .f-nav {
      padding: 0 14px;
   }

   .f-nav-right {
      gap: 16px;
   }

   .f-nav-right .navbar-link an {
      display: none;
   }

   .navbar-icon {
      font-size: 15px;
   }
}