stylesheet.css

body {
    line-height: 1.6em;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

select {
    padding: .5em
}

form {
    display: flex;
}

#input {
    width: 99%;
    padding: 1em;
    box-sizing: border-box;
}

pod {
    display: block;
    padding-bottom: 2em;
}

summary {
    padding: 1em;
    cursor: pointer;
    border: solid thin;
    margin-bottom: 1em;
}

/* animated loader icon */

.loading {
    width: 0;
    height: 0;
    padding: 2em;
    border-radius: 3em;
    border: thick solid silver;
    border-bottom-color: dimgray;
    animation: rotate 3s infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(2turn);
    }
}

/* dark-theme toggle */

.dark-theme {
    color: dimgray;
    background: black;
    filter: invert(1) hue-rotate(180deg);
}

.toggle {
    width: 2.2em;
    height: 1.2em;
    margin: 1.2em;
    background: gray;
    border-radius: 1em;
    display: inline-flex;
}

#checkbox {
    width: 1em;
    height: 1em;
    margin: auto;
    outline: none;
    appearance: none;
    border-radius: 1em;
    transition: all .5s;
    background-color: white;
}

#checkbox:checked {
    transform: translate(.5em);
}

#checkbox:not(:checked) {
    transform: translate(-.5em);
}