/* Fonts */
@font-face {
    font-family: roboto;
    src: url(/assets/fonts/Roboto-Regular.ttf)
}

/* Element styling */
html {
    background-color: #212121;
    color: #ffffff;
    font-family: Roboto;
}

footer {
    width: 100%;
}

h1, h2, h3 {
    margin-bottom: 2px;
}

a {
    color: white;
}

ul {
    margin-top: 2px;
}

img {
    /* Prevent images in blog posts from getting too big */
    max-width: 800px;
}

/* Layouting */
.container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.horizontal {
    flex-direction: row;
}

.vertical {
    display: flex;
    flex-direction: column;
}

.subbar-link {
    padding: 5px;
}

.post-list-item {
    display: block;
    max-width: 600px;
}

.post {
    display: block;
    max-width: 800px;
}

.title-sub {
    margin-top: 0px;
    margin-bottom: 10px;
}

.title-sub-subbar {
    margin-top: -20px;
}

/* Text styling */
.highlight {
    background-color: #373737;
    padding: 4px;
}

.quote {
    border-left: 2px;
    border-left-style: solid;
    border-color: gray;
    padding-left: 4px;
    font-style: italic;
}

/* Image styling */

.profile-picture {
    width: 256px;
    height: 256px;
    margin-bottom: 10px;
}