:root {
    --font: 'Bitter', "DM Sans", Tahoma, sans-serif;
    --max-width: 85vw;

    --bg-color: var(--bg);
    --text-color: var(--text);
    --text-color-hover: var(--text-hover);
}

body.flex {
    max-width: var(--max-width);
    margin: auto;
    padding-bottom: 70px;
    gap: 10px;
}

/* markdown stuff */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    user-select: auto;
}

.title {
    text-align: center;
    margin: 0.5em;
    font-size: 3rem;
    user-select: none;
}

.button {
    font-weight: bold;
    padding: 10px;
}

/* markdown editor */

.editor-container {
    display: flex;
    justify-content: center;
    background-color: var(--fg);
    border-radius: var(--border-radius);

    #editor {
        background: transparent;
        padding: 20px;
        font-size: 16px;
        font-family: var(--font-mono);
        max-width: 800px;
        width: 100%;
        height: 40dvh;
        max-height: 450px;
        overflow: auto;
        resize: none;

        &:focus-visible {
            box-shadow: none;
        }
    }

    &:has(#editor:focus-visible) {
        box-shadow: var(--focus-outline);
    }
}

/* controls */

.count-button {
    padding: 10px 20px;
    font-size: 1.5rem;
    width: 100%;
}

/* font container */

.container {
    display: flex;
    flex-direction: row;
    max-width: var(--max-width);
    overflow: scroll;
    gap: 10px;

    .column {
        display: flex;
        flex-direction: column;
        background: var(--fg);
        padding: 20px;
        flex: 1;
        word-break: break-word;

        &:first-of-type {
            border-radius: var(--border-radius) 0 0 var(--border-radius);
        }

        &:last-of-type {
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        &:only-of-type {
            border-radius: var(--border-radius);
        }
    }

    @media (max-width: 1000px) {
        flex-direction: column;

        .column {
            flex-direction: row;
            gap: 20px;

            .settings-container {
                flex-direction: column;

                div {
                    width: 100%;
                }
            }

            &:first-of-type {
                border-radius: var(--border-radius) var(--border-radius) 0 0;
            }

            &:last-of-type {
                border-radius: 0 0 var(--border-radius) var(--border-radius);
            }

            &:only-of-type {
                border-radius: var(--border-radius);
            }
        }
    }

    @media (max-width: 600px) {
        .column {
            flex-direction: column;
            gap: 0;
        }
    }
}

label {
    font-weight: bold;
}

.text-input.google-font {
    background-color: #ff03;
}

.text-input.web-safe-font {
    background-color: #0f03;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-container {
    display: flex;
    gap: 10px;

    div {
        width: 50%;
    }
}

/* small slider */

.small-slider {
    width: 100%;
}

/* large slider */

input[type=range].large-slider {
    --color: var(--text);
    position: relative;
    width: 100%;
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-color: var(--fg-hover);
    border-radius: var(--border-radius);

    &:hover {
        --color: var(--text-hover);
    }

    &::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        background-color: transparent;
        margin-top: -1px;
    }

    &::-webkit-slider-thumb {
        width: 0;
        -webkit-appearance: none;
        height: 0;
        cursor: ew-resize;
        box-shadow: -100vw 0 0 100vw var(--color);
    }

    &::-moz-range-track {
        height: 10px;
        background-color: transparent;
        appearance: none;
    }

    &::-moz-range-progress {
        height: 50px;
        border-radius: 0;
        background: var(--color);
    }

    &::-moz-range-thumb {
        color: transparent;
        background: transparent;
        display: none;
        cursor: ew-resize;
        appearance: none;
        border: none;
    }

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

.scale-control::before {
    content: "Scale";
    font-family: var(--font);
    position: absolute;
    top: 0;
    left: 10px;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 2rem;
    color: #fff;
    mix-blend-mode: difference;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}

.indicator {
    color: var(--text);
    opacity: 0.5;
    padding: 5px;
    font-size: 0.8em;
    vertical-align: middle;
}

.back-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    font-family: var(--font-icons);
    color: var(--bg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    text-decoration: none;

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

.output {
    font-size: 12pt;
    font-weight: 400;

    * {
        margin: revert;
    }
}