:root {
    --beige:       #F5EFE7;
    --dark_beige:  #D8C4B6;
    --light_blue:  #4F709C;
    --dark_blue:   #213555;
    --orange:      #EA906C;
    --dark_orange: #D38262;
}

body {
    font-family: Verdana;
    background-color: var(--beige);
    color: var(--dark_blue);
}

section {
    padding: 0 1.5em;
}

a {
    color: var(--dark_blue);
}

a:hover {
    text-decoration: underline;
}

/* Regular links in the articles */
article p a {
    color: var(--orange);
}

a:focus-visible {
    outline-color: var(--orange);
}

section.nav {
    background: var(--dark_blue);
    border-top: 5px solid var(--light_blue);
    border-bottom: 5px solid var(--light_blue);

    & nav ul {
	text-align: center;
    }

    & nav li {
	display: inline-block;
    }

    & nav a {
	display: block;
	position: relative;
	font-family: monospace;
	color: var(--beige);
	text-decoration: none;
    }

    & nav a:hover {
	text-decoration: underline;
    }

    @media (min-width: 0) {
	& nav a {
	    padding: 1em 1em 1em 1em;
	    font-size: 1em;
	}
    }

    @media (min-width: 768px) {
	& nav a {
	    padding: 1em 2em 1em 2em;
	    font-size: 1.4em;
	}
    }
}

section.logo {
    text-align: center;

    & h1 {
	/* Font */
	/* font-size: 3em; */
	line-height: 1em;
	font-family: "pokemon", monospace;
	font-weight: 1000;

	/* Design */
	padding: 50px 0 60px 0;

	color: var(--dark_blue);

	& #bit {
	    background: var(--dark_blue);
	    background: var(--orange);
	    color: var(--beige);
	    padding: 0 0 10px 13px;
	    text-shadow: 5px 0 0 rgba(0,0,0,0.1);
	    border-top: 1px solid rgba(0,0,0,0.03);
	    border-right: 1px solid rgba(0,0,0,0.03);
	    border-bottom: 1px solid rgba(0,0,0,0.03);
	    border-left: 5px solid rgba(0,0,0,0.1);
	}
    }
    & p {
	margin-top: -1em;
    }

    @media (min-width: 0) {
	margin-top: 2em;
	margin-bottom: 2em;

	& h1 {
	    font-size: 1.5em;
	}
    }
    @media (min-width: 768px) {
	margin-top: 4em;
	margin-bottom: 4em;

	& h1 {
	    font-size: 3em;
	}
    }
}

section.content {
    background-color: var(--beige);
    padding-bottom: 8em;

    & article {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	padding-bottom: 2em;
    }

    & h1 {
	font-family: monospace;
	font-size: 3em;
	line-height: 1.3em;
	margin-top: 0.75em;
	margin-bottom: 0.5em;

	& a {
	    text-decoration: none;
	}
	& a:hover {
	    text-decoration: underline;
	}
    }
}

p {
    line-height: 1.5em;
    margin-top: 0.5em;
}

code {
    font-family: "Courier", monospace;
    font-size: small;
}

/* inlined code */
p > code,
ul code {
    padding: 0.2em 0.5em;
    background: var(--dark_blue);
    color: var(--beige);
    border-radius: 2px;
    vertical-align: bottom;
}

pre {
    line-height: 1.3em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;

    & code {
	border-radius: 0.5em;
    }

    & code:before {
	float: right;
	display: block;
	color: var(--dark_blue);
	padding: 0.35em 0.8em 0.35em 0.8em;
	border-bottom-left-radius: 1em;
	background: var(--beige);
	margin-top: -1em;
	margin-right: -1em;
	border-bottom: 3px solid var(--light_blue);
	border-left: 3px solid var(--light_blue);
	text-align: center;
	font-weight: bold;
    }

    & code.language-go:before {
	content: "golang";
	width: 60px; /* purely based on the length of "golang" */
    }

    & code.language-python:before {
	content: "python";
	width: 60px; /* purely based on the length of "python" */
    }

    & code.language-lisp:before {
	content: "elisp";
	width: 60px; /* purely based on the length of "python" */
    }
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

small {
    font-size: smaller;
    line-height: 1.5em;
}

blockquote {
    quotes: none;
    padding: 0.5em 1.5em;
    border-left: 5px solid rgba(0,0,0,0.05);
    margin: 1.2em 0;
    color: gray;
    background: rgba(0,0,0,0.02);
    font-size: 90%;

    & p {
	margin-bottom: 0.5em;
    }
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(33,53,85,0.8), rgba(33,53,85,0.25), rgba(0, 0, 0, 0));
    margin-bottom: 1em;
}

article {
    & h2, h3, h4 {
	font-family: monospace;
	margin: 1em 0 0.5em 0;
	line-height: 1.5em;
    }

    & h2 {
	font-size: 2em;
    }
    & h3 {
	font-size: 1.7em;
    }
    & h4 {
	font-size: 1.5em;
    }

    & ul {
	margin-top: 0.5em;
	margin-left: 1em;
	list-style-type: disc;
    }

    & li {
	margin-bottom: 0.75em;
	padding-right: 0.25em;
	line-height: 1.5em;

	/* This is used in the listing for the blog posts with just titles  */
	& h2 {
	    margin-bottom: 0;
	    & a {
		text-decoration: none;
	    }
	    & a:hover {
		text-decoration: underline;
	    }
	}
	& p {
	    margin-top: 0;
	}
    }

    & span.topic {
	display: inline-block;
	background: var(--orange);
	color: var(--beige);
	padding: 0.2em 0.5em;
	border-radius: 3px;
    }

    & sub {
	vertical-align: sub;
	font-size: 0.85em;
    }

    & sup {
	vertical-align: super;
	font-size: 0.85em;
    }

    & p.math {
	text-align: center;
	font-size: 1.2em;
	font-family: serif;
	font-style: italic;
	margin-top: 1em;
    }

    & table {
	width: 100%;
	background: rgba(0,0,0,0.02);
	margin-top: 1em;
	& th {
	    font-weight: bold;
	    border-bottom: 3px solid rgba(0,0,0,0.05);
	}
	& th, td {
	    padding: 0.75em 1em;
	}
	& td {
	    border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	& tr:last-child > td {
	    border-bottom: 0;
	}
	& .number {
	    text-align: right;
	}
    }
}

section.footer {
    background-color: var(--orange);
    border-top: 5px solid var(--light_blue);
    border-bottom: 5px solid var(--light_blue);
    padding: 2em 0;
    text-align: center;
}