/* Remove margins and padding from all tags */
body, pre, html, p, a, h1, h2, h3, h4, h5, h6, button, ul, li, header {
    margin: 0;
    padding: 0;
}

/* Set the default font family to Roboto, 18px, foreground color #333333 */
html {
    /* font-family: 'Iosevka', monospace; */
    font-family: Roboto;
    font-size: 18px;
    color: #333333;
}

/* Center all content, with a width of 800 pixels */
body {
    width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
}

/* Set the default color for links to #222222, and transition to #555555 on hover removing underline */
a {
    color: #222222;
    transition: color 0.15s;
}

a:hover {
    color: #666666;
    text-decoration: none;
}

/*
 * Block quotes should be indented, and have a border on the left.
*/
blockquote {
    margin-left: 0em;
    border-left: 0.25em solid #dddddd;
    padding-left: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

/*
 * Display the header-line as a flex container, with left and right sections pushed to the ends.
 * Draw a line below it
 */
.header-line {
    font-family: 'Fira Code', monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0.25em;
    /* border-bottom: 1px solid #bbbbbb; */
    background-color: #222222;
    color: #dddddd;
}

.navbar {
    margin-top: 1.5em;
    margin-bottom: 2em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    border-bottom: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
}

.navbar-element {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 2em;
    margin-right: 2em;
    text-decoration: none;
}

/*
 * h1 should be 2em, bold, and have some space below it.
 */
h1 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/*
 * h2 should be 1.75em, bold, and have some space above and below it.
 */
h2 {
    font-size: 1.75em;
    font-weight: bold;
    margin-top: 1.15em;
    margin-bottom: 1em;
}

/*
 * h3 should be 1.4em, bold, and have some space above and below it.
 */
h3 {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 1.15em;
    margin-bottom: 1em;
}

/*
 * "List" page titles should be on the left, and have some space below them
 */
.list-page-title {
    margin-bottom: 1em;
}

/*
 * "Single" page titles should centered, and show the date below them.
 */
.single-page-title {
    text-align: center;
    margin-bottom: 0.2em;
}

.single-page-date {
    text-align: center;
    margin-bottom: 2em;
}

/*
 * Content paragraphs should have some space above and below.
 * Lines should be 1.5em apart.
 */
.content p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
}

/*
 * Lists should be indented
 */
.single-page-content ul, ol {
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    padding-inline-start: 40px;
}

.content li {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}

.content li p {
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1em;
}

/*
 * Content images should have their max width be 100%.
 */
.content img {
    max-width: 100%;
}

/*
 * Page lists should be slightly indented, and have no bullets.
 */
.page-list {
    list-style-type: none;
    padding-left: 0.5em;
}

/*
 * Page list items should have some space above and below them.
 */
.page-list-item {
    margin-top: 1em;
    margin-bottom: 2em;
}

/*
 * Page list item titles should be bold, and have some space below them.
 */
.page-list-item-title {
    margin-top: 1em;
    margin-bottom: 1em;
}

.page-list-item-title a {
    font-size: 1.1em;
}

.page-list-item-date {
    margin-left: 0.5em;
    font-size: 0.9em;
    color: #555555;
}

/*
 * Page list item summaries should have some space below them.
 */
.page-list-item-summary {
    margin-bottom: 1em;
}

/*
 * Use Fira Code for code blocks with pre
 */
.highlight code {
    font-family: 'Fira Code', monospace;
    font-weight: 300;
    font-size: 0.9em;
}

/*
 * Code blocks should be scrollable, and have a border with rounded corners.
 */
pre {
    overflow: scroll;
    border: 1px solid #eeeeee;
    border-radius: 0.2em;
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

/*
 * Inline code should be in a monospace font, light red background, and dark red foreground.
 */
p code {
    font-family: 'Fira Code', monospace;
    font-weight: 300;
    font-size: 0.9em;
    background-color: #fff4f4;
    color: #994444;
    padding: 0.1em;
}

li code {
    font-family: 'Fira Code', monospace;
    font-weight: 300;
    font-size: 0.9em;
    background-color: #fff4f4;
    color: #994444;
    padding: 0.1em;
}

ul code {
    font-family: 'Fira Code', monospace;
    font-weight: 300;
    font-size: 0.9em;
    background-color: #fff4f4;
    color: #994444;
    padding: 0.1em;
}

.page-list-item-summary code {
    font-family: 'Fira Code', monospace;
    font-weight: 300;
    font-size: 0.9em;
    background-color: #fff4f4;
    color: #994444;
    padding: 0.1em;
}

/*
 * The footer should be a flex container, with contact info on the right. It should have a line
 * above it.
 */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4em;
    margin-bottom: 1em;
    padding-top: 1.5em;
    padding-bottom: 1em;
    border-top: 1px solid #bbbbbb;
    color: #888888;
    font-size: 0.9em;
}

/*
 * The footer contact elements should be spaced out a bit.
 */
.contact-link {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

@media screen and (max-width: 1000px) {
    body {
        width: 80%;
    }
}

@media screen and (max-width: 800px) {
    body {
        width: 90%;
    }
}