:root{
    --background-color: hsl(10, 20%, 98%);
    --foreground-color: hsl(10, 10%, 13%);
    --primary-color: hsl(200, 90%, 40%); 
    --highlight-color: hsl(290, 86%, 43%); 
    --light-color: hsl(10, 10%, 40%);
}

body {
    background-color: var(--background-color);
    color: var(--foreground-color);
    overflow-y: scroll;

    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.5em;
}

@media only screen and (max-width: 800px) {
    body {
        font-size: 1em;
    }
}

.container {
    max-width: 80ch;
    padding: 2ch;
    padding-bottom: 5em;
    margin: auto;
}

h1 {
    margin: 1em 0;
}

time {
    color: var(--light-color);
}

p {
    line-height: 1.5em;
    text-align: justify;
}

a, a:visited {
    color: var(--highlight-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


img {
    max-width: 100%;    
    cursor: pointer;
}

code {
    font-size: 1.2em;
}

.codehilite {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    overflow-x: auto;
}

.codehilite pre {
    margin: 1em;
}