/* -- Root tags -- */

html {
    background-color: #212C56;
}

body {
    margin: 0;

    font-family: 'Barlow', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;

    background-color: #212C56;
    max-width: 1450px;
    margin-right: auto;
    margin-left: auto;
}

/* -- General tag styling -- */

a {
    color: #302F33;
    text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}

h1 {
    font-weight: 400;
    font-size: 72px;
}

h2 {
    font-weight: 300;
    font-size: 36px;
}

h3 {
    font-weight: 500;
    font-size: 30px;
}

h6 {
    font-size: 18px;
    font-weight: 400;
}

p, li {
    font-size: 17px;
}

strong {
    font-weight: 500;
}

hr {
    border-style: none;
    height: 1px;
    background-color: black;
}

/* -- Header -- */

#header {
    background-color: white;
    color: black;
    height: 110px;

    font-family: 'Roboto', sans-serif;
    font-weight: 300;

    padding-top: 30px;
    padding-bottom: 30px;

    margin-left: auto;
    margin-right: auto;
}

#header-content {
    margin-left: auto;
    margin-right: auto;
    width: 80%;

    display: flex;
    justify-content: space-between;
}

.dark {
    background-color: transparent !important;
}

#header a {
    color: black;
    text-decoration: none;
}

.dark a {
    color: white !important;
}

/* Navigation bar items */
.main-nav ul, .footer-nav ul {
    margin: 0;
    padding: 0;
}

.main-nav ul li, .footer-nav ul li {
    font-size: 20px !important;
}

.main-nav ul li {
    display: inline-block;
    letter-spacing: normal;
    margin-right: 70px;
}

.footer-nav ul li {
    display: inline-block;
    letter-spacing: normal;
    margin-right: 15px;
}

.main-nav ul li:last-child, .footer-nav ul li:last-child {
    margin-right: 0;
}

.main-nav ul li:hover > a, .footer-nav ul li:hover > a {
    text-decoration: underline !important;
}

.main-nav ul li.selected > a {
    text-decoration: underline !important;
}

/* -- Content -- */

#content-wrapper {
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

/* -- Footer -- */

footer {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    text-align: left;
    font-size: 20px;

    padding: 35px;
    margin-bottom: 45px;
    background-color: #212C56;

    margin-left: auto;
    margin-right: auto;
}

.footer, .footer a {
    color: #8686FF;
    text-decoration: none;
}

#footer-left {
    order: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 20%;
    justify-content: space-between;
}

#footer-right {
    order: 2;
    flex-basis: 60%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
}

#footer-right > hr {
    width: 100%;
    border: none;
    height: 1px;
    color: white;
    background-color: white;
    margin-top: 20px;
    margin-bottom: 30px;
}

#footer-navigation > a:hover, #contactus > a:hover {
    text-decoration: underline;
}

#contactus a:hover {
    color: #A1A7FF;
}

#footer-left span {
    color: white;
}

.footer-divider::before {
    color: #FF3880;
    content: "•";
}

.footer-divider {
    margin-right: 20px;
    margin-left: 20px;
}

#footer-left a {
    color: #FF3880;
    text-decoration: none;
}

#footer-left a:hover {
    text-decoration: underline;
}

.footer-nav > ul {
    display: inline-block;
}

.footer-nav {
    display: inline;
}

/* -- Styling for default text pages -- */
.default-content {
    background-size: cover;
    background-position: center;
    min-height: 500px;

    width: 80%;
    margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}

.transparent {
    background-color: transparent;
    color: white !important;

    text-shadow: 0 0 30px #222B5E;
}

.transparent a {
    color: white !important;
}

/* -- Blue full width link/bar with "back to something" text -- */
.back-to-main-link {
    text-decoration: none;
}

.back-to-main {
    display: flex;
    min-height: 40px;

    background-color: #D4F0FF;
}

.back-to-main i {
    color: #0076C1;
}

.back-to-main-text {
    margin-top: 17px;
    margin-bottom: 17px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    color: black;
}



/* Site-wide styling for buttons */
.button-link {
    border-radius: 50px;
    font-size: 18px;
    border-width: 5px;
    border-style: solid;
    padding: 5px 15px 5px 15px;
    margin-bottom: 100px;
    text-decoration: none;
    margin-top: 100px;
    text-transform: uppercase;
}

.flash {
    padding: 10px;
    background-color: lightgray;
    border-left: 5px solid gray;
}

.flash-success {
    color: white;
    background-color: #5cb85c;
    border-left: 5px solid #008000;
}

.flash-error {
    background-color: #FF9494;
    border-left: 5px solid #ff0000;
}

.sitemap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px;

    padding-bottom: 50px;
}

.sitemap table {
    border-collapse: collapse;
}

.sitemap tbody {
    font-size: 18px;
}

.sitemap tr {
    border-bottom: 1px solid #ccc;
}

.sitemap a:hover {
    text-decoration: none;
}

/* Jokes stolen from https://digitalsynopsis.com/design/34-css-puns-web-design-funny-jokes/ */
#rap-artists {
    word-spacing: 0;
}

.monarch {
    position: inherit;
}

#titanic {
    float: none;
}

#big-bang::before {
    content: "";
}