html {
    /* Soooo, this is necessary to always show
       the scrollbar, even if the page is short
       enough that it doesn't need one. Otherwise,
       the width will be different on short & long
       pages, which is jarring when you switch
       between them. */
    overflow-y: scroll;
}

body {
    font-family: 'Courier New', monospace;
    line-height: 1.5;
    max-width: 600px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    margin: auto;
    padding-bottom: 30px;
}

a {
    color: blue;
}

a:hover {
    color: #2c7cc9;
}

.navbar-img {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.spaced-li {
    margin-top: 10px;
}

header {
    margin-top: 10px;
    text-align: center;
}

.navbar {
    margin-bottom: 30px;
}

.navlink {
    font-size: 20px;
}

/* Center elements. */
.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centered-text {
    text-align: center;
}

nav, h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica', sans-serif;
    line-height: normal;
}

/* Added this to space out the sections on the
software page a bit more. Who knows what chaotic
knock-on effect it will have. */
h3 {
    margin-top: 25px;
    margin-bottom: 13px;
}

/* Making it a reasonable size on mobile. */
@viewport {
    width: device-width;
    zoom: 1.0;
}

.tiny {
    font-size: 6px;
}

/* Prettify inline code elements. The 'not' part
prevents it from f*cking up codehilite formatting. */
:not(pre) > code {
    background-color: rgb(224, 224, 220);
    color: rgb(36, 41, 46);
    border-radius: 6px;
    font-size: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
}

pre > code {
    width: 100%;
}

pre {
    margin: 0px;
}

div.codehilite {
    max-width: 800px;
    overflow-x: auto;
    line-height: 16px;
    background-color: rgb(228, 228, 224);
    padding: 10px;
    border-style: solid;
    border-color: rgb(212, 212, 212);
    border-width: 3px;
}

.post-list {
    /*border-spacing: 0 15px;*/
}

.post-entry {
}

.post-entry-date {
    white-space: nowrap;
    vertical-align: top;
    color: rgb(128, 128, 128);
    padding-right: 10px;
}

.post-entry-title {
    vertical-align: top;
    padding-bottom: 10px;
}

.project-link {
    float: right;
}

/* Wrap tables in a div. Give the div this class.
   Yeah, it sucks, but that's the only way
   to add a scrollbar to an overflowing table,
   without using a f*cked up block display. */
.cooltablewrap {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.cooltablewrap table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border: 1px solid black;
}

.cooltablewrap th,
.cooltablewrap td {
    text-align: center;
    padding: 2px;
    border: 1px solid black;
}

/* Another type of table. This one should wrap. */
.bordered-centered-table {
    border-collapse: collapse;
    border: 1px solid black;
    text-align:center;
}

.bordered-centered-table th {
    border-collapse: collapse;
    border: 1px solid black;
}

.bordered-centered-table td {
    border-collapse: collapse;
    border: 1px solid black;
}

/* Scale images & videos so they're not too big. */
img {
    max-width: 100%;
    height: auto;
}
video {
    max-width: 100%;
}

.tags {
    font-size: 12px;
}

figcaption {
    color: grey;
    font-size: 14px;
    margin-top: 10px;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.notebooklink {
	text-align: center;
	font-size: 14px;
}