html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

input,
button,
select {
  padding: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

button {
  display: block;
  color: #333;
  background-color: rgb(100, 180, 225);
  outline: none;
  cursor: pointer;
}

button:focus {
  border-color: #666;
}

div.svelte-psb86l{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;min-height:100vh;
  padding:10px 0;
  color:#fff;
  background:linear-gradient(320deg, rgb(0, 150, 200), #200122);
  background-size:400% 400%;
  -webkit-animation:svelte-psb86l-background-animate 12s ease infinite;
  -moz-animation:svelte-psb86l-background-animate 12s ease infinite;
  animation:svelte-psb86l-background-animate 12s ease infinite
}
h1.svelte-psb86l{
  text-align:center
}
@-webkit-keyframes svelte-psb86l-background-animate{
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
@-moz-keyframes svelte-psb86l-background-animate{
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
@keyframes svelte-psb86l-background-animate{
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
#form{
  width:90%;
  max-width:400px
}
#form>label{
  display:block;padding-bottom:10px;
  font-size:1.1em
}
#form>input,
#form>select{
  width:100%;
  color:#fff;
  background-color:transparent;
  margin-bottom:20px;
  padding:10px
  }
#form>select > option{
  background-color:#200122
}
#form>select{
  text-transform:capitalize
}
#form>button[type='submit']{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:30px;
  padding:15px 30px;
  color:#fff;
  background-color:#200122;
  border-color:#fff;
  border-radius:5px;
  font-size:1.1em;
  text-transform:uppercase;
  background:linear-gradient(to left, blue, green);
  cursor:pointer
}
#form>button > svg{
  width:25px;
  height:25px;
  margin-left:10px
}
div.svelte-bk7fep{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, auto));
  grid-auto-rows:minmax(120px, auto);
  gap:20px 40px;
  justify-content:center;
  padding:20px 0;
  min-height:400px
}
div.svelte-1nz99rr{
  display:flex;
  flex-direction:column;
  align-items:center
}
div.svelte-1nz99rr>svg{
  width:50px;
  height:50px
}
span.svelte-1nz99rr{
  display:inline-block;
  font-size:1.1em;
  font-weight:400
}
p.svelte-1nz99rr{
  text-align:center;
  font-weight:300;
  word-break:break-word
}
div.svelte-1h0ma34{
  width:90%;
  max-width:600px
}
section.svelte-1h0ma34{
  display:flex;
  height:50px;
  margin-bottom:30px
}
button.svelte-1h0ma34{
  width:100%;
  padding:10px;
  color:#fff;
  background-color:transparent;
  border-color:transparent;
  border-radius:3px;
  font-size:1em;
  transition:background-color ease-out 200ms
}
button.best.active.svelte-1h0ma34{
  background-color:#006f00;
  transition:background-color ease-in 300ms
}
button.worst.active.svelte-1h0ma34{
  background-color:#6f0000;
  transition:background-color ease-in 300ms
}
button.alt.svelte-1h0ma34{
  border-color:#fff;
  background-color:#200122;
  text-transform:uppercase;
  background:linear-gradient(to left, green, blue)
}
p.svelte-1h0ma34{
  text-align:center
}
h2.svelte-1h0ma34{
  text-align:center;
  font-weight:300
}
svg.svelte-c8tyih{
  stroke:currentColor;
  fill:currentColor;
  stroke-width:0;
  width:100%;
  height:auto;
  max-height:100%
}