:root {
  --color-bright: #79c2e5;
  --color-dark: #071014;

  --color-background: var(--color-bright);
  --color-foreground: var(--color-dark);
}

body.night-mode {
  --color-background: var(--color-dark);
  --color-foreground: var(--color-bright);
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
}

/* Header */

.site-header .logo {
  background: var(--color-foreground);
  color: var(--color-background);
}

.site-header nav a {
  color: var(--color-foreground);
}

.site-header nav a:hover,
.site-header nav a.active {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* Buttons */

.theme-button {
  border: 1px solid var(--color-foreground);
  background: transparent;
  color: var(--color-foreground);

  width: 36px;
  height: 36px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 17px;

  cursor: pointer;
}

.theme-button:hover {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* Dark panels */

.contact-panel {
  background: var(--color-foreground);
  color: var(--color-background);
}

.contact-panel .section-label {
  color: var(--color-background);
}

.contact-panel h2,
.contact-panel a {
  color: var(--color-background);
}

/* Forms */

.login-form input,
#project-form input,
#project-form textarea,
.edit-project-form input,
.edit-project-form textarea,
.music-editor-item input {
  border-color: var(--color-foreground);
  color: var(--color-foreground);
}

.login-form input:focus,
#project-form input:focus,
#project-form textarea:focus,
.edit-project-form input:focus,
.edit-project-form textarea:focus,
.music-editor-item input:focus {
  background: var(--color-background);
}

/* Site buttons */

.login-form button,
#project-form button,
.edit-project-form button,
.music-editor-item button,
.music-manage-button {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* Borders */

.about-intro,
.interests,
.music {
  border-color: var(--color-foreground);
}

.music-editor {
  border-color: var(--color-foreground);
}

body,
.site-header,
.site-header .logo,
.site-header nav a,
.theme-button,
.contact-panel,
.music-manage-button,
.music-editor-item button,
.login-form button,
#project-form button {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.about-intro,
.interests,
.music,
.music-editor,
.music-editor-item,
.interest-tags span {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}