/* Stores global variables */
:root {
    /* Main accent colour */
    --c-accent: #646cff;
    /* Main text colour; should contrast well with c-bg and c-element */
    --c-text: #cccccc;
    /* Text colour when surrounded by accent colour; should contrast well with c-accent */
    --c-text-accent: #cccccc;
    /* Text colour usually used for disabled options, but also less important text; contrast with c-bg and c-element */
    --c-text-inact: #888888;
    /* Text colour used inside elements (buttons, etc) */
    --c-text-el: #cccccc;
    /* Text colour used for unimportant text within elements; contrast with c-element */
    --c-text-el-inact: #a0a0a0;
    /* Used for borders that light up in accent colour when active; contrast with c-bg */
    --c-border: #404040;
    /* Used for borders around and inside elements; contrast with c-element */
    --c-element-border: #555555;
    /* Different shade of c-bg, used for elements in the page (like buttons) */
    --c-element: #333333;
    /* Main background colour */
    --c-bg: #242424;
    /* Colour used for success messages (usually green) */
    --c-success: #44ff00;
    /* Colour used for failure messages (usually red) */
    --c-failure: #ff0000;
    /* Colour used for warning messages (usually orange) */
    --c-warning: #ff8800;
    /* Border radius of most elements */
    --rounding: 8px;
    /* Animation speed of most elements */
    --transition-speed: 0.25s;
}

body {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-size: 18px;

    color-scheme: dark light;
    color: var(--c-text);
    background-color: var(--c-bg);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    place-items: center;
    padding: 10px;
}

a {
    font-weight: 500;
    color: var(--c-accent);
    text-decoration: inherit;
}
a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 3.2em;
    line-height: 1.1;
}
h3 {
    margin-top: 5px;
}

code, pre {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

input {
    background-color: var(--c-bg);
    color: var(--c-text);
    border: 2px solid var(--c-border);
    border-radius: var(--rounding);
    transition: border-color var(--transition-speed);
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
}
input:hover, input:focus, input:active, input:focus-visible, input:focus-within {
    border-color: var(--c-accent);
    outline: none;
}
label {
    display: block;
}

.inactive {
    color: var(--c-text-inact);
}
.element .inactive {
    color: var(--c-text-el-inact);
}

div.container,
div.element {
    display: inline-block;
    border-radius: var(--rounding);
    border: 2px solid transparent;
    padding: 10px;
}
div.element {
    background: var(--c-element);
    color: var(--c-text-el);
}
div.container {
    border-color: var(--c-border);
}
div.element.bordered {
    border-color: var(--c-element-border);
}
.element .bordered {
    border: 2px solid var(--c-element-border);
    border-radius: var(--rounding);
    padding: 5px 10px;
}

.element input, .element button {
    border-color: var(--c-element-border);
}
.element input:hover,
.element input:active, .element input:focus, .element input:focus-within, .element input:focus-visible,
.element button:hover {
    border-color: var(--c-accent);
}

button {
    border-radius: var(--rounding);
    border: 2px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: var(--c-element);
    cursor: pointer;
    /* transition: border-color var(--transition-speed); */
    transition-duration: var(--transition-speed);
    /* Setting transition duration on everything apparently includes */
    /* time before an element disappears when its parent becomes invisible >:[ */
    transition-property: border-color, color;
    color: var(--c-text-el);
}

button:hover {
    border-color: var(--c-accent);
}
button:focus,
button:focus-visible {
    outline: none;
}

button.hollow {
    border: 2px solid var(--c-border);
    background-color: var(--c-bg);
    color: var(--c-text);
}
button.hollow:hover {
    border-color: var(--c-accent);
}

button.active {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-text-accent);
}
button.active:hover {
    border-color: var(--c-accent) var(--c-element-border) var(--c-accent) var(--c-element-border);
    color: var(--c-bg);
    transition-duration: var(--transition-speed);
}
button.active.left:hover {
    border-color: var(--c-accent) var(--c-element-border) var(--c-accent) var(--c-accent);
}
button.active.right:hover {
    border-color: var(--c-accent) var(--c-accent) var(--c-accent) var(--c-element-border);
}

button:active {
    color: var(--c-accent);
}

.buttonrow {
    display: flex;
    text-align: center;
}

.rowbutton {
    border-radius: 0;
}
.rowbutton.left {
    border-radius: var(--rounding) 0 0 var(--rounding);
}
.rowbutton.right {
    border-radius: 0 var(--rounding) var(--rounding) 0;
}

svg {
    /* By default, SVGs may shrink inside flex containers, even if their width/height is set */
    flex-shrink: 0;
}