/* ------------------------------------------------ */

:root {
    --hue: 250;
    --saturation: 3%;
    --color1: hsl(var(--hue), var(--saturation), 18%);
    --color2: hsl(var(--hue), var(--saturation), 23%);
    --color3: hsl(var(--hue), var(--saturation), 28%);
    --color4: hsl(var(--hue), var(--saturation), 33%);
    --color5: hsl(var(--hue), var(--saturation), 38%);
    --color6: hsl(var(--hue), var(--saturation), 43%);

    --text1: #bbb;
    --text2: #ddd;
    --text3: #fff;
}

/* ------------------------------------------------ */

body {
    background-color: var(--color1);
    color: var(--text2);
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

/* ------------------------------------------------ */

.container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------ */

hr {
    color: #0000;
}

/* ------------------------------------------------ */

iframe {
    aspect-ratio: 16/9;
    height: auto;
    border-radius: 12px;
    width: 100%;
}

/* ------------------------------------------------ */

.options {
    gap: 1rem 0;
}

/* ------------------------------------------------ */

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ddd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-select option:disabled {
    color: var(--text1);
}

.form-control {
    background-color: var(--color3);
    color: var(--text2);
    border: none;
    outline: none;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.form-control:focus {
    background-color: var(--color4);
    color: var(--text2);
    border: none;
    outline: none;
    box-shadow: none;
}

/* ------------------------------------------------ */