@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #151515;
    --text: #f7f7f7;
    --link: #E45A82;
    --link-hover: #FDBCB4;
    --accent-1: #252525;
    --accent-2: #434343;
    --accent-3: #53565d;
	--accent-4: #0095B6;
    --highlight: #53565d;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #151515;
    --text: #f7f7f7;
    --link: #E45A82;
    --link-hover: #FDBCB4;
    --accent-1: #252525;
    --accent-2: #434343;
    --accent-3: #53565d;
	--accent-4: #0095B6;
    --highlight: #53565d;
  }

.site-title {
    font-size: 2.30rem;
    font-weight: var(--font-weight-bold);
}

@media (prefers-color-scheme: dark) {
    .site-nav {
        align-items: center;
        display: flex;
        font-size: 1.4rem;
        justify-content: space-between;
        margin: 0 auto;
        max-width: var(--header-width);
        padding: 0.75rem 2rem 0.5rem 2rem;
    }
}

.u-photo {
    border-radius: var(--border-radius);
    display: inline;
    height: auto;
    margin-right: 8px;
    margin-top: -3px;
    vertical-align: middle;
    width: 3.6rem;
}

footer {
    color: var(--accent-3);
    font-size: 2.0rem;
    margin: 0 auto 2rem;
    max-width: var(--site-width);
    padding: 0.5rem 2rem 3rem;
    text-align: center;
}

article img, article video {
    border-radius: var(--border-radius);
    display: block;
    height: auto;
    margin: 3rem auto;
    width: 60%;
    max-width: 100%;
}

blockquote {
    border-left: 6px solid var(--accent-2);
    color: var(--accent-4);
    font-style: italic;
    margin: 4rem 0;
    padding: 0 2rem;
}

code {
    background: #252525;
    border-radius: var(--border-radius);
    color: #c7254e;
    padding: 2px 4px;
    text-shadow: 0 0px 0px #c7254e;
    white-space: nowrap;
}