/* body {
    background-color: #DFDCD7;
    font-family: 'Bitter', serif;
    color: #004F91;
} */

body {
    background-color: #ffdab9;
    font-family: 'Bitter', serif;
    color: black;
}

.navbar-nav {
    align-items: right !important;
}

.navbar-brand {
    color: #FF661F !important;
}

.nav-link {
    color: #FF661F !important;
}

.navbar-toggler {
    color: #FF661F !important;
}

.navButton {
    border: none;
    background-color: #ffdab9;
}

.about {
    font-size: 200%;
}

.about-title {
    font-size: 300%;
}

.navbar-custom {
    background-color: #ffdab9 !important;
    color: #004F91;
    font-size: 200%;
    margin-bottom: 3em;
    position: sticky;
}

.content {
    margin-left: 1em;
    margin-right: 1em;
}

.navbar-article {
    margin-top: 0.65em !important;
    top: 0 !important;
    position: sticky !important;
}


.navbar-brand {
    font-size: 200%;
}

.navbutton:hover {
    color: #FF661F !important;
    background-color: #ffdab9 !important;
    font-weight: bold !important;
}

.nav-link:hover {
    font-weight: bold;
}

.quote {
    margin-left: 2em;
    margin-right: 2em;
}

.button {
    background-color: #ffdab9;
    border: 0;
    color: #FF661F;
    font-size: 150%;
}

.reference {
    color: #FF661F;
}

.button:hover {
    font-weight: bold !important;
}

.article {
    font-size: 150%;
    color: #004F91;
}

.next-article {
    font-size: 200%;
}

.previous-article {
    font-size: 200%;
}

.read-more {
    margin-top: 1em;
}

.home-button {
    font-size: 300%;
}

.section {
    scroll-margin-top: 8em;
    opacity: 0;
    transition: 1.5s;
}

.inView {
    opacity: 1 !important;
}

.colourOneBox {
    height: 5rem;
    background-color: #ffdab9;
}

.colourTwoBox {
    height: 5rem;
    /* background-color: #fbc4ab; */
}

.link {
    text-decoration: none;
    color: #FF661F;
}

.link:hover {
    color: #FF661F;
    font-weight: bold !important;
}

.sectionTitle {
    font-size: 3rem;
    text-align: left;
    margin-bottom: 3rem;
}

.writingIntro {
    margin-bottom: 6rem;
}

.colourOne {
    background-color: #ffdab9;
    color: #004F91;
    max-width: 100%;
}

.colourTwo {
    /* background-color: #fbc4ab; */
    color: #004F91;
}

@media (max-width: 768px) {
    body {
        font-size: 70%;
    }

    .navbar-brand {
        font-size: 120%;
    }

    .read-more {
        margin-top: 0;
        margin-bottom: 2em;
    }

    .section {
        scroll-margin-top: 22rem !important;
    }

    .article {
        padding-right: 0%;
    }

    .next-article {
        margin-bottom: 2em;
    }

    .previous-article {
        display: none;
    }

    .content {
        margin-left: 1em;
        margin-right: 1em;
    }
}