#flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

fieldset {
    margin: 1em;
	border: 1px dotted var(--col-main-a075);
	border-radius: var(--corner-radius);
    background-color: var(--col-background);
}

fieldset label {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.33em;
    align-items: center;

    transition: var(--transition-speed-fast);

    &:hover {
        cursor: pointer;
        color: var(--col-highlight);
    }
}

input[type="radio"] {
    appearance: none;

    display: grid;
    place-content: center;

    font-size: var(--font-size);
    width: 0.75em;
    height: 0.75em;

    background-color: var(--col-highlight-dark);
    border: 1px solid var(--col-main-a075);
    border-radius: 50%;

    &::before {
        content: "";

        width: 0.4em;
        height: 0.4em;

        border-radius: 50%;
        box-shadow: inset 1em 1em var(--col-main);

        transform: scale(0);
        transition: var(--transition-speed-fast);
    }

    &:checked::before {
        transform: scale(1);
    }

    &:hover {
        cursor: pointer;
    }
}

#hk-trainer {
    margin: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 10em;

    background-color: var(--col-background);
    border: 1px solid var(--col-main-a075);
    border-radius: var(--corner-radius-big);
}

#character
{
    /* Текущая буква алфавита */
    font-size: 3em;
    margin: 0.1em;
}

#status-correct,
#status-wrong,
#status-placeholder {
    user-select: none;
    margin: 0;
}

#status-correct
{
    /* Сообщение о правильности ответа */
    color: var(--col-green);
}

#status-wrong
{
    /* Сообщение о правильности ответа */
    color: var(--col-red);
}

#answer
{
    /* Поле ответа пользователя */
    width: 2.5em;

    color: var(--col-highlight);
    background-color: var(--col-highlight-dark);

    border: 1px solid var(--col-main-a075);
    border-radius: var(--corner-radius);
}

input[type="button"] {
    --height: 1.33rem;

    font-family: Monogram, 'Courier New', Courier, monospace;;
    font-size: 1rem;

    height: var(--height);

    color: var(--col-main);
    background-color: var(--col-highlight-dark);

    border: 1px solid var(--col-main-a075);
    border-radius: var(--corner-radius);

    transition: var(--transition-speed-fast);

    &:hover {
        cursor: pointer;

        color: var(--col-highlight);
        border-color: var(--col-highlight);
    }
}

#submit
{
    /* Кнопка "Ответить" */
    width: 4em;
}

#regen
{
    /* Кнопка генерации нового символа */
    font-size: 0.8rem;
}