.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; }
  .flex.left {
    justify-content: flex-start; }

html,
body {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem; }

:root {
  --blue: rgb(7, 81, 207); }

nav {
  height: 74px;
  border-bottom: 1px solid black;
  background: white; }
  nav ul,
  nav li {
    list-style: none;
    font-family: "IBM Plex Mono", monospace; }
  nav ul {
    padding: 0; }

h1,
h2,
h3,
h4,
h5 {
  font-family: "IBM Plex Mono", monospace;
  color: #0751cf;
  text-rendering: geometricPrecision; }

.fs-1 {
  font-size: 2em; }

.h1,
h1 {
  font-size: 2em; }

.fs-2 {
  font-size: 1.5em; }

.h2,
h2 {
  font-size: 1.5em; }

.fs-3 {
  font-size: 1.17em; }

.h3,
h3 {
  font-size: 1.17em; }

.fs-4 {
  font-size: 1em; }

.h4,
h4 {
  font-size: 1em; }

.fs-5 {
  font-size: 0.83em; }

.h5,
h5 {
  font-size: 0.83em; }

p.subheading {
  font-size: 1.1rem;
  color: #4c5461;
  line-height: 1.4rem; }

.mt-1 {
  margin-top: 1rem; }

.mb-1 {
  margin-bottom: 1rem; }

.pt-1 {
  padding-top: 1rem; }

.pb-1 {
  padding-bottom: 1rem; }

.mt-2 {
  margin-top: 1.5rem; }

.mb-2 {
  margin-bottom: 1.5rem; }

.pt-2 {
  padding-top: 1.5rem; }

.pb-2 {
  padding-bottom: 1.5rem; }

.mt-3 {
  margin-top: 2rem; }

.mb-3 {
  margin-bottom: 2rem; }

.pt-3 {
  padding-top: 2rem; }

.pb-3 {
  padding-bottom: 2rem; }

.mt-4 {
  margin-top: 3rem; }

.mb-4 {
  margin-bottom: 3rem; }

.pt-4 {
  padding-top: 3rem; }

.pb-4 {
  padding-bottom: 3rem; }

.mt-5 {
  margin-top: 4rem; }

.mb-5 {
  margin-bottom: 4rem; }

.pt-5 {
  padding-top: 4rem; }

.pb-5 {
  padding-bottom: 4rem; }

.gap-1 {
  gap: 1rem; }

.gap-2 {
  gap: 1.5rem; }

.gap-3 {
  gap: 2rem; }

.gap-4 {
  gap: 3rem; }

.gap-5 {
  gap: 4rem; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

a {
  color: black; }
  a:visited {
    color: black; }
  a.btn {
    padding: 12px;
    text-decoration: none;
    text-align: center; }
    a.btn.primary {
      border: 1px solid var(--blue);
      background: var(--blue);
      color: white; }
    a.btn.secondary:hover {
      text-decoration: underline; }
    a.btn.cta {
      padding: 18px;
      font-size: 1.2em; }

.embed {
  border: 2px solid var(--blue);
  border-radius: 12px;
  box-shadow: 6px 6px 0 #074dcf0f, -6px -6px 0 #074dcf0f;
  max-width: 100%;
  max-height: 100%; }

main {
  padding: 0 1rem;
  background: color-mix(in oklab, #dbeafe 40%, transparent);
  min-height: 100vh; }

.grid {
  display: grid;
  place-items: start;
  grid-template-columns: repeat(2, 1fr); }

@media all and (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr; }
  br {
    display: none; } }

@media all and (min-width: 576px) {
  .container {
    width: 540px;
    margin: 0 auto; } }

@media all and (min-width: 768px) {
  .container {
    width: 720px;
    margin: 0 auto; } }

@media all and (min-width: 992px) {
  .container {
    width: 960px;
    margin: 0 auto; } }

@media all and (min-width: 1200px) {
  .container {
    width: 1140px;
    margin: 0 auto; } }

@media all and (min-width: 1400px) {
  .container {
    width: 1320px;
    margin: 0 auto; } }

.font-primary {
  font-family: "IBM Plex Sans", sans-serif; }

.font-monospace {
  font-family: "IBM Plex Mono", monospfont-monospace; }

.fw-normal {
  font-weight: 400; }

.fw-semibold {
  font-weight: 500; }

.fw-bold {
  font-weight: 600; }