@import url("/assets/css/fonts/merriweather.css");

:root {
  --font-family: "Merriweather", serif;
  --background-color-body: #f5f2eb;
  --background-color-dark: #333;
  --text-color-body: #3b3a38;
  --text-color-headings: #191818;
  --text-color-discreet: #888;
  --text-color-dark-bg: #ccc;
}

body {
  font-family: var(--font-family);
  background-color: var(--background-color-body);
  color: var(--text-color-body);
}

h1, h2, h3, h4 {
  color: var(--text-color-headings);
}

a {
  color: #023b77;
}

a:visited {
  color: #3b0277;
}

button {
  font-family: var(--font-family);
}

code {
  background-color: #e8e3da;
  color: #027739;
}

pre {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark-bg);
}

pre code {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark-bg);
}

.highlight pre,
.highlight code {
  background-color: var(--background-color-body);
  border: 2px solid #e8e3da;
  color: var(--text-color-body);
}

dl dt {
  color: var(--text-color-discreet);
}

hr {
  border-color: #e8e3da;
}

main header .draft-label {
  color: #770202;
  border-color: #770202;
}

main header .meta .date {
  color: var(--text-color-discreet);
}

main header .meta .name a {
  color: var(--text-color-body);
}

main.profile-page header .nip05 {
  color: var(--text-color-discreet);
}

main.profile-page .pubkey {
  color: var(--text-color-discreet);
}

.nip05 .verified {
  background-color: #e8e3da;
  color: #027739;
}

.nip05 .not-verified {
  background-color: #e8e3da;
  color: #770202;
}

/* Dropdown menu */

.dropdown {
  --background-color: #fff;
  --background-color-highlight: #f1f1f1;
}

.dropdown-button {
  background-color: var(--background-color-body);
  color: var(--text-color-body);
  border-color: var(--text-color-dark-bg);
}

.dropdown-content {
  background-color: var(--background-color);
}

.dropdown-content a {
  color: var(--text-color-body) !important;
}

.dropdown-content a:hover {
  background-color: var(--background-color-highlight);
}

.dropdown-content h4.title {
  color: var(--text-color-discreet);
  border-color: var(--background-color-highlight);
}

.dropdown:hover .dropdown-button {
  background-color: var(--background-color);
  border-color: var(--background-color);
}