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

@font-face {
    font-family: overpass;
    src: url(/fonts/Overpass-Regular.ttf)
}

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

footer {
    width: 100%;
}

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

a {
    color: white;
}

.page-title {
    color: #9b59b6;
}

ul {
    margin-top: 2px;
}

/* Layouting */
* {
    /* To fix sizing issues */
    box-sizing: border-box;
}

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

.horizontal {
    flex-direction: row;
}

.horizontal-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.vertical {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

.subbar-link {
    padding: 5px;
}

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

    color: white;
}

.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;
}

.warning {
    border-left: 2px;
    border-left-style: solid;
    border-color: gray;
    padding-left: 4px;

    color: #f1c40f;
}