/* 
* {
  font-family: "Ubuntu", sans-serif;
}
*/

:root {
  --text-color: rgb(254, 251, 234);
  --nav-bg: rgb(0, 168, 204);
  --nav-bg-hover: var(--text-color);
}

[data-theme="light"] {
  --text-color: rgb(37, 37, 37);
  --nav-bg: rgb(217, 226, 236);
  --nav-bg-hover: rgb(28, 62, 112);
}

* {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.nav {
  margin: 0;
  padding: 0;
  height: 48px;
  overflow: hidden;
  background-color: var(--nav-bg);
  display: flex;
  align-items: stretch;
  transition: all 0.3s ease;
}

.nav a {
  display: flex;
  align-items: center;
  color: var(--text-color);
  text-align: center;
  padding: 0 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.theme-toggle {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.theme-toggle button {
  background: none;
  border: none;
  height: 100%;
  padding: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-toggle button:hover {
  background-color: var(--nav-bg-hover);
}

.theme-toggle button svg {
  display: block;
  height: 24px;
  width: 24px;
  fill: var(--text-color);
  transition: fill 0.3s ease, transform 0.3s ease;
}

.theme-toggle button:hover svg {
  transform: rotate(15deg);
  fill: var(--nav-bg);
}

.nav a:hover, .theme-toggle button:hover {
  background-color: var(--nav-bg-hover);
  color: var(--nav-bg);
}