html {
  font-family: "Noto Sans", sans-serif;
  background: linear-gradient(160deg, #fffde7, #ffe082);
  height: 100%;
}

body {
  height: 100%;
}

[hidden] {
  display: none !important; /* ua styles are weak */
}

main {
  display: grid;
  grid-template-areas:
    "h1"
    "key"
    "stripe"
    "output";
  grid-gap: 10px;
  align-items: center;
}

h1 {
  font-family: "Hepta Slab", serif;
  text-decoration: underline;
  font-weight: lighter;
}

json-viewer,
stripe-elements::part(stripe),
stripe-payment-request::part(stripe) {
  background: none;
}

stripe-elements::part(stripe) {
  background-color: whitesmoke;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  transition: border-bottom 0.2s ease;
}

stripe-elements[focused]::part(stripe) {
  border-bottom-color: #6200ee;
  border-bottom-width: 2px;
}

stripe-elements:not([publishable-key])::part(stripe) {
  display: none;
}

#fallback {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(2, auto);
}

stripe-payment-request {
  grid-area: stripe;
}

json-viewer {
  grid-area: output;
  color: #212529;
  --json-viewer-key-color: #d9480f;
  --json-viewer-boolean-color: #0b7285;
  --json-viewer-number-color: #087f5b;
  --json-viewer-null-color: #c92a2a;
  --json-viewer-string-color: #0b7285;
}

mwc-textfield {
  grid-area: key;
}

#reqs {
  grid-area: reqs;
}