html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans","Helvetica Neue",sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0 auto;
  padding: 0;
  max-width: 48.2rem;
  background: linear-gradient(to bottom, rgba(223, 242, 245, 0.79) 0%, rgba(255, 255, 255, 1) 30%);
}

button {
  cursor: pointer;
}

a {
  color: rgb(80, 80, 80);
  border-bottom: 1px dotted rgba(50, 50, 50, 0.8);
  text-decoration: none;
}

header {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  padding: 0 3rem;
  margin: 2.5rem 0;
}

header h1 {
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

header h1 img {
  padding: 0.5rem;
}

header h1 .box {
  color: rgba(0, 52, 89, 1);
}

header h1 .kite {
  color: rgba(1, 125, 167, 1);
}

header h2 {
  font-size: 4rem;
  margin: 2rem 0;
  padding: 0;
  text-align: center;
  color: rgba(0, 52, 89, 1);
}

header p {
  font-size: 1.2rem;
  margin: 0 0 2.5rem 0;
  padding: 0;
  text-align: left;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

.cta {
  display: block;
  margin: 0;
  border-radius: 10px;
  font-size: 2rem;
  padding: 1rem;
  text-decoration: none;
  color: rgb(250, 250, 250);
  background-color: rgba(0, 168, 232, 1);
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .38);
  text-align: center;
}

.cta:hover {
  box-shadow: 0 4px 6px rgba(50, 50, 63, .21), 0 1px 3px rgba(0, 0, 0, .58);
}

.actions {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  padding: 0 3rem;
  margin: 2.5rem 0;
}

.blurb {
  margin: 2rem 0;
}

.blurb h3 {
  font-size: 1.5rem;
  color: rgba(0, 52, 89, 1);
}

.blurb ul {
  list-style: square;
  padding: 0 1.5rem;
  margin: 0;
}

.blurb li,
.blurb p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  line-height: 1.5;
}

.code-block .CodeMirror {
  height: 38rem;
}

.code-block .CodeMirror-lines {
  padding: 1.5rem;
}

.code-block button {
  font-size: 1.1rem;
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 5px;
  border: 0;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .38);
  color: rgb(250, 250, 250);
  background-color: rgba(1, 125, 167, 1);
}

.code-block a {
  margin: 0 0.5rem;
}

.response {
  display: none;
}

.response .CodeMirror {
  height: 20rem;
}

.response .CodeMirror-lines {
  padding: 1rem;
}

footer {
  margin: 2rem 1rem 0;
  color: rgba(100, 100, 100, 0.75);
  font-size: 0.9rem;
  text-align: center;
}

.modal {
  border: none;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .38);
  border-radius: 10px;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal + .backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal header {
  flex: 0 1 10%;
  height: 2rem;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 0.25rem 0;
}

.modal header .close {
  font-size: 1.5rem;
  border: 0;
  background: none;
}

.modal main {
  flex: 0 2 90%;
}

.modal .loader,
.modal .errorMsg {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  width: 60vw;
  height: 40vh;
}

form {
  width: 80%;
}

form .form-row {
  display: flex;
  flex-flow: column wrap;
  margin: 1.5rem 0;
  font-size: 1.2rem;
}

form input {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  padding: 0.5rem;
  border: 0;
  border-bottom: 1px solid rgba(50, 50, 50, 0.5);
  border-radius: 0;
  outline: none;
  width: 100%;
}

form button {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  border-radius: 5px;
  border: 1px solid rgb(50, 50, 50);
  color: rgb(50, 50, 50);
  background: rgba(0, 0, 0, 0);
  text-align: center;
}

form button:disabled {
  color: rgba(50, 50, 50, 0.5);
}

form .StripeElement {
  margin: 0.5rem 0;
  background-color: white;
  padding: 8px 12px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(50, 50, 50, 0.5);
}

form .StripeElement--invalid {
  border-color: #fa755a;
}

form .StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

form [role=alert] {
  margin: 0.5rem 0 0;
  color: rgb(240, 0, 0);
}

.payments-block form {
  display: none;
}

.payment-request-block {
  width: 50%;
}

/* hack for Stripe's button display being cut off at 24px */
.payment-request-block iframe {
  height: 48px !important;
}

dialog.payment-success {
}

dialog.payment-success .content {
  display: flex;
  flex-flow: column wrap;
}

dialog.payment-success .content textarea {
  background-color: rgba(220, 240, 240, 0.8);
  padding: 0.5rem;
  font-size: 1rem;
  width: 30rem;
  height: 10rem;
  border: 0;
}

dialog.payment-success .content button {
  font-size: 1.1rem;
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 5px;
  border: 0;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .38);
  color: rgb(250, 250, 250);
  background-color: #00b289;
}


/* spinner from http://tobiasahlin.com/spinkit/ */
.spinner {
  width: 40px;
  height: 40px;
  background-color: #00b289;
  margin: 10px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }

  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}