@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font: 400 16px/22px Roboto, "Helvetica Neue", Arial, sans-serif; color: rgba(0, 0, 0, .87); background: #fff; }
a { color: rgba(0, 0, 0, .87); }
a:focus-visible { outline: 2px solid #2196f3; outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: #fff; padding: 10px; }
.toolbar { height: 64px; padding: 0 24px; display: flex; align-items: center; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .16); position: relative; z-index: 2; }
.toolbar-inner { width: 100%; max-width: 1400px; margin: auto; display: flex; align-items: center; }
.logo { height: 43px; display: block; }
.nav-spacer { flex: 1; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a, .footer a { color: rgba(16, 16, 16, .6); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .02em; padding: 0 16px; height: 36px; line-height: 36px; border-radius: 4px; }
.menu a:hover, .menu a[aria-current=page] { background: rgba(0, 0, 0, .04); color: #101010; }
.context { height: 60px; background: #fff; display: flex; align-items: center; position: relative; z-index: 1; }
.context-inner { width: 100%; max-width: 1400px; margin: auto; padding: 0 24px; }
.context h1 { font-size: 20px; font-weight: 400; line-height: 32px; margin: 0; }
.main { min-height: calc(100vh - 168px); display: flex; flex-direction: column; }
.content { width: 100%; max-width: 1400px; margin: auto; padding: 38px 24px; }
.content h1 { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0 0 16px; }
.content h2 { font-size: 20px; line-height: 32px; font-weight: 500; margin: 24px 0 16px; }
.content p { margin: 0 0 12px; }
.content li { margin: 0 0 5px; }
.content blockquote { margin: 0 0 24px; padding-left: 5px; border-left: 2px solid #a1a1a1; line-height: 200%; background-color: #ededed; }
.content hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .12); margin: 28px 0; }
.footer { height: 44px; display: flex; align-items: center; background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); }
.footer-inner { max-width: 1400px; width: 100%; margin: auto; padding: 0 24px; display: flex; justify-content: flex-end; }
.footer a { height: 36px; line-height: 36px; }
.home-main { background-image: url('assets/home-background.jpg'); background-size: cover; background-position: center; justify-content: center; }
.home { width: 100%; max-width: 1400px; margin: auto; text-align: center; }
.home-cta { padding: 48px 0 66px; color: rgba(255, 255, 255, .87); text-shadow: 0 1px 2px #0004; }
.home-cta h1 { font-size: 56px; line-height: 56px; font-weight: 400; margin: 0 0 16px; }
.home-cta p { font-size: 24px; line-height: 32px; margin: 0; }
.home-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.home-card { width: 316px; margin: 0 37px 37px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12); text-align: left; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s; }
.home-card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, .25); }
.home-card-header { display: flex; align-items: center; padding: 18px 16px; color: #101010; }
.card-icon { font-size: 30px; line-height: 1; margin-right: 12px; color: #0b9bd3; }
.home-card h2 { font-size: 24px; line-height: 28px; font-weight: 500; margin: 0; }
.home-card p { min-height: 112px; margin: 0; padding: 18px; }
.home-card-action { border-top: 2px solid rgba(0, 0, 0, .12); text-align: right; padding: 3px 8px; color: #0b9bd3; text-transform: uppercase; font-size: 14px; font-weight: 500; line-height: 36px; }
.about-logo { display: block; max-width: 329px; width: 100%; height: auto; margin-bottom: 18px; }
.about-sprites { display: block; width: 300px; max-width: 100%; height: auto; }
.mitre { display: block; width: 233px; max-width: 100%; height: auto; margin-bottom: 16px; }

@media (max-width: 899px) {
  .toolbar { padding: 0 16px; }
  .toolbar-inner { justify-content: space-between; }
  .logo { height: 42px; }
  .menu a { padding: 0 9px; }
  .context-inner, .content { padding-left: 24px; padding-right: 24px; }
  .home-cta h1 { font-size: 44px; line-height: 48px; }
  .home-cta p { font-size: 20px; }
  .home-card { margin: 0 18px 28px; }
}
@media (max-width: 480px) {
  .menu a { font-size: 12px; padding: 0 6px; }
  .logo { height: 32px; }
  .home-cta { padding: 42px 18px 48px; }
  .home-cta h1 { font-size: 38px; line-height: 42px; }
  .home-card { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .footer-inner { padding: 0 12px; }
}