:root {
  --bg-nav-item-hover: hsl(0, 0%, 65%);
  --bg-nav-item: hsl(0, 0%, 75%);
  --bg-nav: hsl(0, 0%, 85%);
  --bg: hsl(0, 0%, 95%);

  --fg: hsl(0, 0%, 5%);
  --fg-hover: hsl(0, 0%, 0%);
  --fg-dull: hsl(0, 0%, 25%);

  --shadow: hsl(0, 0%, 50%);

  --error: hsl(0, 100%, 50%);
}

[data-theme="dark"] {
  --bg-nav-item-hover: hsl(0, 0%, 35%);
  --bg-nav-item: hsl(0, 0%, 25%);
  --bg-nav: hsl(0, 0%, 15%);
  --bg: hsl(0, 0%, 5%);

  --fg: hsl(0, 0%, 95%);
  --fg-hover: hsl(0, 0%, 100%);
  --fg-dull: hsl(0, 0%, 75%);

  --shadow: hsl(0, 0%, 50%);

  --error: hsl(0, 100%, 65%);
}

[data-theme="blue"] {
  --bg-nav-item-hover: hsl(210, 50%, 60%);
  --bg-nav-item: hsl(210, 50%, 70%);
  --bg-nav: hsl(210, 50%, 80%);
  --bg: hsl(210, 50%, 90%);

  --fg: hsl(210, 90%, 20%);
  --fg-hover: hsl(210, 90%, 10%);
  --fg-dull: hsl(219, 90%, 75%);

  --shadow: hsl(210, 50%, 40%);

  --error: hsl(0, 80%, 45%);
}

[data-theme="solarized"] {
  --bg-nav-item-hover: hsl(45, 100%, 40%);
  --bg-nav-item: hsl(45, 100%, 50%);
  --bg-nav: hsl(45, 90%, 60%);
  --bg: hsl(45, 90%, 70%);

  --fg: hsl(210, 10%, 20%);
  --fg-hover: hsl(210, 10%, 10%);
  --fg-dull: hsl(210, 10%, 75%);

  --shadow: hsl(45, 60%, 30%);

  --error: hsl(10, 80%, 40%);
}

.layout-navbar-top {
  position: sticky;
  top: 0;
  background: var(--bg-nav);
  z-index: 5;
  width: fit-content;
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px var(--shadow);
}

.layout-navbar-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.layout-navbar-center-item {
  margin: 0px 5px;
  padding: 0px 10px;
  border-radius: 5px;
  background: var(--bg-nav-item);
}

.layout-navbar-center-item a,
.layout-btn-theme-switcher {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: var(--fg);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.layout-navbar-center-item:hover {
  color: var(--fg-hover);
  background: var(--bg-nav-item-hover);
}

.layout-theme-menu {
  padding-top: 10px;
  display: none;
  position: absolute;
}

.layout-theme-menu button {
  width: 50px;
  display: block;
}

body {
  background: var(--bg);
  padding: 0;
  margin: 0;
}