:root {
    --start-color: #161616;
    --start-bg-color: #fff;

    --background-color: var(--start-bg-color);
    --line-color: var(--start-color);

    --accent-color: #dddddd;
    --accent-color-dark: color-mix(in srgb, var(--accent-color) 80%, var(--start-color));
    --accent-color-hover: color-mix(in srgb, var(--accent-color) 80%, var(--start-color));
    --accent-color-dark-hover: color-mix(in srgb, var(--accent-color-dark) 80%, var(--start-color));
    --accent-color-visited: var(--accent-color);
    --accent-color-dark-visited: color-mix(in srgb, var(--accent-color-dark) 80%, var(--start-color));
    --accent-color-active: color-mix(in srgb, var(--accent-color) 60%, var(--start-color));
    --accent-color-dark-active: color-mix(in srgb, var(--accent-color-dark) 60%, var(--start-color));

    --fill-color: var(--start-color);
    --fill-color-hover: color-mix(in srgb, var(--fill-color) 70%, var(--start-bg-color));

    --corners: 10px;

    --border-width: 4px;
    --border-style: var(--border-width) solid var(--line-color);

    --input-border-width: 2px;
    --input-border-style: var(--input-border-width) solid var(--line-color);

    --mobile-gap: 10px;
    --desktop-gap: 15px;
    --gap: var(--mobile-gap);

    --transition-fast: 0.15s;
    --transition-speed: 0.25s;
    --transition-slow: 0.5s;
}

* {
    box-sizing: border-box;
    transition:
        color var(--transition-slow) ease-in-out,
        background-color var(--transition-slow) ease-in-out,
        border-color var(--transition-slow) ease-in-out;
    scrollbar-color: var(--accent-color-dark) transparent;
    scrollbar-width: thin;
}

body {
    background-color: var(--background-color);
    color: var(--line-color);
    font-family: "Patrick Hand", sans-serif;
    font-weight: bold;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.clickable {
    cursor: pointer;
}

.hidden-input {
    height: 0;
    width: 0;
    opacity: 0;
}

.input-row {
    display: flex;
    font-size: 18pt;
    gap: calc(var(--gap) / 2);
    align-items: center;

    label {
        flex: 0 0 auto;
        text-transform: uppercase;
        margin: 3px 0;
    }

    .special-label {
        letter-spacing: -2px;
    }

    input[type="text"] {
        max-width: 100%;
        flex: 1 1 0;
        min-width: 0;
        font-family: "Caveat", sans-serif;
        font-size: 16pt;
        border: none;
        border-radius: 0;
        border-bottom: var(--input-border-style);
        background-color: transparent;
        color: var(--fill-color);
    }

    input[type="text"]:focus {
        outline: none;
    }

    .radio-input-container {
        flex: 0 1 auto;
        min-width: 0;
        gap: 2px;
        align-items: center;

        input[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            flex: 0 1 17.5px;
            margin: 0;
            padding: 0;
            min-width: 0;
            width: 17.5px;
            height: auto;
            aspect-ratio: 1;
            align-self: center;
            background-color: var(--background-color);
            color: currentColor;
            border: var(--input-border-style);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color var(--transition-fast) ease-in-out;
        }

        input[type="radio"]:checked {
            background-color: var(--fill-color);
        }
    }

    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        background: transparent;
    }

    input[type="range"]:focus {
        outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 3px;
        background: var(--fill-color);
        border: var(--input-border-style);
        cursor: pointer;
        transform: rotate(45deg);
        transition: background-color var(--transition-fast) ease-in-out;
        margin-top: -6px;
    }

    input[type="range"]::-moz-range-thumb {
        height: 16px;
        width: 16px;
        border-radius: 3px;
        background: var(--fill-color);
        border: var(--input-border-style);
        cursor: pointer;
        transform: rotate(45deg);
        transition: background-color var(--transition-fast) ease-in-out;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 3px;
        cursor: pointer;
        background: var(--line-color);
        border-radius: 10px;
    }

    input[type="range"]::-moz-range-track {
        width: 100%;
        height: 3px;
        cursor: pointer;
        background: var(--line-color);
        border-radius: 10px;
    }

    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border: var(--input-border-style);
        border-radius: 3px;
        cursor: pointer;
        transition: background-color var(--transition-fast) ease-in-out;
    }

    input[type="checkbox"]:checked {
        background-color: var(--fill-color);
    }

    .left-label {
        text-align: right;
    }
    .right-label {
        text-align: left;
    }
}

a {
    color: var(--accent-color-dark);
    text-decoration: none;
    transition: color var(--transition-fast) ease-in-out;

    &:hover {
        color: var(--accent-color-dark-hover);
    }

    &:visited {
        color: var(--accent-color-dark-visited);
    }

    &:active {
        color: var(--accent-color-dark-active);
    }
}

button {
    font-family: "LXGW WenKai Mono TC", monospace;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--corners);
    border: var(--border-style);
    background: var(--accent-color);
    color: var(--line-color);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease-in-out;

    &:hover {
        background: var(--accent-color-hover);
    }

    &:focus {
        background: var(--accent-color-hover);
    }

    &:active {
        background: var(--accent-color-active);
    }
}

@media (min-width: 480px) {
    body {
        max-width: 480px;
    }
}

@media (min-width: 768px) {
    :root {
        --gap: var(--desktop-gap);
    }

    body {
        max-width: 815px;
    }

    .input-row {
        font-size: 16pt;

        .special-label {
            letter-spacing: 0;
        }
    }
}

@media (pointer: fine) {
    .input-row {
        .radio-input-container input[type="radio"]:hover {
            background-color: var(--fill-color-hover);
        }

        input[type="checkbox"]:hover {
            background-color: var(--fill-color-hover);
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background-color: var(--fill-color-hover);
        }

        input[type="range"]::-moz-range-thumb:hover {
            background-color: var(--fill-color-hover);
        }
    }
}