*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary-background-color: rgb(18, 16, 0);
  --primary-color: #ffb000;
  --link-color: #ffc000;
  --primary-active-color: #ffcc00;
}

hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border-color: darkorange;
  color: var(--link-color);
}

body {
  display: grid;
  grid-template-columns: 1fr 50rem 1fr;
  grid-template-rows: 2rem 1fr 5rem;
  height: 100vh;

  font-family: sans-serif;
  font-weight: lighter;
  line-height: 1.5;
  background-color: var(--primary-background-color);
  color: var(--primary-color);
}

body > main {
  padding-top: 10rem;
  grid-column: 2;
  grid-row: 2;
}

main > img {
  border-radius: 5px;
}

main > h1 {
  text-align: center;
  font-family: serif, serif;
  font-weight: lighter;
  font-size: 3rem;
  margin-bottom: 0;
  margin: 2rem 0 0.5rem;
}

main > h1:hover {
  color: var(--primary-active-color);
}

main > h1 + div.h2 {
  font-size: x-large;
  margin-top: -1em;
  margin-bottom: 2em;
  text-align: center;
  font-weight: lighter;
}

main > h1 + div.h2 + h2 {
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
  font-weight: lighter;
}

div#cta {
  display: flex;
  align-content: center;
  justify-content: center;
}

div#summary {
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "upper-left right"
    "middle-left right"
    "lower-left right";
}

div#summary > div {
  display: flex;
}

div#summary > div > span.embiggen {
  font-size: 4rem;
  float: left;
  align-self: center;
}

div#summary > div > p {
  float: right;
  padding-left: 1rem;
  align-self: center;
}

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

.container > h2 {
  font-weight: lighter;
}

div#pitch {
  width: 100%;
  display: grid;
  gap: 0rem;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "area-1 area-1 area-2 area-3"
    "area-4 area-5 area-5 area-6"
    "area-7 area-8 area-9 area-9"
    "area-10 area-10 area-10 area-10";
  justify-content: center;
  justify-self: center;
}

div#pricing {
  display: grid;
}

div#pricing > h2 {
  font-weight: lighter;
  text-align: center;
  align-self: center;
  margin: 1rem;
}

div.pricing {
  width: 100%;
  height: auto;
  display: grid;
  gap: 1rem;

  grid-template-columns: 250px 250px 250px;

  justify-content: center;
}

div.pricing > div.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;

  padding: 1rem;
  border-radius: 1em;
  border-color: var(--primary-color);
  border-width: 2px;
  border-style: double;
  justify-content: center;
  justify-items: center;
  text-justify: center;
}

div.pricing > div.preferred {
  border-width: 6px;
  border-style: ridge;
}

div.pricing > div.card > h1 {
  font-family: serif, serif;
  font-weight: lighter;
}

div.pricing > div.card > h2 {
  font-family: serif, serif;
  font-weight: lighter;
}

div.pricing > div.card > ul {
  margin-top: 1rem;
  text-align: left;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

div.pricing > div.card > a {
  justify-self: center;
  display: block;
  height: fit-content;
  width: fit-content;
  padding: 1rem;
  border: var(--primary-color);
  font-variant: small-caps;
  font-weight: 900;
  align-content: center;
  text-align: center;
  border-radius: 1rem;
  transition-duration: 200ms;
  color: var(--primary-background-color);
  background-color: var(--primary-color);
}

div.pricing > div.card > a:hover {
  transition-duration: 200ms;
  background-color: var(--primary-active-color);
  color: var(--primary-background-color);
  border-color: var(--primary-color);
}

html {
  scroll-behavior: smooth;
}

.serif {
  font-family: serif, serif;
  font-weight: lighter;
}

a {
  text-decoration: none;
  font-weight: normal;
  color: var(--link-color);
}

a:hover {
  color: var(--primary-active-color);
}

img {
  max-width: 100%;
  display: block;
}

nav {
  grid-row: 1;
  grid-column: 2;
  font-variant: small-caps;
}

nav > div {
  justify-content: center;
  align-items: center;

  height: 1.5rem;
}

nav > div + div {
  padding-top: 1rem;
}

nav div > a {
  padding: 1rem;
  color: var(--primary-color);
}

nav div.left {
  float: left;
}

nav div.right {
  float: right;
}

footer {
  grid-row: 3;
  grid-column: 2;
  display: flexbox;

  font-size: x-small;
  font-weight: lighter;
  align-self: flex-end;
}

footer > div > a {
  height: 2.5rem;
  padding: 1rem 1rem;
}

footer > div.left {
  float: left;
}

footer > div.right {
  float: right;
}

.bordered {
  border: dotted;
  border-width: 2px;
  margin: 0.5rem;
  padding: 1rem;
  transition-duration: 150ms;
}

.bordered:hover {
  border-radius: 20px;
  transition-duration: 300ms;
}

div.copyright {
  font-size: x-small;
  font-weight: lighter;
}

a.purchase {
  display: block;
  height: 100%;
  width: fit-content;
  padding: 1rem;
  border: var(--primary-color);
  font-variant: small-caps;
  font-weight: 900;
  align-content: center;
  text-align: center;
  border-radius: 1rem;
  transition-duration: 200ms;
  color: var(--primary-background-color);
  background-color: var(--primary-color);
}

a.purchase:hover {
  transition-duration: 200ms;
  background-color: var(--primary-active-color);
  color: var(--primary-background-color);
  border-color: var(--primary-color);
}

svg#architecture {
  fill: var(--primary-background-color);
  stroke: var(--primary-color);
  stroke-linecap: round;
}

svg#architecture > g#entities {
  fill: var(--primary-background-color);
  stroke: var(--primary-color);
  stroke-width: 1;
  --cloud-stroke-width: 4;
}

.machine {
  stroke: var(--primary-background-color);
  fill: var(--primary-color);
}

svg#architecture > g#connections {
  stroke: var(--primary-active-color);
  stroke-width: 3;
}

svg#architecture > g#mrw-box {
  fill: transparent;
  font-size: 16pt;
}

svg#architecture text {
  font-family: "Helvetica Neue", sans-serif, sans-serif;
  font-weight: lighter;
  stroke: var(--primary-color);
  stroke-width: 1;
}

svg#architecture g#webhooksd > path.pulsar {
  fill: var(--primary-color);
  /*transform-box: fill-box;
  transform-origin: center center;
  animation: breathe 2s infinite ease-in-out;*/
}

@media (prefers-reduced-motion: no-preference) {
  svg#architecture > g#connections > path.dash-shortest {
    --stroke-dashoffset: -24;
    stroke-dasharray: 6, 18;
  }

  svg#architecture > g#connections > path.dash-medium {
    --stroke-dashoffset: -72;
    stroke-dasharray: 18, 54;
  }

  svg#architecture > g#connections > path.dash-longest {
    --stroke-dashoffset: -144;
    stroke-dasharray: 36, 108;
  }

  use {
    stroke-dasharray: 1;
  }

  .dash-flow {
    animation: dash 5s linear infinite;
  }

  .dash-shortest-quick {
    animation: dash 0.25s linear infinite;
  }

  .dash-1hz {
    animation: dash 1s linear infinite;
  }

  .dash-2hz {
    animation: dash 0.5s linear infinite;
  }

  .dash-3hz {
    animation: dash 0.33s linear infinite;
  }

  .dash-6hz {
    animation: dash 0.1667s linear infinite;
  }

  .dash-5s {
    animation: dash 5s linear infinite;
  }

  .dash-2dot5s {
    animation: dash 2.5s linear infinite;
  }

  @keyframes dash {
    to {
      stroke-dashoffset: var(--stroke-dashoffset);
    }
  }

  @keyframes breathe {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
}

div.legal {
  width: 80%;
}

div.legal > h2 {
  margin-top: 2rem;
}

div.legal > h3 {
  margin-top: 1rem;
}

div.legal > h3 + h4 {
  margin-left: 3rem;
}

div.legal > h3 + div {
  margin-left: 2rem;
}

div.legal > h3 + h4 + div {
  margin-left: 4rem;
}

.indent {
  margin-left: 2rem;
}

div.legal > div.bulletpoints {
  margin-left: 2rem;
}

div.legal > div.contact-info {
  margin-top: 1rem;
}

div.legal > div.contact-info > p {
  font-size: large;
}

div.legal > div.contact-info > p + p {
  margin-left: 1rem;
  font-size: medium;
}

div.legal b {
  font-weight: bold;
}

div.markdown {
  text-align: justify;
}

div.markdown > h1 {
  font-family: serif, serif;
  font-weight: lighter;
  text-align: center;
}

div.markdown > h1 + h2 {
  text-align: center;
  font-variant: small-caps;
}

div.markdown > h1 + h2 + hr ~ * {
  margin-left: 3rem;
  margin-right: 3rem;
}

div.markdown > p {
  padding-top: 0.25rem;
  text-indent: 2rem;
}

div.markdown > table {
  margin: 1rem auto 0rem auto;
}

div.markdown > table > thead > tr > th {
  padding: 0 1rem;
}

div.markdown > table > tbody > tr > td {
  padding: 0 1rem;
}

div.blog > h1 {
  font-family: serif, serif;
  font-weight: lighter;
}

div.blog > ul {
  margin-left: 3rem;
}

div.blog > ul > li > a {
  margin-left: 1rem;
}