/* Override Hyde theme with black and white styling */

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray: #777777;
  --color-gray-dark: #333333;
}

/* Body */
body {
  color: var(--color-gray-dark);
  background-color: var(--color-white);
}

/* Links */
a {
  color: var(--color-black);
  text-decoration: underline;
}

a:hover {
  color: var(--color-gray);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-black);
  font-weight: 600;
}

/* Sidebar */
.sidebar {
  background-color: var(--color-black);
  color: var(--color-white);
}

.sidebar a {
  color: var(--color-white);
  text-decoration: none;
}

.sidebar a:hover {
  color: var(--color-gray);
}

.sidebar-title {
  color: var(--color-white);
}

/* Posts */
.post {
  border-bottom: 1px solid var(--color-gray-light);
}

.post-title {
  color: var(--color-black);
}

.post-date {
  color: var(--color-gray);
}

/* Code blocks */
pre, code {
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark);
}

/* Blockquotes */
blockquote {
  border-left-color: var(--color-black);
  color: var(--color-gray);
}

/* Tables */
table {
  border-color: var(--color-gray-light);
}

td, th {
  border-color: var(--color-gray-light);
}

/* Footer */
.footer {
  color: var(--color-gray);
}

/* Buttons */
.btn {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}

.btn:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Navigation */
.nav-link {
  color: var(--color-gray);
}

.nav-link:hover {
  color: var(--color-black);
}

/* Remove any accent colors */
.highlight, .mark {
  background-color: var(--color-gray-light);
  color: var(--color-black);
}

/* Selection */
::selection {
  background-color: var(--color-black);
  color: var(--color-white);
}