:root {
    --xomel-font-small: 1rem;
    --xomel-font-medium: 1.25rem;
    --xomel-font-large: 3.5rem;
    --bs-body-font-size: var(--xomel-font-small);
}

body { font-size: var(--xomel-font-small); }

h1,
.h1,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-size: var(--xomel-font-large);
}

h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6,
legend,
.lead,
.modal-title,
.offcanvas-title {
    font-size: var(--xomel-font-medium);
}

.fs-1 { font-size: var(--xomel-font-large) !important; }

.fs-2,
.fs-3,
.fs-4 { font-size: var(--xomel-font-medium) !important; }

.fs-5,
.fs-6 { font-size: var(--xomel-font-small) !important; }

button,
input,
optgroup,
select,
textarea { font-size: inherit; }

.btn {
    --bs-btn-font-size: var(--xomel-font-medium);
    font-size: var(--xomel-font-medium);
}

.btn-sm {
    --bs-btn-font-size: var(--xomel-font-small);
    font-size: var(--xomel-font-small);
}

.btn-lg {
    --bs-btn-font-size: var(--xomel-font-medium);
    font-size: var(--xomel-font-medium);
}

.form-control,
.form-select,
.input-group-text {
    font-size: var(--xomel-font-medium);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    font-size: var(--xomel-font-small);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    font-size: var(--xomel-font-medium);
}

.form-label,
.form-text,
.form-check-label,
.invalid-feedback,
.valid-feedback,
.badge,
.tooltip,
.popover,
.dropdown-menu,
.table,
.toast,
.pagination,
.breadcrumb,
.small,
small,
sub,
sup,
code,
kbd,
pre {
    font-size: var(--xomel-font-small);
}