@font-face {
  font-family: "Army Wide";
  src: url("../fonts/army_wide.woff") format("woff");
  font-display: swap;
}
@font-face {
  /* Font Awesome Free 6.6.0, Brands OFL and icons CC BY 4.0. */
  font-family: "Font Awesome 6 Brands";
  src: url("../fonts/fa-brands-400.woff2") format("woff2");
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { box-sizing: border-box; font-size: 62.5%; }
body { margin: 0; background: #212121; color: #dadada; font: 400 1.8em/1.8em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; }
a { color: #42a5f5; font-weight: 500; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.wrapper { display: flex; min-height: 100vh; flex-direction: column; width: 100%; }
.container { width: 100%; max-width: 90rem; margin: 1rem auto; padding: 0 2rem; }
.navigation { width: 100%; height: 6rem; }
.navigation a { color: #dadada; font-size: 1.7rem; font-weight: 600; }
.navigation a:hover, .navigation a:focus { color: #42a5f5; }
.navigation .navigation-title { font: 400 1.7rem "Army Wide", sans-serif; letter-spacing: .1rem; text-transform: uppercase; }
.navigation-list { float: right; margin: 0; list-style: none; }
.navigation-item { position: relative; float: left; margin: 0; }
.navigation-item a { margin: 0 1rem; }
#menu-toggle, .menu-button { display: none; }
.content { display: flex; flex: 1; margin: 1.6rem 0 3.2rem; }
.page header { margin: 6.4rem 0 3.2rem; }
.page h1 { margin: 0; font: 400 4.2rem/1.1 "Army Wide", sans-serif; }
.page p { text-align: justify; }
p { margin: 2rem 0; }
.centered { display: flex; align-items: center; justify-content: center; }
.about { text-align: center; }
.about h1 { margin: 2rem 0 .5rem; font: 400 4.2rem/3.6rem "Army Wide", sans-serif; }
.about h2 { margin: 1rem 0 .5rem; font-size: 2.4rem; font-weight: 600; }
.avatar img { width: 28rem; height: auto; }
.social-links { margin: 3rem 0 1rem; padding: 0; list-style: none; }
.social-links li { position: relative; display: inline-block; }
.social-links a { margin: 0 1rem; color: #dadada; font-size: 1.6rem; text-transform: uppercase; }
.social-links a:hover, .social-links a:focus { color: #42a5f5; }
.fa { display: inline-block; font: normal 400 1em/1 "Font Awesome 6 Brands"; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.fa-facebook, .fa-instagram, .fa-youtube { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.fa-2x { font-size: 2em; }
.fa-facebook::before { content: "\f39e"; }
.fa-instagram::before { content: "\f16d"; }
.fa-youtube::before { content: "\f167"; }
.fa-at::before { content: "@"; }
.youtube { position: relative; height: 0; overflow: hidden; padding: 56.25% 0 0; margin-bottom: 2rem; }
.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.footer { width: 100%; margin-bottom: 1rem; font-size: 1.6rem; line-height: 2rem; text-align: center; }

@media (max-width: 768px) {
  body { font-size: 1.6em; line-height: 1.6em; }
  .content { margin: 1rem 0 1.6rem; }
  .navigation { height: auto; }
  .navigation > .container { display: flex; min-height: 6rem; align-items: center; flex-wrap: wrap; }
  .navigation-list { position: relative; top: 0; z-index: 5; flex-basis: 100%; visibility: hidden; width: 100%; max-height: 0; padding: 0; overflow: hidden; opacity: 0; background: #212121; border-block: 2px solid #424242; transition: opacity .25s, max-height .15s linear; }
  .navigation-item { float: none; text-align: center; }
  .navigation-item a { line-height: 5rem; }
  #menu-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #menu-toggle:checked + .menu-button + .navigation-list { visibility: visible; max-height: 100rem; opacity: 1; }
  #menu-toggle:focus-visible + .menu-button { outline: auto; }
  .menu-button { display: flex; width: 4rem; height: 6rem; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; }
  .menu-icon { display: block; width: 2.4rem; height: 1.8rem; background: linear-gradient(to bottom, currentColor 0 2px, transparent 2px 8px, currentColor 8px 10px, transparent 10px 16px, currentColor 16px 18px); }
  .about h2 { font-size: 2rem; }
  .social-links a { font-size: 1.5rem; }
  .footer { font-size: 1.5rem; }
}