*::-webkit-scrollbar, html .terminal-scroller::-webkit-scrollbar {
    width:1em;
    height:1em;
    display:inline-block;
    border-radius:0.5em;
    background-color:transparent;
}
*::-webkit-scrollbar-thumb, html .terminal-scroller::-webkit-scrollbar-thumb {
    background-color:rgba(255,255,255,0.2);
    border-radius:10em;
    background-clip: padding-box;
    border:0.4em solid transparent;
    display:none;
}
*:hover::-webkit-scrollbar-thumb, html .terminal-scroller:hover::-webkit-scrollbar-thumb {
    display:block;
}
html .terminal-scroller {
    scrollbar-color:unset;
    scrollbar-width:unset;
}

html, body, h2, li, button, p {
    font-family: 'Monda';
}
#shell {
    font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro", source-code-pro, monospace;
}
html, body {
    margin:0;
    padding:0;

    height:100%;
    width:100%;
    overflow-x:hidden;
}
body {
    font-size:0.8em;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
main {
    display:flex;
    height: calc(100% - 72px); /* 72px = height of header */
    border-radius:0.5em;
}
body .hidden {
    display:none;
}
.material-symbols-outlined {
    vertical-align: middle;
}
/**
 * Header + Footer
 **/
footer {
    position:fixed;
    bottom:0;
}
header, footer {
    padding:1.25em 2em;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
}
.header-group {
    display:flex;
    flex-grow: 1;
    flex-direction:row;
}
.header-right {
    justify-content:right;
}
header li {
    list-style:none;
}
header li a {
    text-decoration:none;
}
header ul {
    display:flex;
    flex-direction:row;
    gap:2em;
}

/**
 * IDE
 **/
.ide {
    margin-left: auto;
    margin-right: auto;
    
    display:flex;
    flex-grow: 1;
    flex-direction:row;
    gap: 4em;
    max-width:100em;
    justify-content:center;
    
    padding:0 1em 1em 1em;
    box-sizing:border-box;
}
.ide-wrapper {
    min-width:33em;
    max-width:75em;
    display:flex;
    flex-direction:column;
    flex-grow:3;
}
.editor-wrapper, .output-wrapper {
    display: flex;
    flex-direction: column;
    position:relative;

    width: 100%;
    box-sizing:border-box;
    
    padding:4.5em 0 0 0;
}
.editor-wrapper {
    flex-grow: 1;
    border-radius:1em;
}
#editor, #shell {
    background-color:transparent;
    flex-grow: 1;
}
#editor .ace_gutter {
    background-color: transparent;
}
#editor .ace_gutter-cell {
    font-size:0.85em;
    line-height: 230%;
    opacity:0.25;
}
#editor .ace_print-margin {
    display:none;
}
summary {
    list-style: none;
}
details summary::-webkit-details-marker,summary::marker {
    display:none;
}
/* HACK: to prevent extra newline */
details + br {
    display:none;
}
button {
    outline: none;
    border-radius: 0.25em;
    padding: 0 0.75em;
    cursor: pointer;

    background-color: transparent;
}
.ide-header button {
    font-size:0.95em;
    line-height:1.5em;
    margin:0.5em 0.5em 0 0;
    height: 2.5em;
}
.ide-header button.icon {
    padding-top:0.25em;
}
.presentation .ide-header .icon {
    display:none;
}
button:disabled {
    opacity:0.5;
}
button:not(.icon) .material-symbols-outlined {
    font-size: 1.25em;
    margin-left: -0.15em;
}
button.icon {
    padding: 1em 0.8em;
    border: none;
    font-size:1em;
    margin-right:0;
}
.ide-header .icon {
    padding: 0.5em 0.8em;
    margin-right:0.5em;
}
button.icon span {
    font-size:1.75em;
}
button.icon:hover {
    border:none;
    background-color:transparent;
}
#run {
    margin-right:-0.25em;
}
.ide-header {
    position:absolute;
    top:0.75em;
    left:0;
    right:0;
    padding:0 1.5em 0 2em;
    display:flex;
    flex-direction:row;
}
.ide-header div {
    flex-grow: 1;
    display:flex;
    flex-direction:row;
}
.ide-header-right {
    justify-content:end;
}
.ide-header h2 {
    margin-top:1.25em;
}
h2 {
    text-transform:uppercase;
    font-size:0.8em;
    letter-spacing:0.25em;
}
h2 .material-symbols-outlined {
    font-size:1.25em;
    margin-top: -0.1em;
    margin-right: 0.5em;
}
h2 + h2 {
    margin-left:0.5em;
}
#status {
    padding-top:0.1em;
    padding-left: 1em;
}
/**
 * Examples
 **/
.examples {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.example-list-container {
    display:flex;
    justify-content:center;
}
.example-list {
    padding: 0;
    margin: 1em 2em 2em 2em;
    display:flex;
    justify-content:center;
    flex-direction:row;
    gap: 1em;
}
.example {
    max-width: 15em;
    list-style:none;
    flex:1;
}
.example a {
    display:inline-block;
    text-decoration:none;
    padding:1em;
    border-radius:0.25em;
}
/**
 * Outputs
**/
.output-wrapper {
    height:40%;
    min-height:10em;
    box-sizing:border-box;
}
#shell {
    cursor: text;

    resize: none;
    outline: none;

    /* vertical orientation */
    height:100%;
    flex-direction: column;
    padding: 0 2em 2em 1.75em;

    overflow-wrap: anywhere;
    overflow-y: scroll;
}
#shell span {
    display:inline;
}
#shell .input {
    outline:none;
    flex-grow: 1;
}
#shell .line-container {
    display: flex;
    flex-direction: row;
}
#shell .expand {
    border-radius: 0.25em;
    padding: 0 0.5em;
    margin-left: 2.25em;
    cursor: pointer;
    font-size: 0.5em;
    line-height: 3em;
}
/**
 * Preview
**/

#preview-loading {
    display:none;
}

#preview-output img,#preview-output video {
    max-width:100%;
}

/**
 * Resizing
 **/
.resize-bar {
    position:absolute;
    top:0;
}
.resize-bar::before {
    content:"";
    position:absolute;
    border-radius:1em;
    transform:translateX(-50%);
}
.resize-vertical {
    right:0;
    height:2em;
    width:100%;
    cursor:ns-resize;
}
.resize-vertical::before {
    top:0.35em;
    left:50%;
    width:5em;
    height:0.25em;
}
.resize-horizontal {
    right:-1em;
    width: 1em;
    height:100%;
    cursor:ew-resize;
}
.resize-horizontal::before {
    left:0.5em;
    top:50%;
    height:5em;
    width:0.25em;
}
/**
 * Browser
 **/
.browser {
    min-width:20em;
    padding: 1em 2em;
    box-sizing: border-box;

    flex-shrink: 0;
    position:relative;
    overflow-y: scroll;

    transition:margin-left 0.15s ease;
}
.browser.hidden {
    margin-left:-20em;
    display:block;
}
.browser-group h2 {
    margin-left: 1.25em;
}
.browser-group + .browser-group {
    margin-top: 3em;
}
#hamburger.selected {
    position: relative;
}
#hamburger.selected::before {
    content:"";
    width: 0.28em;
    height: 1.2em;
    position: absolute;
    top: 1.35em;
    left: 1.1em;
}
.project-list {
    padding:0;
}
.project {
    list-style:none;
    background-color:transparent;
    display:flex;
    position:relative;
}
.project .text {
    flex-grow:1;
    outline:none;
    border:1px solid transparent;
}
.project .text[contenteditable="true"] {
    cursor:text;
}
.project a {
    overflow-x: hidden;
    padding:0.75em;
    box-sizing:border-box;
    border:1px solid transparent;
    border-radius:0.25em;

    display:inline-block;
    text-decoration:none;
    width:100%;

    display:flex;
    justify-content:space-between;
}
.project .actions {
    display:flex;
    flex-direction:row;
    position:absolute;
    top:27%;
    right:1em;
}
.project .action {
    display:none;
    cursor:pointer;
}
.project:hover .action,.project.selected .action {
    display:block;
    font-size:0.95em;
    padding:0.4em;
    opacity:0.5;
}
.project .action:hover {
    opacity: 1;
}
/**
 * Preview
 **/
.preview {
    display:flex;
    align-items:center;
}

.preview.standalone {
    background-color:#F6F6F6;
    justify-content:center;
}
.preview.inline {
    margin: 0 2.6em;
}

.preview, .preview p, .preview input, .preview button {
    font-family:'Monda';
}
.preview .description {
    font-size:1.15em;
}
.preview * + form {
    margin-top:2em;
}
.form-container {
    padding: 3.5em 4em 3em 4em;
    border-radius:1em;
    width:25em;
}
.content-container {
    margin:3em 0;
}
.preview h1 {
    font-family:'Playfair Display';
    font-weight:400;
    font-size: 3.5em;
    margin: 0;
    line-height:125%;
}
.preview input {
    background-color:#F9F9F9;
    border:1px solid #CCC;
    padding:0.75em 1.25em;
    border-radius:0.35em;
}
.preview label, .preview input {
    cursor:text;
}
.preview label, .preview input, .preview button {
    display:block;
    clear: both;
    margin: 1.25em 0;
    font-size: 0.9em;
    width:100%;
    box-sizing:border-box;
}
.preview input:hover {
    border:1px solid #999;
}
.preview input:focus {
    border:1px solid #333;
    outline:none;
}
.preview button[type="submit"] {
    width:auto;
    cursor:pointer;
    padding:0.55em 1em 0.55em 1.25em;
    border-radius:0.4em;
}
.preview button .material-symbols-outlined,.preview .actions .material-symbols-outlined {
    font-size:16px;
    padding:0 0 0.1em 0.25em;
}
.preview button .material-symbols-outlined {
    vertical-align: bottom;
}
.preview .actions {
    margin-top:1em;
    text-align:center;
    font-size:0.95em;
}
.preview .actions a {
    color:#c1c1c1;
    text-decoration:none;
    padding:0.25em 0.5em 0.25em 0.25em;
}
.preview .actions a:hover {
    background-color:#eee;
    border-radius:0.5em;
    color:#999;
}
.preview p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #999;
    text-underline-offset: 0.2em;
}
.preview p a:hover {
    color:#FFF;
    text-decoration:underline;
    text-decoration-color: #FFF;
}
#output-wrapper .preview {
    background-color:transparent;
    overflow-y: scroll;
}

/* Temporary, until we make a toggle between UI and shell */
.preview.inline {
    display: none;
}
.link {
    padding: 0.25em 0.75em 0.2em 0.75em;
    border-radius: 0.25em;
    margin-top:0.9em;
    display:inline-block;
    height: 1.8em;
    border:1px solid transparent;
    text-decoration:none;
}
.link .text {
    display: inline-block;
    color:inherit;
    text-decoration:none;
    text-overflow: ellipsis;
    width:10em;
    white-space: nowrap;
    overflow:hidden;
}
.link .material-symbols-outlined {
    margin-left:0.25em;
    font-size: 1.25em;
    vertical-align: top;
    margin-top: 0.2em;
}

/**
 * README
 **/

.readme {
    max-width:35em;
    flex-grow:1;
    max-height:100%;
    overflow-y:scroll;
}
.readme h1 {
    font-family:'Playfair Display';
    font-weight:400;
    font-size: 3.5em;
}
.readme h2 {
    margin-top:3em;
}
.readme pre {
    border-radius: 0.5em;
    padding: 1em;
}
.readme blockquote {
    background-color:rgba(46, 144, 114, 0.05);
    border:1px solid rgba(46, 144, 114, 0.15);
    border-radius:0.25em;
    display:inline-block;
    padding:0.25em 1.5em;
    margin:0;
}
.readme * + blockquote {
    margin-top:1em;
}
.readme blockquote + * {
    margin-bottom:1em;
}
.doc-links {
    width:100%;
    display:flex;
    flex-direction:row;
    gap:1em;
    margin-top:3em;
}
.doc-link.back span {
    text-align:right;
}
.doc-link {
    display:flex;
    flex-direction:column;
    flex:1;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:0.5em;
    box-sizing:border-box;
    padding:1em;
    cursor:pointer;
}
.doc-link label {
    cursor:pointer;
    text-transform:uppercase;
    font-size:0.8em;
    font-weight:700;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
/**
 * Tab
 **/
.tab {
    border:1px solid transparent;
    border-radius:0.5em;
    cursor:pointer;
    text-decoration:none;
    padding: 0.5em 0.75em 0.5em 1em;
    display:inline-block;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spinning {
    animation: spin 1s linear infinite; /* Apply the spin animation */
}
/**
 * List
 **/
.list {
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
.list h2 {
    margin:0 0 3em 0;
}
.previews-container {
    display:flex;
    flex-direction:row;
    gap:1em;
    flex-wrap: wrap;
    max-width:90em;
    justify-content:center;
    padding-bottom:5em;
}
.previews-container .form-container {
    max-width:20em;
    position:relative;
}
.form-icon.material-symbols-outlined {
    position:absolute;
    top:1.25em;
    right:1.25em;
    font-size:1.5em;
}
a.form-container {
    text-decoration:none;
}
a.form-container input:hover,a.form-container label:hover {
    cursor:pointer;
}
.file-container {
    display:block;
    width:100%;

    padding: 1.5em 2em;
    border-radius:1em;

    display:flex;
    flex-direction:row;
    text-decoration:none;
    justify-content:space-between;
}
.file-text {
    display:flex;
    flex-direction:row;
}
.file-container h2 {
    margin:0;
    text-transform:none;
    letter-spacing:0;
    font-size:1em;
    margin-right:1em;
}
.file-container p {
    margin:0;
}
.file-icon.material-symbols-outlined {
    margin:0;
    font-size:1.25em;
    padding-top:0.15em;
}
/**
 * Light
 **/

.light body {
    background-color:#EEE;
}
.light .preview .file-container {
    background-color:#F1F1F1;
    border:1px solid #DDD;
    color:#FFF;
}
.light .standalone.preview {
    background-color:#EEE;
}
.light .preview h1 {
    color:#000;
}
.light .preview p {
    color:#666;
}
.light .preview .form-container {
    background-color:#F1F1F1;
    border:1px solid #DDD;
    color:#FFF;
}
.light .preview label {
    color:#888;
}
.light .preview input {
    background-color:#ECECEC;
    border:1px solid #DDD;
    color:#333;
}
.light .preview input::placeholder {
    color:#999;
}
.light .preview input:hover {
    border:1px solid #CCC;
}
.light .preview input:focus {
    border:1px solid #3eba7e;
}
.light .preview button[type="submit"] {
    background-color: #2E9072;
    border: 1px solid #1C6D55;
    color:#FFF;
}
.light .preview button[type="submit"]:hover {
    background-color: #33a180;
    border: 1px solid #1C6D55;
}
.light .preview .actions * {
    color:#999;
}
.light .preview .actions a:hover {
    color:#666;
    background-color:#E6E6E6;
}
.light .preview p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #999;
    text-underline-offset: 0.2em;
}
.light .preview p a:hover {
    color:#FFF;
    text-decoration:underline;
    text-decoration-color: #FFF;
}
.light .preview a.form-container:hover,.light .preview a.file-container:hover {
    border:1px solid #1C6D55;
}
.light .editor-wrapper {
    border:1px solid #DDD;
    background-color:#F1F1F1;
}
.light .ace_gutter-cell {
    color:#333;
}
.light button { /* needs updating for light mode, still dark! */
    border: 1px solid #333;
    color: #FFF;
}
.light button:hover { /* needs updating for light mode, still dark! */
    background-color:#262626;
    border:1px solid #444;
}
.light button.icon {
    border:none;
    color:#AAA;
}
.light button.icon:hover {
    color:#666;
    background-color:transparent;
}
.light #run {
    background-color: #2E9072;
    border: 1px solid #1C6D55;
}
.light #run:hover {
    background-color: #33a180;
    border: 1px solid #1C6D55;
}
.light #loading {
    background-color: #444;
    border: 1px solid #666;
}
.light h2 {
    color:#999;
}
.light #status {
    color: #2E9072;
}
.light .example a {
    background-color:#EEE;
    color:#999;
    border:1px solid #E0E0E0;
}
.light .example a:hover {
    background-color:#ECECEC;
    color:#333;
    border:1px solid #D6D6D6;
}
.light #shell {
    color:#333;
    --color: #333;
}
.light #shell .result {
    color:#000;
}
.light #shell .error {
    color:rgb(199, 73, 73);
}
.light #shell .prompt {
    color:#c90;
}
.light #shell .command {
    color:#690;
}
.light #shell .input {
    color:#000;
}
.light #shell .expand {
    background-color: #333;
    color: #666;
}
.light #shell .expand:hover {
    color:#333;
    background-color:#393939;
}
.light #shell details .error {
    color:rgb(164, 75, 75);
}
.light .resize-bar::before {
    background-color:#e3e3e3;
}
.light .resize-bar:hover::before {
    background-color:#ccc;
}
.light button.selected {
    color:#666;
}
.light #hamburger.selected::before {
    background-color:#666;
}
.light .project a {
    color:#999;
}
.light .project .actions {
    color:#747474;
}
.light .project.selected a {
    background-color:#DDDDDD;
    color:#000;
}
.light .project:not(.selected) a:hover {
    color:#333;
    background-color:#E9E9E9;
    border:1px solid #DDD;
}
.light .form-container {
    background-color:#FFF;
    border:1px solid #EEE;
}
.light .preview label {
    color:#999;
}
.light .link {
    color: #999;
    background-color:#EAEAEA;
}
.light .link:hover {
    color:#666;
    background-color:#E9E9E9;
    border:1px solid #DDD;
}
.light .readme h1 {
    color:#000;
}
.light .readme h2 {
    color:#000;
}
.light .readme,.light .readme p {
    color:#333;
}
.light .readme pre {
    color: #666;
    background-color: rgba(255, 255, 255, 0.01);
}
.light .readme p a {
    color:#278063;
}
.light .readme p a:hover {
    color:#1C6D55;
}
.light .doc-link {
    color:#333;
    background-color:#EAEAEA;
    border:1px solid #DDD;
}
.light .doc-link label {
    color:#666;
}
.light .doc-link:hover {
    color:rgb(28, 109, 85);
    background-color:rgba(28, 109, 85, 0.05);
    border:1px solid rgb(28, 109, 85, 0.25);
}
.light .doc-link:hover label {
    color:rgb(28, 109, 85, 0.75);
}
.light .tab {
    background-color:#EAEAEA;
}
.light .tab:not(.focused) {
    color:#999;
}
.light .tab:not(.focused):hover {
    color:#888;
    background-color:#E9E9E9;
    border:1px solid #DDD;
}
.light .tab.focused {
    background-color:#E3E3E3;
    color:#333;
}
.light .spinning {
    color:#666;
}
.light .form-icon.material-symbols-outlined,.light .file-icon.material-symbols-outlined {
    color:#CCC;
}
.light a.form-container:hover .form-icon,.light a.file-container:hover .file-icon {
    color:#1C6D55;
}
.light .file-container {
    background-color:#FFF;
    border:1px solid #EEE;
}
.light .file-container h2 {
    color:#333;
}
.light .browser {
    border-right:1px solid #DDD;
}
.light header li a {
    color:#999;
}
.light header li a:not(.selected):hover {
    color:#666;
}
.light header a.selected {
    color:#CCC;
}
/**
 * Dark
 **/
.dark body {
    background-color:#111111;
}
.dark .preview .file-container {
    background-color:#161616;
    border:1px solid #222;
    color:#FFF;
}
.dark .standalone.preview {
    background-color:#111;
}
.dark .preview h1 {
    color:#FFF;
}
.dark .preview p {
    color:#999;
}
.dark .preview .form-container {
    background-color:#161616;
    border:1px solid #222;
    color:#FFF;
}
.dark .preview label {
    color:#888;
}
.dark .preview input {
    background-color:#111;
    border:1px solid #222;
    color:#FFF;
}
.dark .preview input::placeholder {
    color:#666;
}
.dark .preview input:hover {
    border:1px solid #333;
}
.dark .preview input:focus {
    border:1px solid #3eba7e;
}
.dark .preview button[type="submit"] {
    background-color: #278063;
    border: 1px solid #3eba7e;
    color:#FFF;
}
.dark .preview button[type="submit"]:hover {
    background-color: #2c8e6e;
    border: 1px solid #43c888;
}
.dark .preview .actions * {
    color:#555;
}
.dark .preview .actions a:hover {
    color:#888;
    background-color:#161616;
}
.dark .preview p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #999;
    text-underline-offset: 0.2em;
}
.dark .preview p a:hover {
    color:#FFF;
    text-decoration:underline;
    text-decoration-color: #FFF;
}
.dark .preview a.form-container:hover,.dark .preview a.file-container:hover {
    border:1px solid #37C79C;
}
.dark .editor-wrapper {
    border:1px solid #333;
    background-color:#161616;
}
.dark .ace_gutter-cell {
    color:#FFF;
}
.dark button {
    border: 1px solid #333;
    color: #FFF;
}
.dark button:hover {
    background-color:#262626;
    border:1px solid #444;
}
.dark button.icon {
    border:none;
    color:#555;
}
.dark button.icon:hover {
    color:#999;
    background-color:transparent;
}
.dark #run {
    background-color: #2E9072;
    border: 1px solid #37C79C;
}
.dark #run:hover {
    background-color: #319a7b;
    border: 1px solid #3edeae;
}
.dark #loading {
    background-color: #444;
    border: 1px solid #666;
}
.dark h2 {
    color:#666;
}
.dark #status {
    color: #2E9072;
}
.dark .example a {
    background-color:rgba(255,255,255,0.01);
    color:#999;
    border:1px solid rgba(255,255,255,0.02);
}
.dark .example a:hover {
    background-color:rgba(255,255,255,0.015);
    color:#ccc;
    border:1px solid #292929;
}
.dark #shell {
    color:#CCC;
    --color: #CCC;
}
.dark #shell .result {
    color:#FFF;
}
.dark #shell .error {
    color:rgb(199, 73, 73);
}
.dark #shell .prompt {
    color:#c90;
}
.dark #shell .command {
    color:#690;
}
.dark #shell .input {
    color:#FFF;
}
.dark #shell .expand {
    background-color: #333;
    color: #999;
}
.dark #shell .expand:hover {
    color:#ccc;
    background-color:#393939;
}
.dark #shell details .error {
    color:rgb(164, 75, 75);
}
.dark .resize-bar::before {
    background-color:#333;
}
.dark .resize-bar:hover::before {
    background-color:#444;
}
.dark button.selected {
    color:#999;
}
.dark #hamburger.selected::before {
    background-color:#999;
}
.dark .project a {
    color:#999;
}
.dark .project .actions {
    color:#FFF;
}
.dark .project.selected a {
    background-color:#222;
    color:#FFF;
}
.dark .project:not(.selected) a:hover {
    color:#ccc;
    background-color:#161616;
    border:1px solid #222;
}
.dark .form-container {
    background-color:#FFF;
    border:1px solid #EEE;
}
.dark .preview label {
    color:#999;
}
.dark .link {
    color: #666;
    background-color:#141414;
}
.dark .link:hover {
    color:#999;
    background-color:#181818;
    border:1px solid #222;
}
.dark .readme h1 {
    color:#FFF;
}
.dark .readme h2 {
    color:#FFF;
}
.dark .readme,.dark .readme p {
    color:#999;
}
.dark .readme pre {
    color: #999;
    background-color: rgba(255, 255, 255, 0.01);
}
.dark .readme p a {
    color:#278063;
}
.dark .readme p a:hover {
    color:#319a7b;
}
.dark .doc-link {
    color:#999;
    background-color:#141414;
    border:1px solid #222;
}
.dark .doc-link label {
    color:#666;
}
.dark .doc-link:hover {
    color:#37C79C;
    background-color:rgba(31,124,96,0.05);
    border:1px solid rgba(55,199,156,0.25);
}
.dark .doc-link:hover label {
    color:rgba(55,199,156,0.5);
}
.dark .tab {
    background-color:#141414;
}
.dark .tab:not(.focused) {
    color:#555;
}
.dark .tab:not(.focused):hover {
    color:#999;
    background-color:#181818;
    border:1px solid #222;
}
.dark .tab.focused {
    background-color:#1c1c1c;
    color:#ccc;
}
.dark .spinning {
    color:#666;
}
.dark .form-icon.material-symbols-outlined,.dark .file-icon.material-symbols-outlined {
    color:#555;
}
.dark a.form-container:hover .form-icon,.dark a.file-container:hover .file-icon {
    color:#37C79C;
}
.dark .file-container {
    background-color:#FFF;
    border:1px solid #EEE;
}
.dark .file-container h2 {
    color:#CCC;
}
.dark .browser {
    border-right:1px solid #222;
}
.dark header li a {
    color:#999;
}
.dark header li a:not(.selected):hover {
    color:#CCC;
}
.dark header a.selected {
    color:#555;
}
/**
 * Mobile
 **/
@media only screen and (max-width: 720px) {
    .example:nth-child(3),.example:nth-child(4) {
        display:none;
    }
    .header-right li:nth-child(1),.header-right li:nth-child(4) {
        display:none;
    }
    .previews-container {
        max-width:80%;
    }
}