/* byline TODO */

/*root variables*/
:root {
    /* colours for use across site. three adjacent color scheme */
    /* note on the use of rgb over rgba. alpha is left out to be optionally overridden by inheritors, e.g. 'color: rgba(var(--primary-0-rgb),0.5);'. */
    /* primary color */
    --primary-0-color: #6F8FA2; /* usage: 'color: var(--primary-0-color);' */
    --primary-1-color: #477087;
    --primary-2-color: #28536C;
    --primary-3-color: #113951;
    --primary-4-color: #032336;
    /* rgb format */
    --primary-0-rgb: rgb(111,143,162);
    --primary-1-rgb: rgb( 71,112,135);
    --primary-2-rgb: rgb( 40, 83,108);
    --primary-3-rgb: rgb( 17, 57, 81);
    --primary-4-rgb: rgb(  3, 35, 54);

    /* secondary color */
    --secondary-0-color: #7E82B1;
    --secondary-1-color: #7E82B1;
    --secondary-2-color: #323776;
    --secondary-3-color: #191E58;
    --secondary-4-color: #080C3B;
    /* rgb format */
    --secondary-0-rgb: rgb(126,130,177);
    --secondary-1-rgb: rgb( 84, 88,147);
    --secondary-2-rgb: rgb( 50, 55,118);
    --secondary-3-rgb: rgb( 25, 30, 88);
    --secondary-4-rgb: rgb(  8, 12, 59);
    
    /* tertiary color */
    --tertiary-0-color: #77B395;
    --tertiary-1-color: #4B956F;
    --tertiary-2-color: #28774F;
    --tertiary-3-color: #0F5934;
    --tertiary-4-color: #003C1D;
    /* rgb format */
    --tertiary-0-rgb: rgb(119,179,149);
    --tertiary-1-rgb: rgb( 75,149,111);
    --tertiary-2-rgb: rgb( 40,119, 79);
    --tertiary-3-rgb: rgb( 15, 89, 52);
    --tertiary-4-rgb: rgb(  0, 60, 29);

    /* other colors */
    --soft-black: #191716; /*todo rename*/
}

/*body styles*/
body {
    margin      : 0px;
    padding     : 0px;
    background  : var(--soft-black);
    font-family : Helvetica Neue, Helvetica, Arial, sans-serif;
}

/*header styles*/
header {
    background  : var(--soft-black);
    color       : white;
    padding     : 0.75em 0.75em;
}
header nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
header nav h1 {
    margin          : 0px;
    padding         : 0px;
    list-style-type : none;
}
header nav ul {
    margin          : 0px;
    padding         : 0px;
    list-style-type : none;
}
header nav ul li {
    display: inline;
    margin-left: 3em;
}

/*footer styles*/
footer {
    background  : var(--soft-black);
    color       : white;
    padding     : 10px 10px;
}
footer div.footer-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
footer div.footer-main div.text {
    margin          : 0px;
    padding         : 0px;
}
footer div.footer-main div.link-icons {
    margin          : 0px;
    padding         : 0px;
}
footer div.disclaimers {
    display: block;
    margin-top: 0.25em;
    padding: 0px 25vw 0px 25vw;
    text-align: center;
    color:var(--secondary-2-rgb);
    font-size: x-small;
}

/* link styles */
a {
    text-decoration: none;
    color: white;/*var(--tertiary-0-color);*/
}

a:hover {
    text-decoration: underline;
    color: var(--secondary-1-color);
}

/* coming-soon styles. todo remove once site up and running */
div.comingsoon-main {
    margin: 0px;
    height: 5em;
    line-height: 5em;
    padding-left:2em;
    background-image: linear-gradient(var(--primary-1-color), var(--primary-2-color))
}
div.comingsoon-main span {
    font-size: x-large;
    display: inline-block;
    vertical-align: middle;
}

/* responsive design rules */