@charset 'utf-8';

/* ========================================== */
/* DESIGN */

:root {
    --main-color: #ff8513;
    --text-dark-color: #350b00;
    --text-light-color: #ffffff;
    --border-color: #af5500;
    --link-color: #0049a8;

}

* {
    font-family: "Jost", "M PLUS Rounded 1c", sans-serif;
    /* font-family: "Jost", sans-serif; */
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: var(--text-dark-color);
}

header {
    border-color: var(--border-color);
}

main {
    background-image: url("/images/background.png");
    background-repeat: repeat;
}

footer {
    background: var(--main-color);
    color: var(--text-dark-color);
    border-color: var(--border-color);
}

a {
    color: var(--text-dark-color);
    text-decoration: none;
}

a:visited {
    color: inherit;
}

a:hover {
    text-decoration: underline;
    /* color: var(--text-light-color); */
}

/* ========================================== */
/* Heading */

.top-message {
    font-size: 18pt;
    letter-spacing: 0.2em;
}

.heading {
    margin-bottom: 13px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-color: var(--border-color);
    font-size: 19pt;
    position: relative;
}

.heading .heading-sub {
    display: block;
    font-size: 8pt;
    letter-spacing: 3;
}


/* ------------------------------------------ */

.header-title {
    background: var(--main-color);
    color: var(--text-light-color);
    border-bottom-color: var(--border-color);
}

.header-nav {
    background: var(--main-color);
}

.header-nav ul {
    color: var(--text-dark-color);
}

/* ------------------------------------------ */

.table>tbody>tr>th {
    color: var(--text-light-color);
    border-color: var(--border-color);
    background: #ff8513;
}

.table>tbody>tr>td {
    background: white;
    color: var(--text-dark-color);
    border-color: var(--border-color);
}

/* ------------------------------------------ */

.footer-nav li a {
    color: var(--link-color);
}

.copyright {
    background: #350b00;
    color: #fff;
}


@media (min-width: 750px) {

    .heading .heading-sub {
        float: right;
        position: inherit;
        bottom: -20;
    }

}