:root {
    --primary: #250918;
    --secondary: #212529;
    --tertiary: #561b00;
    --quaternary: rgb(204, 153, 102);
    --quinary: rgba(204, 153, 102, .5);
}

html {
    overflow-y: auto;
}

body {
    height: 100%;
    font-family: source-sans-pro, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
    color: var(--secondary);
}

a {
    color: var(--tertiary);
    text-decoration: none;
}
    a:hover {
        text-decoration: underline;
    }

h1 {
    margin: 10px 0;
    font-size: 48px;
    font-weight: 200;
    line-height: 58px;
    color: var(--primary);
}
h2 {
    margin: 10px 0;
    font-size: 32px;
    font-weight: 200;
    line-height: 58px;
    color: var(--tertiary);
}

section {
    padding: 80px 0;
    width: 100%;
    position: relative;
}

p:last-of-type {
    margin-bottom: 0;
}

.gap-10 { height: 10px; }
.gap-20 { height: 20px; }
.gap-30 { height: 30px; }
.gap-40 { height: 40px; }
.gap-50 { height: 50px; }
.gap-60 { height: 60px; }
.gap-70 { height: 70px; }
.gap-80 { height: 80px; }
.gap-90 { height: 90px; }
.gap-100 { height: 100px; }

.pinch-20 { margin: auto; width: 20%; }
.pinch-40 { margin: auto; width: 40%; }
.pinch-50 { margin: auto; width: 50%; }
.pinch-60 { margin: auto; width: 60%; }
.pinch-75 { margin: auto; width: 75%; }
.pinch-80 { margin: auto; width: 80%; }

.bg-primary {
    background-color: var(--primary);
}
    .bg-primary, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5 {
        color: #fff;
    }
.bg-secondary {
    background-color: var(--secondary);
}
.bg-tertiary {
    background-color: var(--tertiary);
}

.bg-quaternary {
    background-color: var(--quaternary);
}
.bg-quinary {
    background-color: var(--quinary);
}

.flex-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.btn {
    width: auto;
    padding: 10px 40px;
    display: inline-block;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.5s ease;
}
.btn-primary {
    color: #fff;
    background-color: var(--quaternary);
    border: 1px solid var(--quaternary);
}
    .btn-primary:hover {
        color: var(--quaternary);
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid var(--quaternary);
    }
.btn-secondary {
    border: 1px solid #fff;
}
    .btn-secondary:hover {
        color: #888;
        background-color: #fff;
    }

/* ### CONTENT ### */



/* ### MEDIA QUERIES ### */

@media (max-width: 991.98px) {
    .pinch-50 { 
        margin: auto; width: 100%;
    }
}