body {

max-width: 990px;

margin: 0 auto;

padding: 1em;

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',

Arial, sans-serif;

-webkit-text-size-adjust: 100%;

line-height: 1.4;

background: #212121;

color: #dedede;

}

a {

color: #61afef;

text-decoration: none;

}

a:visited {

color: #56b6c2;

}

a:hover {

color: #98c379;

}

h6 {

margin-top: 1.5em;

margin-bottom: 0.5em;

}

h1 {

margin-top: 0.5em;

}

label {

display: inline-block;

margin-bottom: 0.25em;

}

div.result {

-webkit-appearance: none;

box-sizing: border-box;

margin: 0;

padding: 0.5em 0.75em;

font-family: inherit;

font-size: 100%;

line-height: 1.4;

background: #414141;

color: #dedede;

border: 1px solid #363636;

border-radius: 5px;

box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);

}

div.result {

width: 100%;

box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);

}

textarea {

display: block;

overflow: auto;

}

button {

background: #3c76a7;

background: linear-gradient(180deg, #3c76a7, #225c8d);

border-color: #225c8d;

color: #fff;

}

button[type='submit'] {

background: #6fa349;

background: linear-gradient(180deg, #6fa349, #568a30);

border-color: #568a30;

}

button[type='reset'] {

background: #d79435;

background: linear-gradient(180deg, #d79435, #be7b1c);

border-color: #be7b1c;

}

button:active {

box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);

}

textarea.code {

font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;

}

@media (prefers-color-scheme: light) {

body {

background: #ececec;

color: #212121;

}

a {

color: #225c8d;

}

a:visited {

color: #378f9a;

}

a:hover {

color: #6fa349;

}

input,

textarea,

div.result {

background: #fff;

border-color: #d1d1d1;

color: #212121;

}

}

@media (min-width: 540px) {

#navigation {

list-style: none;

padding: 0;

}

#navigation li {

display: inline-block;

}

#navigation li:not(:first-child)::before {

content: ' | ';

}

}