body {
    font-family: "Open Sans", sans-serif;
    min-height: 100vh;
    background: rgb(0, 39, 90);
    background: linear-gradient( 0deg, rgba(0, 39, 90, 1) 0%, rgba(8, 148, 213, 1) 90% );
}

.bg-img {
    position: fixed;
    top: 0;
    right: -30rem;
    z-index: -1;
    opacity: 0.2;
}

/* Header and Primary Nav */

header {
    background: #ffffff;
    border-bottom: 1px solid #e6e7e8;
}

.navbar {
    background: #ffffff;
}

nav .navbar-nav {
    font-family: "Archivo Narrow", sans-serif;
    border-radius: 4px;
    letter-spacing: 0.5px;
    background: #ffffff;
}

    nav .navbar-nav i {
        font-size: 1.125rem;
    }

.navbar-light .navbar-nav .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 600;
    color: #010c2a;
    text-transform: uppercase;
    border-radius: 4px;
}

    .navbar-light .navbar-nav:not(.navbar-utility) .nav-link,
    .navbar-light .navbar-nav:not(.navbar-utility) .nav-link:hover,
    .navbar-light .navbar-nav:not(.navbar-utility) .nav-link:focus,
    .navbar-light .navbar-nav .nav-link.active {
        color: #ffffff;
    }

.navbar-light .navbar-nav:not(.navbar-utility) {
    gap: 10px;
}

    .navbar-light .navbar-nav:not(.navbar-utility) .nav-link {
        background: rgb(0, 39, 90);
        background: linear-gradient( 0deg, rgba(0, 39, 90, 1) 0%, rgba(8, 148, 213, 1) 90% );
    }

        .navbar-light .navbar-nav:not(.navbar-utility) .nav-link:hover,
        .navbar-light .navbar-nav:not(.navbar-utility) .nav-link:focus,
        .navbar-light .navbar-nav .nav-link.active {
            background: rgb(1, 12, 42);
            background: linear-gradient( 0deg, rgba(1, 12, 42, 1) 0%, rgba(9, 56, 110, 1) 90% );
        }

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #006bb2;
}

.navbar-light .navbar-utility .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.nav-link.caution {
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 600;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-transform: uppercase;
    background: #FBCB27 !important;
    background: linear-gradient(180deg, rgba(251, 203, 39, 1) 0%, rgba(245, 141, 60, 1) 100%) !important;
}

        .nav-link.caution:hover,
        .nav-link.caution:focus,
        .nav-link.caution.active {
            background: #b5921d !important;
            background: linear-gradient(180deg, rgba(181, 146, 29, 1) 0%, rgba(199, 113, 48, 1) 100%) !important;
        }

.nav-pills .nav-link {
    color: #045e96;
    padding: 0.5rem 1rem;
}

    .nav-pills .nav-link.active {
        color: #ffffff;
        background: rgb(0, 39, 90);
        background: linear-gradient( 0deg, rgba(0, 39, 90, 1) 0%, rgba(8, 148, 213, 1) 90% );
    }

    .nav-pills .nav-link:hover,
    .nav-pills .nav-link:focus {
        /*color: #045e96;*/
        border: solid;
        border-width: 0.05rem;
        border-color: #045e96;
        padding: 0.45rem 0.95rem;
    }
    .nav-pills .nav-link.active:hover,
    .nav-pills .nav-link.active:focus {
        border: none;
        padding: 0.5rem 1rem;
    }

/* Buttons */

.btn {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border: none;
}

.btn-primary {
    color: #ffffff;
    background: rgb(0, 39, 90);
    background: linear-gradient( 0deg, rgba(0, 39, 90, 1) 0%, rgba(8, 148, 213, 1) 90% );
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #ffffff;
        background: rgb(1, 12, 42);
        background: linear-gradient( 0deg, rgba(1, 12, 42, 1) 0%, rgba(9, 56, 110, 1) 90% );
    }

.btn-secondary {
    color: #010c2a;
    background: rgb(194, 126, 8);
    background: linear-gradient( 0deg, rgba(194, 126, 8, 1) 0%, rgba(242, 174, 56, 1) 90% );
}

.btn-outline-primary {
    color: #045e96;
    border-color: #045e96;
    border: solid;
    border-width: 0.05rem;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: #ffffff;
        background: rgb(1, 12, 42);
        background: linear-gradient( 0deg, rgba(1, 12, 42, 1) 0%, rgba(9, 56, 110, 1) 90% );
        padding: 0.83rem 1.3rem;
        border: none;
    }

.btn-danger {
    color: #ffffff;
    background: rgb(102, 15, 3);
    background: linear-gradient( 0deg, rgba(102, 15, 3, 1) 0%, rgba(204, 26, 2, 1) 90% );
}

    .btn-danger:hover,
    .btn-danger:focus {
        color: #ffffff;
        background: rgb(60, 5, 1);
        background: linear-gradient( 0deg, rgba(60, 5, 1, 1) 0%, rgba(120, 20, 1, 1) 90%);
    }

.btn-success {
    color: #ffffff;
    background: rgb(1, 66, 36);
    background: linear-gradient( 0deg, rgba(1, 66, 36, 1) 0%, rgba(25, 135, 84, 1) 90% );
}

    .btn-success:hover,
    .btn-success:focus {
        color: #ffffff;
        background: rgb(1, 30, 12);
        background: linear-gradient( 0deg, rgba(1, 30, 12, 1) 0%, rgba(1, 82, 34, 1) 90%);
    }

/* Footer */

footer {
    background-color: #eeeeef;
}

/* Content */

h1, #content h1 {
    color: #ffffff;
    text-transform: uppercase;
    /*font-size: 22px !important;*/
    font-family: 'Fugaz One', cursive;
    font-weight: normal;
}

h2 {
    background-color: #8CB6D6;
    height: 35px;
    line-height: 35px;
    padding-left: 20px;
    padding-right: 5px;
    color: #0472ac;
    font-family: 'Fugaz One',cursive;
    /*font-size: 18px !important;*/
    font-weight: normal;
    text-transform: uppercase;
    height: auto;
    padding-right: 20px;
}

h3 {
    color: #ffffff;
    text-transform: uppercase;
    /*font-size: 13px !important;*/
    font-family: 'Fugaz One', cursive;
    font-weight: normal;
    letter-spacing: .02em;
}

/* h1 and h3 need to be re-defined because they are used both inside and outside of the white content card, and need 
   specific colors for each situation
*/
.toastui-editor-contents h1 {
    color: #0472ac;
    text-transform: uppercase;
    /*font-size: 22px !important;*/
    font-family: 'Fugaz One', cursive;
    font-weight: normal;
}

.toastui-editor-contents h3 {
    color: #012b5c;
    text-transform: uppercase;
    /*font-size: 13px !important;*/
    font-family: 'Fugaz One', cursive;
    font-weight: normal;
    letter-spacing: .02em;
}