header {
    background: var(--code-background-color);
    color: var(--code-text-color);
}
section {
    padding-top: .5em;
}
#themeswitcher {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em;
}
#input {
    height: 25em;
    width: 100%;
}
.outer {
    float: left;
    width: 25%;
    min-height: 33vh;
    max-height: 300px;
    background: radial-gradient(circle at 75% 75%, red 4%, green 12%, blue 20%, transparent 24%), radial-gradient(circle at 50% 50%, white 10%, lightgrey 20%, darkgrey 30%, black 50%);
}
.inner {
    width: 100%;
    height: 100%;
    min-height: 33vh;
    max-height: 300px;
}
.inner span {
    padding-left: 1em;
}
#output {
    background-color: lightgray;
    color: black;
}
#error, #notSupported {
    visibility: hidden;
    clear: both;
}

.nav_padding {
    padding: 0.5em;
}
.outer-flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-container > div {
    margin: .5em;
}
@media only screen and (max-width: 625px) {
    .outer-flex-container {
      display: flex;
      flex-direction: column;
    }
}