:root {
  --page-bg: #031436;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: #ffffff;
}

.page-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(180deg, #051a47 0%, #02102d 100%);
}

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
}

picture {
  width: 100%;
  display: block;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 1025px) {
  .hero-image {
    max-width: 1720px;
  }
}

@media (max-width: 1024px) {
  .page-shell {
    background:
      radial-gradient(circle at top center, rgba(255,255,255,0.08), transparent 35%),
      linear-gradient(180deg, #04163d 0%, #02102d 100%);
  }

  .hero-image {
    max-width: 100%;
  }
}