:root {
    --black: #000000;
    --charcoal: #38383b;
    --dark-blue: #00416b;
    --medium-blue: #005e9b;
    --light-blue: #0071bb;
    --light-gray: #dedede;
    --petrol: #005f6a;
    --off-white: #fdfdfd;
}

html {
    font-size: 18px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--charcoal);
}

.header-banner-container {
    background-color: var(--charcoal);
    font-family: 'Didact Gothic', sans-serif;
    letter-spacing: 0.2em;
}

header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 15px 50px;
    color: var(--off-white);
}

header .titles {
    display: flex;
    align-items: baseline;
    column-gap: 15px;
}

header .titles * {
    margin: 0;
}

header .titles h2 {
    font-size: 18px;
}

nav ul {
    display: flex;
    column-gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a,
nav a:visited {
    letter-spacing: 0.1em;
    color: var(--light-gray);
    text-decoration: none;
}

nav a:hover {
    color: var(--off-white);
}

.banner {
    display: flex;
    align-items: center;
}

.banner > * {
    width: 100%;
    padding: 15px 50px;
}

main {
    background-color: var(--off-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

article {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.05em;
    padding: 15px 25px;
    max-width: 700px;
    text-align: justify;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
    background-color: var(--charcoal);
    color: var(--off-white);
    font-family: 'Cormorant Garamond', serif;
}

footer .social-icons {
    display: flex;
    column-gap: 30px;
}

footer svg {
    height: 48px;
    fill: var(--light-gray);
}

footer svg:hover {
    fill: var(--off-white);
}

.headshot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headshot {
    width: 100%;
}

.banner-blurb-container {
    color: var(--off-white);
    text-align: center;
}

.banner-blurb-container p {
    font-size: 24px;
}

.banner-blurb-container p#jesse-brault-name {
    font-size: 48px;
}