body {
    margin: 0;
    padding: 0;
}

.theme {
    display: none;
}

.theme-button {
    cursor: pointer;
    display: inline-block;
    padding: .3em .6em;
    border-radius: .5em;
    transition: background .5s, color .5s;
}

.theme-button-wrapper {
    cursor: default;
    user-select: none;
}

.wrapper {
    font: 1em sans-serif;
    min-height: calc(100vh - 4em);
    padding: 2em 4em;
    transition: background .5s, color .5s;
}

.currently-selected {
    display: none;
}

h1 {
    margin-top: 0;
}

code {
    font: 1.2em monospace;
    display: inline-block;
    padding: 1em;
    margin-left: 1em;
    margin-right: 1em;
    min-width: 30em;
    transition: background .1s, color .1s;
}

pre {
    margin: 0;
    padding: 0;
}

form label {
    display: inline-block;
    width: 10em;
}

form input[type="text"],
form input[type="number"],
form select {
    width: 14em;
    padding: .2em .4em;
    box-sizing: border-box; /* Ensure that input and select elements have the same size */
    border-width: 1px;
    border-style: solid;
    transition: background .5s, color .5s, border .5s;
}

form input[type="reset"],
form input[type="submit"] {
    padding: .3em .6em;
    border-width: 1px;
    border-style: solid;
    transition: background .5s, color .5s, border .5s;
}

#theme-light:checked ~ .wrapper {
    color: #000;
    background: #fff;
}

#theme-pink:checked ~ .wrapper {
    background: #fde;
    color: #000;
}

#theme-red:checked ~ .wrapper {
    background: #fcc;
    color: #000;
}

#theme-orange:checked ~ .wrapper {
    background: #feb;
    color: #000;
}

#theme-blue:checked ~ .wrapper {
    background: #def;
    color: #000;
}

#theme-dark:checked ~ .wrapper {
    background: #222;
    color: #eee;
}

#theme-light:checked ~ .wrapper .theme-button {
    background: #45f;
    color: #fff;
}

#theme-pink:checked ~ .wrapper .theme-button {
    background: #f6b;
    color: #fff;
}

#theme-red:checked ~ .wrapper .theme-button {
    background: #d22;
    color: #fff;
}

#theme-orange:checked ~ .wrapper .theme-button {
    background: #f90;
    color: #fff;
}

#theme-blue:checked ~ .wrapper .theme-button {
    background: #45f;
    color: #fff;
}

#theme-dark:checked ~ .wrapper .theme-button {
    background: #444;
    color: #fff;
}

#theme-light:checked ~ .wrapper .theme-button:hover,
#theme-light:checked ~ .wrapper .theme-button.light {
    background: #78f;
}

#theme-pink:checked ~ .wrapper .theme-button:hover,
#theme-pink:checked ~ .wrapper .theme-button.pink {
    background: #f9c;
}

#theme-red:checked ~ .wrapper .theme-button:hover,
#theme-red:checked ~ .wrapper .theme-button.red {
    background: #f66;
}

#theme-orange:checked ~ .wrapper .theme-button:hover,
#theme-orange:checked ~ .wrapper .theme-button.orange {
    background: #fb4;
}

#theme-blue:checked ~ .wrapper .theme-button:hover,
#theme-blue:checked ~ .wrapper .theme-button.blue {
    background: #78f;
}

#theme-dark:checked ~ .wrapper .theme-button:hover,
#theme-dark:checked ~ .wrapper .theme-button.dark {
    background: #666;
}

#theme-light:checked ~ .wrapper code {
    background: #ddd;
    color: #000;
}

#theme-pink:checked ~ .wrapper code {
    background: #fbe;
    color: #000;
}

#theme-red:checked ~ .wrapper code {
    background: #faa;
    color: #000;
}

#theme-orange:checked ~ .wrapper code {
    background: #fc9;
    color: #000;
}

#theme-blue:checked ~ .wrapper code {
    background: #bcf;
    color: #000;
}

#theme-dark:checked ~ .wrapper code {
    background: #444;
    color: #fff;
}

#theme-light:checked ~ .wrapper .currently-selected.light,
#theme-pink:checked ~ .wrapper .currently-selected.pink,
#theme-red:checked ~ .wrapper .currently-selected.red,
#theme-orange:checked ~ .wrapper .currently-selected.orange,
#theme-blue:checked ~ .wrapper .currently-selected.blue,
#theme-dark:checked ~ .wrapper .currently-selected.dark {
    display: inline;
}

#theme-light:checked ~ .wrapper input[type="text"],
#theme-light:checked ~ .wrapper input[type="number"],
#theme-light:checked ~ .wrapper select {
    background: #fff;
    color: #000;
    border-color: #000;
}

#theme-pink:checked ~ .wrapper input[type="text"],
#theme-pink:checked ~ .wrapper input[type="number"],
#theme-pink:checked ~ .wrapper select {
    background: #fbd;
    color: #000;
    border-color: #f6a;
}

#theme-red:checked ~ .wrapper input[type="text"],
#theme-red:checked ~ .wrapper input[type="number"],
#theme-red:checked ~ .wrapper select {
    background: #faa;
    color: #000;
    border-color: #c66;
}

#theme-orange:checked ~ .wrapper input[type="text"],
#theme-orange:checked ~ .wrapper input[type="number"],
#theme-orange:checked ~ .wrapper select {
    background: #fd8;
    color: #000;
    border-color: #f95;
}

#theme-blue:checked ~ .wrapper input[type="text"],
#theme-blue:checked ~ .wrapper input[type="number"],
#theme-blue:checked ~ .wrapper select {
    background: #bcf;
    color: #000;
    border-color: #67e;
}

#theme-dark:checked ~ .wrapper input[type="text"],
#theme-dark:checked ~ .wrapper input[type="number"],
#theme-dark:checked ~ .wrapper select {
    background: #444;
    color: #fff;
    border-color: #666;
}

#theme-light:checked ~ .wrapper input[type="reset"],
#theme-light:checked ~ .wrapper input[type="submit"] {
    background: #ccc;
    color: #000;
    border-color: #aaa;
}

#theme-pink:checked ~ .wrapper input[type="reset"],
#theme-pink:checked ~ .wrapper input[type="submit"] {
    background: #f39;
    color: #fff;
    border-color: #f06;
}

#theme-red:checked ~ .wrapper input[type="reset"],
#theme-red:checked ~ .wrapper input[type="submit"] {
    background: #f44;
    color: #fff;
    border-color: #f22;
}

#theme-orange:checked ~ .wrapper input[type="reset"],
#theme-orange:checked ~ .wrapper input[type="submit"] {
    background: #f60;
    color: #fff;
    border-color: #e40;
}

#theme-blue:checked ~ .wrapper input[type="reset"],
#theme-blue:checked ~ .wrapper input[type="submit"] {
    background: #45f;
    color: #fff;
    border-color: #34b;
}

#theme-dark:checked ~ .wrapper input[type="reset"],
#theme-dark:checked ~ .wrapper input[type="submit"] {
    background: #333;
    color: #fff;
    border-color: #555;
}