@import url('/themes/root.css');

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(16px, 5vw, 64px);
    border-bottom: 1px solid var(--box-stroke-color);
    background: var(--box-background-color);
}

.navbar-brand {
    color: var(--main-text-color);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.navbar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.navbar-links a {
    color: var(--main-text-color);
    text-decoration: none;
}

.navbar-links a:hover {
    color: var(--link-text-color);
}

@media (max-width: 520px) {
    .navbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

body {
  font-family: var(--font-family);
  color: var(--main-text-color);
  min-height: 100vh;
  overflow: auto !important;
  background: var(--main-background-color);
}

/* NavBar */
.top-navbar {
  background-color: var(--box-background-color);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
  border-bottom: 1px solid var(--box-stroke-color);
}