/* using this https://colorhunt.co/palette/ebecf1206a5d1f40681b1c25

light color: #EBECF1
green: #102e39
lighter green (link): #629E94
blue: #1F4068
darker blue: #00050B
dark: #1B1C25
*/

/* body */

@font-face {
	font-family: 'industry-bold';
	font-style: normal;
	font-weight: 100;
	src: local('industry-bold'), url(../fonts/industry-bold.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}



body {
    background: #1B1C25;
    color: #EBECF1;
}

/* wrapper */


/* header */
header {
    background: #102e39;
    padding-bottom: .5em;
    padding-top: .5em;
    margin-bottom: .1em;
    text-align: center;
}


header h1 {
    font-size: 4em;
    font-family: 'industry-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-bottom: .25em;
    padding-top: .25em;
    
}

header h2 {
    font-weight: bold;
    color: #67c057;
    font-size: 1.5em;
    font-family: 'industry-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-bottom: .5em;
}

header h3 {
    font-weight: bold;
    font-size: 1.5em;
    font-family: 'industry-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1rem;
}

/* end header */

#wrapper {
    max-width: 64em;
    margin-left: auto;
    margin-right: auto;
    background: #00050B;
}

/* nav */
nav {
    background: #091015;
    padding-left: 2em;
    padding-right: 2em;
    /*padding-bottom: 1em;*/
    padding-top: 1em;
    margin-bottom: 1em;
    width: 100%;
    float: left; /* floating the container is a mystery */
}

nav li {
    float: left;
    width: 20%;
    padding-right: 3%;
}

nav a {
    display: block;
    text-decoration: none;
    color: #EBECF1;
    font-family: 'industry-bold', sans-serif;
    font-size: clamp(2.25vmin, 1.25em, 1.3vmax);
    text-transform: uppercase;
}

nav .current {
    text-decoration: underline;
}

/* aside */
aside {
    float: left;
    width: 20em;
    padding-right:2em;
    margin-right: 1em;
    padding-left: 2em;
    padding-top: 1em;
    margin-top: -1em;
    margin-bottom: 1em;
    background: #091015;
}

aside img {
    width: 100%;
    margin-bottom: .5em;
}

aside h2 {
    font-weight: bold;
    font-size: 2em;
    padding-bottom: .5em;
    font-family: 'industry-bold', sans-serif;
}
/* end aside */

/* main */

main {
    background: #00050B;
    padding-left: 2em;
    padding-right: 1em;
}

main h2 {
    font-size: 2em;
    font-weight: bold;
    padding-bottom: .5em;
    font-family: 'industry-bold', sans-serif;
}

main h3 {
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: .5em;
    font-family: 'industry-bold', sans-serif;   
}

main b {
    font-weight: bold;
    font-size: 1.5em;
}

main ul {
    list-style-type: disc;
    list-style-position: inside;
}


em, i {
    font-style: italic;
}


p, li, summary {
    padding-bottom: 1em;
    font-family: Arial, sans-serif;
    line-height: 1.25em;
    font-size: 1.25em;
}

a {
    color: #9AC6BD;
    text-decoration: none;
}




/* footer */
footer {
    clear: both;
    padding-top: 1em;
    background: #1F4068;
    text-align: center;
    font-size: .9em;
    padding-bottom: 1em;
    font-family: 'industry-bold', sans-serif;
}

footer h2 {
    font-size: 1.5em;
}