:root {
    --sans-serif: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;;
    --background-color: #ffffff;
    --heading-color: #6f4c1a;
    --text-color: #323232;
    --text-color-secondary: rgb(109, 109, 109);   
    --code-color: #950386;
    --link-color: rgb(9, 89, 130);
    --link-visited-color: rgb(113, 25, 67);
    --nav-background-color: rgb(240, 240, 240);
    --blockquote-background-color: rgb(240, 240, 240);
}

@media (prefers-color-scheme: dark) { /* Dark theme inspired by ef-duo-dark */
    :root {
	--background-color: rgb(22, 14, 12);
	--heading-color: #c09156;
	--text-color: #d2b39d;
	--text-color-secondary: #836767;
	--code-color: rgb(223, 131, 117);
	--link-color: #a1c7fa;
	--link-visited-color: #ab82ad;
	--nav-background-color: rgb(68, 45, 36);
	--blockquote-background-color:  #25211f;
    }
}

body {
    max-width: 970px;
    color: var(--text-color);
    padding: 1rem;
    font-size: 1.125rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    font-family: var(--sans-serif);
    background-color: var(--background-color);
}

#sidebar { min-width: 22ch; }
.masthead { line-height: 1.2; }

.masthead__title {
    margin-top: 0;
    margin-bottom: 0;
}

.masthead__tagline { margin-top: 0; }

main {
    width: 100%;
    margin-block: 4rem;
    background-color: var(--background-color);
}

h1, h2, h3 { font-family: var(--sans-serif); }

h1 { /* The title of each page / article */
    margin-top: 0;
    font-size: 1.75rem;
}

h2 {
    color: var(--heading-color);
    margin-top: 2rem;
    margin-bottom: 0rem;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    background-color: var(--link-color);
    color: white;
    transition: all linear 100ms;
}

a:visited { color: var(--link-visited-color); }

a:visited:hover {
    background-color: var(--link-visited-color);
    color: white;
}

@media (prefers-color-scheme: dark) {
    a:hover, a:visited:hover {
	color: var(--background-color);
    }
}

pre, code {
    color: var(--code-color);
    font-size: 90%;
}

blockquote {
    margin: 0;
    padding: 1px;
    border-left: 2px solid var(--nav-background-color);
    background-color: var(--blockquote-background-color);
    padding-inline: 1rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

figure {
    max-width: 100%;
    margin-inline: 0;
    & img {
	max-width: 100%;
    }
    & figcaption {
	text-align: center;
	color: var(--text-color-secondary);
	font-size: 90%;
    }
}

hr {
    color: var(--text-color);
    width: 12ch;
}

/* Pricing Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-family: var(--sans-serif);
}

thead th {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px dotted var(--text-color);
}

tbody td {
    padding: 1rem;
    vertical-align: top;
}

tbody tr:not(:last-child) td {
    border-bottom: 1px dotted var(--text-color);
}

table strong {
    font-family: var(--sans-serif);
    font-weight: 600;
}

nav {
    display: flex;
    flex-direction: column;
    font-family: var(--sans-serif);
    gap: 0.15rem;
    border-radius: 4px;
    & a, a:visited {
	padding: 0.5rem;
	color: var(--text-color);
	text-decoration: none;
	border-radius: 4px;
	transition: all linear 100ms;
    }
    & a:hover, a:visited:hover, a.active {
	background-color: var(--nav-background-color);
	color: var(--text-color);
    }
}

article {
    max-width: 60ch;
    hgroup {
	margin-bottom: 2rem;
    }
    .article__title {
	margin: 0;
    }
    .article__date {
	margin: 0;
	color: var(--text-color-secondary);
    }
}

.blog-archive {
    padding: 0;
    & li {
	margin-block: 1rem;
	list-style: none;
        color: var(--text-color-secondary);
    }
}

.link { /* Each link I share */
    margin-block: 1.5rem;
    & p:first-of-type { /* the link date */
	margin: 0;
	color: var(--text-color-secondary);
	font-size: 92%;
    }
    & p:nth-child(2) { /* the actual link */
	margin: 0;
    }
}
.reply-by-email {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

@media screen and (min-width: 720px) {
    body {
	flex-direction: row;
	align-items: flex-start;
	gap: 4rem;
	padding: 4rem;
    }
    #sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
    }
    main {
	margin-top: 0;
        padding-bottom: 8rem;
    }
}