html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  color: #313131;
}

a {
  color: unset;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overscroll-behavior: none;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1d1d1d;
    color: #d9d9d9;
  }
}

main {
  background-image: url("data:image/svg+xml,%3Csvg width='948' height='802' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='-56' width='948' height='858'%3E%3Cellipse cx='474' cy='373' rx='474' ry='429' fill='url(%23a)'/%3E%3C/mask%3E%3Cg mask='url(%23b)' fill='%231D1D1D'%3E%3Cg opacity='.02'%3E%3Cpath d='M74 0h1v1029h-1zM91 0h1v1029h-1zM108 0h1v1029h-1zM125 0h1v1029h-1zM142 0h1v1029h-1zM159 0h1v1029h-1zM176 0h1v1029h-1zM193 0h1v1029h-1zM210 0h1v1029h-1zM227 0h1v1029h-1zM244 0h1v1029h-1zM261 0h1v1029h-1zM278 0h1v1029h-1zM295 0h1v1029h-1zM312 0h1v1029h-1zM329 0h1v1029h-1zM346 0h1v1029h-1zM363 0h1v1029h-1zM380 0h1v1029h-1zM397 0h1v1029h-1zM414 0h1v1029h-1zM431 0h1v1029h-1zM448 0h1v1029h-1zM465 0h1v1029h-1zM482 0h1v1029h-1zM499 0h1v1029h-1zM516 0h1v1029h-1zM533 0h1v1029h-1zM550 0h1v1029h-1zM567 0h1v1029h-1zM584 0h1v1029h-1zM601 0h1v1029h-1zM618 0h1v1029h-1zM635 0h1v1029h-1zM652 0h1v1029h-1zM669 0h1v1029h-1zM686 0h1v1029h-1zM703 0h1v1029h-1zM720 0h1v1029h-1zM737 0h1v1029h-1zM754 0h1v1029h-1zM771 0h1v1029h-1zM788 0h1v1029h-1zM805 0h1v1029h-1zM822 0h1v1029h-1zM839 0h1v1029h-1zM856 0h1v1029h-1zM873 0h1v1029h-1z'/%3E%3C/g%3E%3Cg opacity='.02'%3E%3Cpath d='M75 16h798v1H75zM75 33h798v1H75zM75 50h798v1H75zM75 67h798v1H75zM75 84h798v1H75zM75 101h798v1H75zM75 118h798v1H75zM75 135h798v1H75zM75 152h798v1H75zM75 169h798v1H75zM75 186h798v1H75zM75 203h798v1H75zM75 220h798v1H75zM75 237h798v1H75zM75 254h798v1H75zM75 271h798v1H75zM75 288h798v1H75zM75 305h798v1H75zM75 322h798v1H75zM75 339h798v1H75zM75 356h798v1H75zM75 373h798v1H75zM75 390h798v1H75zM75 407h798v1H75zM75 424h798v1H75zM75 441h798v1H75zM75 458h798v1H75zM75 475h798v1H75zM75 492h798v1H75zM75 509h798v1H75zM75 526h798v1H75zM75 543h798v1H75zM75 560h798v1H75zM75 577h798v1H75zM75 594h798v1H75zM75 611h798v1H75zM75 628h798v1H75zM75 645h798v1H75zM75 662h798v1H75zM75 679h798v1H75zM75 696h798v1H75zM75 713h798v1H75zM75 730h798v1H75zM75 747h798v1H75zM75 764h798v1H75zM75 781h798v1H75zM75 798h798v1H75z'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(401 0 0 443.063 474 373)'%3E%3Cstop stop-color='%23D9D9D9'/%3E%3Cstop offset='1' stop-color='%23D9D9D9' stop-opacity='.15'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  margin: 0 auto;
  max-width: 800px;
  flex: 1 0 auto;
}
@media (prefers-color-scheme: dark) {
  main {
    background-image: url("data:image/svg+xml,%3Csvg width='948' height='802' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='-56' width='948' height='858'%3E%3Cellipse cx='474' cy='373' rx='474' ry='429' fill='url(%23a)'/%3E%3C/mask%3E%3Cg mask='url(%23b)' fill='%231D1D1D'%3E%3Cg opacity='.08'%3E%3Cpath d='M74 0h1v1029h-1zM91 0h1v1029h-1zM108 0h1v1029h-1zM125 0h1v1029h-1zM142 0h1v1029h-1zM159 0h1v1029h-1zM176 0h1v1029h-1zM193 0h1v1029h-1zM210 0h1v1029h-1zM227 0h1v1029h-1zM244 0h1v1029h-1zM261 0h1v1029h-1zM278 0h1v1029h-1zM295 0h1v1029h-1zM312 0h1v1029h-1zM329 0h1v1029h-1zM346 0h1v1029h-1zM363 0h1v1029h-1zM380 0h1v1029h-1zM397 0h1v1029h-1zM414 0h1v1029h-1zM431 0h1v1029h-1zM448 0h1v1029h-1zM465 0h1v1029h-1zM482 0h1v1029h-1zM499 0h1v1029h-1zM516 0h1v1029h-1zM533 0h1v1029h-1zM550 0h1v1029h-1zM567 0h1v1029h-1zM584 0h1v1029h-1zM601 0h1v1029h-1zM618 0h1v1029h-1zM635 0h1v1029h-1zM652 0h1v1029h-1zM669 0h1v1029h-1zM686 0h1v1029h-1zM703 0h1v1029h-1zM720 0h1v1029h-1zM737 0h1v1029h-1zM754 0h1v1029h-1zM771 0h1v1029h-1zM788 0h1v1029h-1zM805 0h1v1029h-1zM822 0h1v1029h-1zM839 0h1v1029h-1zM856 0h1v1029h-1zM873 0h1v1029h-1z'/%3E%3C/g%3E%3Cg opacity='.08'%3E%3Cpath d='M75 16h798v1H75zM75 33h798v1H75zM75 50h798v1H75zM75 67h798v1H75zM75 84h798v1H75zM75 101h798v1H75zM75 118h798v1H75zM75 135h798v1H75zM75 152h798v1H75zM75 169h798v1H75zM75 186h798v1H75zM75 203h798v1H75zM75 220h798v1H75zM75 237h798v1H75zM75 254h798v1H75zM75 271h798v1H75zM75 288h798v1H75zM75 305h798v1H75zM75 322h798v1H75zM75 339h798v1H75zM75 356h798v1H75zM75 373h798v1H75zM75 390h798v1H75zM75 407h798v1H75zM75 424h798v1H75zM75 441h798v1H75zM75 458h798v1H75zM75 475h798v1H75zM75 492h798v1H75zM75 509h798v1H75zM75 526h798v1H75zM75 543h798v1H75zM75 560h798v1H75zM75 577h798v1H75zM75 594h798v1H75zM75 611h798v1H75zM75 628h798v1H75zM75 645h798v1H75zM75 662h798v1H75zM75 679h798v1H75zM75 696h798v1H75zM75 713h798v1H75zM75 730h798v1H75zM75 747h798v1H75zM75 764h798v1H75zM75 781h798v1H75zM75 798h798v1H75z'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(401 0 0 443.063 474 373)'%3E%3Cstop stop-color='%23D9D9D9'/%3E%3Cstop offset='1' stop-color='%23D9D9D9' stop-opacity='.15'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  }
}

header {
  margin: 64px 16px 32px 16px;
  display: inline-block;
}

@media (max-width: 720px) {
  header {
    margin-top: 32px;
  }
}

header h1 {
  font-size: 48px;
  line-height: 125%;
  font-weight: 700;
  margin-bottom: 4px;
  word-break: break-all;
}

header h2 a,
header h2 a:visited,
section p a,
section p a:visited,
h3 a,
h3 a:visited,
footer a,
footer a:visited {
  color: #313131;
}

header h2 a:hover,
section p a:hover,
h3 a:hover,
footer a:hover {
  color: #c05d08; /* orange.5 */
}

@media (prefers-color-scheme: dark) {
  header h2 a,
  header h2 a:visited,
  section p a,
  section p a:visited,
  h3 a,
  h3 a:visited,
  footer a,
  footer a:visited {
    color: #d9d9d9;
  }

  header h2 a:hover,
  section p a:hover,
  h3 a:hover,
  footer a:hover {
    color: #f8a054; /* orange.7 */
  }
}

h2,
header h2 {
  font-size: 24px;
  line-height: 125%;
  font-weight: 600;
  margin-top: 4px;
}

h3 {
  margin: 32px 16px 0px 16px;
  font-size: 24px;
  line-height: 150%;
  font-weight: 400;
}

section {
  margin: 0px 16px;
}

section.cards,
section.promotional-cards {
  margin: 0;
  display: grid;
  column-gap: 32px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 720px) {
  section.promotional-cards {
    margin: 0px 16px;
  }

  section.cards,
  section.promotional-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

p,
section.cards h4 {
  margin: 0;
  font-size: 16px;
  line-height: 150%;
  font-weight: 400;
  overflow-wrap: break-word;
  /* word-break: break-all; */
}

section.promotional-cards {
  margin-top: 160px;
}

@media (max-width: 720px) {
  section.promotional-cards {
    margin-top: 64px;
  }
}

section.promotional-cards a {
  background: rgb(255, 255, 255 / 0);
  padding: 16px;
  margin: 0;
  border-radius: 8px;
  transition: background 0.2s ease;
  text-decoration: none;
}

section.promotional-cards section {
  margin: 0;
}

section.promotional-cards a:visited {
  color: inherit;
}

section.promotional-cards a:hover {
  background: linear-gradient(25deg, #f6821f, #fbad41);
  box-shadow: 0 4px 24px -4px rgb(0 0 0 / 0.1),
    0px 8px 32px -4px rgb(0 0 0 / 20%);
  border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
  section.promotional-cards section {
    border-radius: 8px;
  }
  section.promotional-cards a:hover {
    color: #1d1d1d;
    border-radius: 8px;
  }
}

@media (max-width: 720px) {
  section.promotional-cards a,
  section.promotional-cards a:visited {
    color: #1d1d1d;
    margin-bottom: 25px;

    background: linear-gradient(25deg, #f6821f, #fbad41);
    box-shadow: 0 4px 24px -4px rgb(0 0 0 / 0.1),
      0px 8px 32px -4px rgb(0 0 0 / 20%);
    border-radius: 8px;
  }
}

footer {
  text-align: center;
  flex-shrink: 0;
  padding-bottom: 1rem;
}

footer div.footer-border {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

footer div.footer-center {
  max-width: 640px;
  flex-grow: 1;
}

footer svg .top {
  fill: #d9d9d9;
}
footer svg .bottom {
  fill: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
  footer svg .top {
    fill: #000000;
  }
  footer svg .bottom {
    fill: #313131;
  }
}

footer p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
}

a {
  display: inline-flex;
  align-items: center;
}
a svg {
  margin: 0 0 0 2px;
}

@keyframes animation-center {
  0% {
    transform: translateY(-30%) translateX(-50%);
  }
  50% {
    transform: translateY(30%) translateX(-50%);
  }
  100% {
    transform: translateY(-30%) translateX(-50%);
  }
}

@keyframes animation-left {
  0% {
    transform: translateY(25%) translateX(0%) skew(-40deg, 20deg);
  }
  25% {
  }
  50% {
    transform: translateY(200%) translateX(150%) skew(40deg, 0deg);
  }
  75% {
  }
  100% {
    transform: translateY(25%) translateX(0%) skew(-40deg, 20deg);
  }
}

@keyframes animation-right {
  0% {
    transform: translateY(5%) translateX(0%) skew(40deg, 20deg);
  }
  25% {
  }
  50% {
    transform: translateY(200%) translateX(-150%) skew(-40deg, 0deg);
  }
  75% {
  }
  100% {
    transform: translateY(5%) translateX(0%) skew(40deg, 20deg);
  }
}

.animation_wrapper {
  filter: blur(var(--gradient-blur-radius, 160px));
  z-index: -4;
  top: -360px;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 800px;
  margin: 0 auto;
  position: absolute;
}

@media (max-width: 720px) {
  .animation_wrapper {
    display: none;
  }
}

.animation {
  animation-duration: 17s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
  position: absolute;
  border-radius: 100%;
  opacity: 70%;
}

.animation_center {
  width: 300px;
  height: 300px;
  z-index: -2;
  left: 50%;
  top: 20%;
  animation-name: animation-center;
  background: rgba(246, 130, 31, 0.2);
}

.animation_left {
  width: 300px;
  height: 300px;
  z-index: -1;
  left: 0%;
  top: 0%;
  animation-name: animation-left;
  animation-direction: reverse;
  background: rgba(255, 102, 51, 0.8);
}

.animation_right {
  width: 300px;
  height: 300px;
  z-index: -3;
  right: 0%;
  top: 0%;
  animation-name: animation-right;
  background: rgba(251, 173, 65, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .animation,
  .animation_center,
  .animation_left,
  .animation_right {
    animation: none;
  }
  .animation_center {
    left: 40%;
    top: 20%;
  }
  .animation_left {
    left: 15%;
    top: 15%;
  }
  .animation_right {
    right: 5%;
    top: 15%;
  }
}