#header {
  display: flex;
  flex-direction: row;
  border-radius: 0.5rem;
  border: 1px solid var(--accent);
  padding: 1rem;
  background-color: var(--bg-accent);
  justify-content: space-between;
  align-items: center;
}

.desktop #header {
  display: none;
}

#header-desktop {
  position: fixed;
  z-index: 5;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  align-items: center;
  user-select: none;
}

#header-desktop-left-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  pointer-events: none;
  gap: 1.5rem;
  padding-left: 1.5rem;
}

#header-desktop-title {
  font-family: var(--header-font);
  color: var(--tertiary);
  user-select: none;
  pointer-events: none;
}

#header-desktop-separator {
  width: 1px;
  height: 1rem;
  background-color: var(--accent);
}

#header-desktop-buttons {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.header-desktop-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 3rem;
}

.header-desktop-button:hover {
  background-color: var(--accent);
}

.header-desktop-button:active {
  background-color: var(--secondary);
}

.header-desktop-button.close:hover {
  background-color: var(--primary);
}

.header-desktop-button.close:hover img {
  filter: brightness(100);
}

.header-desktop-button.close:active {
  background-color: var(--text);
}
