/* CSS Reset */
*, *::before, *::after { box-sizing: border-box;}
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

@font-face {
    font-family: 'FiraCode';
    src: url('/static/regular.woff2')  format('woff2')
}

html {
  padding: 2em; font-size: 20px; position: relative; background: white; color: black;
  font-family: FiraCode, monaco, 'Courier New', monospace; 
}

body {
  margin: 0 auto;
  max-width: 800px;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1.125rem;
  padding-top: .375rem;
}

p, ul, ol { margin-bottom: 1em; }

.hero {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -40px;
  text-align: center;
}

.hero svg {
  width: 300px;
  height: 300px;
  margin: auto;
  display: block;
}

.hero h1 {
  text-align: center;
  margin-top: 0px;
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 550;
}

h2 {
  font-weight: 180;
  font-size: 2.5rem;
  line-height: 3rem;
  margin-bottom: 0;
  margin-top: 6rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table tbody td {
  border-top: 1px solid grey;
}
table tbody td:first-child {
  text-align: center;
}

table tbody td:nth-child(1) {}
table tbody td:nth-child(2) {
  text-align: right;
  padding-right: 20px;
  width: 10rem;
}
table tbody tr:last-child td {
  border-bottom: 1px solid grey;
}

table input {
  width: 90%;
}

.sparkle
{
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.pricing p {
  margin-bottom: 3px;
}
.pricing em {
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
}

#signup input {
  border-radius: 15px;
  line-height: 1.3em;
  padding: 3px 10px 3px 10px;
  border: 1px solid gray;
}

form#signup input:invalid {
  border: 2px solid red;
}

footer {
  margin-top: 6rem;
}

@media (prefers-color-scheme: dark) {
  html { background: black; color: white }
  .hero svg { filter: invert(100%); }
}