.colorPicker {
    color: #fffc2e;
}

:root {
    --topbar-height: 50px;
    --main-offset: calc(var(--topbar-height) + 0px); /* extra spacing */
}



html, body {
    margin: 0;
    padding: 0;
    background:var(--theme-bg);
    color:var(--theme-text);
    font-family: Arial, sans-serif;
    overflow: hidden;
}

::selection {
    background:var(--theme-brand);
    color: white;
}

/* stop weird default highlight around images */
img::selection {
    background: transparent;
}

input::selection,
textarea::selection {
    background: #C10050;
    color: white;
}

::-moz-selection {
    background: #C10050;
    color: white;
}

/* hide scrollbars */
* {
    scrollbar-width: none;
}
*::-webkit-scrollbar {
    display: none;
}

/* ===== MAIN LAYOUT ===== */
.main {
    position: absolute;
    top: var(--main-offset);
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    overflow: hidden;
    align-items: stretch;
}

/* ===== CONTENT ===== */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;

    overflow: auto;
    padding: 10px;

    position: relative;
}