:root {
  --bg: #fff;
  --text: #4b4b4b;
  --border: rgba(0,0,0,.1);
  --input-bg: #fff;
  --input-border: rgba(0,0,0,.2);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#121212;
    --text:#fff;
    --border:rgba(255,255,255,.1);
    --input-bg:#1e1e1e;
    --input-border:rgba(255,255,255,.2);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  font-family:"Fira Sans","Cantarell",sans-serif;
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
main{width:100%;max-width:600px;padding:0 1rem}
form{max-width:500px;margin:0 auto}
h1,h2{text-align:center;margin:0}
h1{font-size:2em;margin-bottom:1.5rem}
h2{font-size:1.5em;margin:1.5rem 0 1rem}
p{margin:0 0 1rem;text-align:center}
a{color:var(--text);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
fieldset{border:1px solid var(--border);border-radius:6px;padding:1rem;margin:0 0 1.5rem}
legend{padding:0 .5rem;font-weight:600}
label{display:block;margin:.75rem 0 .25rem;font-weight:500}
:is(input,select,textarea){
  width:100%;
  padding:.5rem .75rem;
  border:1px solid var(--input-border);
  border-radius:4px;
  background:var(--input-bg);
  color:var(--text);
  font:inherit;
}
textarea{resize:vertical;min-height:80px}
select{cursor:pointer}
button{
  background:var(--text);
  color:var(--bg);
  border:none;
  padding:.75rem 1.5rem;
  border-radius:4px;
  font:600 1rem inherit;
  cursor:pointer;
  margin:.5rem 0 0 auto;
}
button:disabled{opacity:.5;cursor:not-allowed}
#duration-warning{color:#ff6b6b;margin:.5rem 0 0;font-size:.9rem}
ul{margin:0 0 1rem;padding-left:1.5rem;text-align:center}
ul li{margin:.25rem 0}