1body {
  2  max-width: 600px;
  3  margin: 0 auto;
  4  padding: 1em;
  5  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
  6    Arial, sans-serif;
  7  -webkit-text-size-adjust: 100%;
  8  line-height: 1.4;
  9  background: #ececec;
 10  color: #212121;
 11}
 12a {
 13  color: #225c8d;
 14  text-decoration: none;
 15}
 16a:visited {
 17  color: #378f9a;
 18}
 19a:hover {
 20  color: #6fa349;
 21}
 22label {
 23  display: inline-block;
 24  margin-bottom: 0.25em;
 25}
 26button,
 27input,
 28textarea {
 29  -webkit-appearance: none;
 30  box-sizing: border-box;
 31  width: 100%;
 32  margin: 0;
 33  padding: 0.5em 0.75em;
 34  font-family: inherit;
 35  font-size: 100%;
 36  line-height: 1.4;
 37  background: #fff;
 38  border: 1px solid #d1d1d1;
 39  border-radius: 5px;
 40  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
 41}
 42input,
 43textarea {
 44  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
 45}
 46textarea {
 47  display: block;
 48  overflow: auto;
 49}
 50button {
 51  background: #3c76a7;
 52  background: linear-gradient(180deg, #3c76a7, #225c8d);
 53  border-color: #225c8d;
 54  color: #fff;
 55}
 56button[type='submit'] {
 57  background: #6fa349;
 58  background: linear-gradient(180deg, #6fa349, #568a30);
 59  border-color: #568a30;
 60}
 61button[type='reset'],
 62button.warning {
 63  background: #d79435;
 64  background: linear-gradient(180deg, #d79435, #be7b1c);
 65  border-color: #be7b1c;
 66}
 67button:active {
 68  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
 69}
 70input[type='file'] {
 71  max-width: 100%;
 72  padding: 0;
 73  background: none;
 74  border: 0;
 75  border-radius: 0;
 76  box-shadow: none;
 77}
 78
 79input[type='file']::-webkit-file-upload-button {
 80  -webkit-appearance: none;
 81  box-sizing: border-box;
 82  margin: 0;
 83  padding: 0.5em 0.75em;
 84  font-family: inherit;
 85  font-size: 100%;
 86  line-height: 1.4;
 87  background: linear-gradient(180deg, #3c76a7, #225c8d);
 88  border: 1px solid #225c8d;
 89  color: #fff;
 90  border-radius: 5px;
 91  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
 92}
 93input[type='file']::-webkit-file-upload-button:active {
 94  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
 95}
 96input[type='file']::-ms-browse {
 97  box-sizing: border-box;
 98  margin: 0;
 99  padding: 0.5em 0.75em;
100  font-family: inherit;
101  font-size: 100%;
102  line-height: 1.4;
103  background: linear-gradient(180deg, #3c76a7, #225c8d);
104  border: 1px solid #225c8d;
105  color: #fff;
106  border-radius: 5px;
107  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
108}
109input[type='file']::-ms-browse:active {
110  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
111}
112
113@media (prefers-color-scheme: dark) {
114  body {
115    background: #212121;
116    color: #dedede;
117  }
118  a {
119    color: #61afef;
120    text-decoration: none;
121  }
122  a:visited {
123    color: #56b6c2;
124  }
125  a:hover {
126    color: #98c379;
127  }
128  input,
129  textarea {
130    background: #414141;
131    border-color: #363636;
132    color: #dedede;
133  }
134}