/* Main Style */

:root {
    --light: #e9e1d8;
    --lighthover: #c1bab3;
    --dark: #131212;
    --darkhover: #3b3838;
    --lightdark: #353533;
    --red: #a03333;
    --redhover: #6b2525;
}

@font-face {
    font-family: "FjallaOne";
    src:
        url("../fonts/FjallaOne-Regular.woff2") format("woff2"),
        url("../fonts/FjallaOne-Regular.woff") format("woff");
    font-weight: normal;
}

body {
    font-family: "Lato", sans-serif;
    font-size: 20px;
    color: var(--light);
    background-color: var(--dark);
}

h1 {
    font-family: "FjallaOne", Arial, sans-serif;
    font-size: 2.5rem;
}
h2 {
    font-family: "FjallaOne", Arial, sans-serif;
    font-size: 2rem;
}
h3 {
    font-family: "FjallaOne", Arial, sans-serif;
    font-size: 1.6rem;
}
h4 {
    font-family: "FjallaOne", Arial, sans-serif;
    font-size: 1.3rem;
}

body .section-spacing {
    padding-bottom: 60px;
}
body .title {
    text-align: left;
    padding: 20px;
}
body .title-center {
    text-align: center;
    padding: 20px;
}
body .large-title-center {
    text-align: center;
    padding: 100px 0px 30px 0px;
    font-size: 3rem;
}
body .subtitle-center {
    text-align: center;
    padding-bottom: 20px;
}
body .dark {
    color: var(--dark);
}
body .light {
    color: var(--light);
}
body .green {
    color: var(--green);
}
body .radius-10 {
    border-radius: 10px;
}
body .radius-20 {
    border-radius: 20px;
}
body .padding-top-large {
    padding-top: 120px;
}

.button {
    display: inline-block;
    background-color: var(--green);
    padding: 8px 20px 8px 20px;
    color: var(--dark);
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: var(--darkgreen);
    color: var(--dark);
}

a {
    text-decoration: none;
}

.img-thumbnail {
    border: var(--lightdark);
    background-color: var(--lightdark);
}

.article-arrow {
    color: var(--green);
    transition: color 0.3s ease;
    padding: 10px;
}

.article-arrow:hover {
    color: var(--darkgreen);
}

.article-arrow i {
    font-size: 1.5rem;
}

.share-button {
    color: var(--green);
    font-size: 1.3rem;
    transition: color 0.3s ease;
    padding: 10px;
}

.share-button:hover {
    color: var(--darkgreen);
}

/* Main menu */

.navbar-nav {
    text-align: right;
}

.navbar-nav a {
    padding-right: 10px;
    color: var(--red);
    transition: color 0.3s ease;
}

.navbar-nav a:hover {
    color: var(--redhover);
}