.navbar {
  position: fixed;

  top: 20px;
  right: 20px;

  z-index: 1000;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  border-radius: 20px;

  background-color: rgba(255, 255, 255, 0.8);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 0, 0, 0.1);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.navbar a {
  display: block;

  padding: 8px 14px;

  border-radius: 14px;

  color: #222222;

  text-decoration: none;

  font-size: 14px;
  font-weight: bold;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.navbar a:hover {
  background-color: #222222;

  color: #ffffff;
}