/*-- Defaults --*/
html, body, main, section, header, div, article, aside, figure, figcaption, image, iframe, h1, h2, h3, h4, h5, h6, p, table, blockquote {
 margin: 0;
 padding: 0;
}
:root {
 --dark: #171717;
 --gray: #272727;
 --white: #e9e9e9;
 --offwhite: #d9d9d9;
 --darkblue: #0B2265;
 --acc: #2580bf;
 --reg: all .3s ease-in-out;
 --font: 'Fira Sans', sans-serif;
 font-size: 62.5%;
}
::selection {
 color: var(--white);
 background-color: var(--acc);
}
body {
 color: var(--gray);
 font-size: 1.7rem;
 width: 98vw;
 margin: auto;
 line-height: 1.3;
 font-weight: 500;
 font-family: var(--font);
 padding: 3rem 0;
}
.main-nav, h1, h2, h3, h4, h5, h6, .btn {
 font-family: 'Staatliches', cursive;
 letter-spacing: 1px;
}
p {
 margin-bottom: 1em;
}
/* -- Document --*/
body {
 background: var(--offwhite);
}
.main-nav {
  border: 2px solid var(--darkblue);
 border-radius: 10px;
 background-color: #d1d4e8;
 color: var(--darkblue);
 padding: 2rem;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.brand {
 display: flex;
 align-items: center;
}
.brand img {
 height: 60px;
}
.brand h1 {
 padding-top: 1.2rem;
 padding-left: 1.2rem;
}
.nav-links {
 padding-top: 1.2rem;
}
.nav-links a {
 margin-left: 1.5rem;
 transition: var(--reg);
}
a:link {
 color: var(--darkblue);
 text-decoration: none;
}
a:visited {
 color: var(--darkblue);
}
a:hover {
 color: var(--acc);
}
a:active, a.active {
 color: var(--acc);
 text-decoration: underline;
}
main img {
 width: 100%;
 height: auto;
}
.cite {
 font-family: var(--font);
 margin-top: 0;
 font-size: 1.6rem;
 text-align: right;
 display: inline-block;
 width: 100%;
}
header {
 margin: 3rem auto;
}
section {
 display: grid;
 grid-gap: 3.2rem;
 margin: 3rem auto;
}
section.even {
 grid-template-columns: 1fr;
}
.img {
 display: flex;
 flex-direction: column;
 justify-content: center;
}
h2 {
  color: var(--darkblue);
  display: flex;
  justify-content: center;
  margin: 5rem 0;
  text-decoration: underline;
}
h3 {
 color: var(--darkblue);
 align-self: flex-start;
}
.outer {
 order: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
.inner {
 max-width: 100%;
 padding: 4rem 2rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 background: rgba(255, 255, 255, 0.25);
 box-shadow: 0 4px 16px 0 rgba(167, 167, 167, 0.37);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.18);
}
.btn {
 cursor: pointer;
 color: var(--white);
 background-color: var(--darkblue);
 border: none;
 border-radius: 10rem;
 padding: 1.4rem 4rem;
 text-align: center;
 transition: var(--reg);
}
.btn:hover {
 background-color: var(--acc);
}
footer {
 padding: 2rem 2rem 1rem 2rem;
 display: flex;
 direction: row;
 justify-content: space-between;
 font-size: 1.4rem;
}

@media screen and (min-width: 550px) {
 body {width: 98vw;}
}
@media screen and (min-width: 768px) {
 body {width: 86vw;}
 blockquote {width: 50vw;}
}
@media screen and (min-width: 992px) {
 body {width: 84vw;}
 .main-nav {flex-direction: row; justify-content: space-between;}
 section.odd {grid-template-columns: 1fr 1fr;}
 section.even {grid-template-columns: 1fr 1fr;}

}
@media screen and (min-width: 1280px) {
 body {width: 80vw;}
 blockquote {width: 33vw;}
}
@media screen and (min-width: 1440px) {
 body {width: 78vw;}
 section.odd {grid-template-columns: 8fr 4fr;}
 section.even {grid-template-columns: 4fr 8fr;}
}