/* CSS HEX */
:root {
    --primary-1: #e9ecf7;
    --primary-2: #f7ce46;
    --accent-1: rgba(44, 115, 190, 0.88);
    --accent-2: #e743be;
    --accent-3: rgb(46, 56, 92);
}

body {
    background-color: rgb(46, 56, 92);
}

p,
li {
    font-family: 'Inconsolata', Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: var(--primary-1);
}

.bg-jumbotron {
    background-color: rgba(1, 15, 30, 0.88);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.brand-text,
.nav-link {
    font-family: 'Karla', Arial, Helvetica, sans-serif !important;
    color: var(--primary-1);
}

.btn-primary,
.btn-primary:hover {
    background-color: var(--primary-2);
    border: none;
    color: var(--accent-3);
}

.bg-accent-1 {
    background-color: var(--accent-1) !important;
}

.bg-accent-3 {
    background-color: var(--accent-3);
}

.font-brand {
    color: var(--primary-1) !important;
}

.subtitle {
    font-size: 0.8rem;
}

.vh-90 {
    min-height: 90vh;
    display: block;
}

.nav-link:link, .nav-link:visited {
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    color: var(--primary-1) !important;
    /* font-size: large; */
    text-decoration: none;
}

.nav-link:hover, .nav-link:active {
    color: var(--accent-1) !important;
}


.text-justify {
    text-align: justify;
    text-justify: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
}

button,
button:focus,
button:active {
    outline: none !important;
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--primary-1) 0px 3px 8px !important;
}

#brand-logo {
    box-shadow: var(--primary-1) 0px -1px 12px 2px !important;
}