html[data-theme='dark'] {
  --black: rgba(255, 255, 255, 0.95);
  --white: #1c1c1e;
  --transparent-white: rgba(28, 28, 30, 0.9);
  --red: #ff8a80;
  --light-black: rgba(255, 255, 255, 0.85);
  --grey: #8e8e93;
  --light-grey: #636366;
  --pale-grey: #2c2c2e;
}

html[data-theme='dark'] body,
html[data-theme='dark'] :root {
    background-color: var(--white);
    color: var(--light-black);
}

[data-theme='dark'] a {
    color: var(--red);
}

[data-theme='dark'] a:hover, [data-theme='dark'] a:focus {
    color: #ffb3ad;
}

[data-theme='dark'] a:focus {
    background-color: var(--red);
    color: var(--white);
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6 {
    color: var(--black);
}

[data-theme='dark'] .h-entry.ba {
    background-color: #2c2c2e;
    border-color: #48484a;
}

[data-theme='dark'] .tag-link {
    background-color: #3a3a3c;
    color: #f2f2f7;
}

[data-theme='dark'] .tag-link:hover {
    background-color: #48484a;
}

[data-theme='dark'] .hover-red.black:hover {
    color: var(--red);
}

[data-theme='dark'] blockquote {
    border-left-color: var(--red);
    color: var(--grey);
}

[data-theme='dark'] img,
[data-theme='dark'] video,
[data-theme='dark'] .u-photo {
    filter: brightness(.85) contrast(1.1);
}

[data-theme='dark'] .br-circle.u-photo {
    filter: none;
}

.theme-toggle-header {
    background: none;
    border: 1px solid var(--light-grey);
    color: var(--light-black);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    padding: 0;
    transition: background-color 0.2s ease;
}

.theme-toggle-header:hover {
    background-color: var(--pale-grey);
}

.theme-toggle-header svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

[data-theme='dark'] .theme-toggle-header {
    border-color: var(--grey);
    color: var(--black);
}

[data-theme='dark'] .theme-toggle-header:hover {
    background-color: #3a3a3c;
}