:root {
    --sans-font: "Ubuntu", Helvetica, Verdana, sans-serif;
    --serif-font: Georgia, Times, serif;

    --block-border-radius: 15px;
    --button-border-radius: 15px;
    --input-border-radius: 10px;

    --button-color: #FFF;
    --button-bg-color: #333;
    --button-border: solid 2px #333;
    --button-hover-color: #333;
    --button-hover-bg-color: #FFF;
    --button-hover-border: solid 2px #333;

    --badge-color: rgba(255, 196, 85, 0.91);
}

html {
    --bg-color: #FCFDFF;
    --opposite-bg-color: #282c35;

    --text-color: #333;
    --brighter-text-color: #000;
    --opposite-text-color: #DDD;

    --block-bg-color: #FFF;
    --opposite-block-bg-color: #282c35;
    --block-shadow: 10px 15px 40px rgba(83, 91, 110, 0.11);
    --block-border: none;

    --link-color: #333;
    --link-hover-color: #000;
    --visited-link-color: #333;

    --button-color: #FFF;
    --button-bg-color: #333;
    --button-disabled-bg-color: #DDD;
    --button-border: solid 2px #333;
    --button-hover-color: #333;
    --button-hover-bg-color: #FFF;
    --button-hover-border: solid 2px #333;

    --select-color: #333;
    --select-bg-color: #FFF;

    --input-color: #000;
    --input-bg-color: #fff;
    --input-border-color: #ddd;
    --input-toolbar-bg: #fff;
    --input-toolbar-button-color: #000;
    --input-link: #7f8c8d;
    --input-selection-color: #d7d4f0;
}

body {
    font-family: var(--sans-font);
    font-size: 15px;
    line-height: 1.42;
    color: var(--text-color);
    background-color: var(--bg-color);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    body {
        font-size: 14px;
    }
}

@media only screen and (max-width : 800px) {
    body {
        font-size: 13px;
    }
}

a {
    color: var(--link-color);
    transition: color linear .1s;
}

a:hover {
    color: var(--link-hover-color);
}


figure {
    margin: 0;
}

img {
    max-width: 100%;
}

select {
    color: var(--select-color);
    background-color: var(--select-bg-color);
}

h1,
h2,
h3,
h4,
h5 {
    scroll-margin-top: 30px;
}

li {
    margin-bottom: 0.8em;
}

a {
    text-decoration: none;
}

input[type=text],
input[type=number],
input[type=file],
input[type=email],
input[type=time],
input[type=url],
input[type=datetime-local],
input[type=date],
input[type=password],
input[type=search],
textarea,
select,
.CodeMirror,
.input-select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, .25), 0 0 0 1px rgba(9, 30, 66, .08);
    outline: none;
    padding: 8px 15px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4em;
    font-family: var(--sans-font);
    background: var(--input-bg-color);
    border-color: var(--input-border-color);
    color: var(--input-color);
    border-radius: var(--input-border-radius);
}

select {
    cursor: pointer;
}

input:focus,
textarea:focus,
.CodeMirror-focused {
    box-shadow: 0 4px 12px -2px rgba(9, 30, 66, .45), 0 0 0 1px rgba(9, 30, 66, .32);
}

.editor-toolbar {
    border: none;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, .25), 0 0 0 1px rgba(9, 30, 66, .08);
    background: var(--input-toolbar-bg);
}

.editor-toolbar button {
    color: var(--input-toolbar-button-color);
}

.editor-toolbar button:hover {
    background: var(--input-bg-color);
}

input:hover,
textarea:hover {
    transform: scale(1.01);
    transition: all linear .2s;
}

pre>code {
    display: block;
    padding: 15px 20px;
    white-space: pre-wrap;
    background-color: var(--opposite-block-bg-color);
    color: var(--opposite-text-color);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.bg-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f4e4c1 30%, #d4af37 100%);
}

.bg-grey {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
}

.bg-red {
    background: linear-gradient(135deg, #fecdd3 0%, #ffe4e6 50%, #fecdd3 100%);
}

.bg-green {
    background: linear-gradient(135deg, #d9f99d 0%, #ecfccb 50%, #d9f99d 100%);
}

.bg-purple {
    background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 50%, #ddd6fe 100%);
}

.label {
    display: inline-block;
    padding: 0.27rem 0.6rem;
    border-radius: var(--input-border-radius);
    color: #FFF;
    font-weight: 600;
    max-width: none;
}

.label-green {
    background-color: rgba(0, 168, 107, 0.86);
}

.label-red {
    background-color: rgba(255, 8, 0, 0.86);
}

.label-grey {
    background-color: rgba(128, 128, 128, 0.86);
}