@import url(https://db.onlinewebfonts.com/c/bb2e1211dfd31103079dbce7c49e1d4e?family=DIN+Neuzeit+Grotesk+LT+W01+BdCn);
@import url(https://db.onlinewebfonts.com/c/164a60c2e090248befbcf32fdd5af386?family=Lulo+Clean+One+Bold);
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@200&display=swap");

:root {
    --header-bg: #193669;
    --header-fg: #f3f5f7;
    --hero-fg: #193669;
    --hero-bg: #e7e7e7;
    --nav-bg: #fff;
    --nav-fg: #000;
    --subhead-fg: #c41919;
}

.barlow-extralight {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: normal;
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: var(--header-bg);

    color: var(--header-fg);
}

nav {
    background-color: var(--nav-bg);
    color: var(--nav-fg);
    display: flex;
    width: 100%;
    justify-content: space-around;
    text-transform: uppercase;
    font-size: 125%;
    font-family: Arial, Helvetica, sans-serif;
}

.hero {
    color: var(--hero-fg);
    background-color: var(--hero-bg);

    background-image: url("images/eeeagle.webp");
    background-size: cover;
    background-position: center bottom;
}

h1 {
    font-family: "Lulo Clean One Bold", Arial, Helvetica, sans-serif;
    font-size: 90px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    -webkit-text-stroke: 1px white;
}

.subhead {
    color: var(--subhead-fg);
    font-family: "DIN Neuzeit Grotesk LT W01 BdCn", arial, helvetica, sans-serif;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    -webkit-text-stroke: 1px white;
}

h2,
h3 {
    font-family: "DIN Neuzeit Grotesk LT W01 BdCn", arial, helvetica, sans-serif;
}

.topbar {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    padding: 1em;
    text-align: center;
    text-transform: uppercase;
}

.gallery {
    display: flex;
    gap: 2em;
    justify-content: space-around;
    columns: 1fr 1fr 1fr;
}

.gallery.smaller {
    columns: 1fr 1fr;
}

.fear {
    padding: 1em;
    font-family: "Barlow", sans-serif;
    font-size: 120%;
}

@media screen and (max-width: 600px) {
    .gallery,
    .gallery.smaller {
        flex-direction: column;
        columns: auto;
    }
}

.article-link {
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 1em 2em;
    font-size: 150%;
}

a.article-link,
a.article-link:visited,
a.article-link:active,
a.article-link:link {
    color: white;
}

h2 {
    background-color: #e5554f;
    color: white;
    padding: 0.5em 1em;
    text-align: center;
}

a,
a:link,
a:visited,
a:active {
    color: inherit;
}

header a,
header a:link,
header a:visited,
header a:active,
nav a,
nav a:link,
nav a:visited,
nav a:active {
    text-decoration: none;
    color: var(--nav-fg);
}

.footnotes {
    margin-top: 4em;
    padding: 0 2em;
    font-style: italic;
}

.gallery img {
    max-width: 100%;
}