@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=League+Gothic&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

h1,
h2,
h3,
h4 {
    font-family: 'Antonio', sans-serif;
    text-transform: uppercase;
}

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --primary: #f03333;
    --secondary: #6c757d;
    --light: #f8f9fa;
    --dark: #343a40;

    --primary-hover: hsl(from var(--primary) h s calc(l - 10));
    --secondary-hover: hsl(from var(--secondary) h s calc(l - 10));
    --light-hover: hsl(from var(--light) h s calc(l - 10));
    --dark-hover: hsl(from var(--dark) h s calc(l - 10));

    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-light: var(--light);
    --bs-dark: var(--dark);

    --bs-primary-hover: var(--primary-hover);
    --bs-secondary-hover: var(--secondary-hover);
    --bs-light-hover: var(--light-hover);
    --bs-dark-hover: var(--dark-hover);

    --bs-primary-active: var(--primary);
    --bs-secondary-active: var(--secondary);
    --bs-light-active: var(--light);
    --bs-dark-active: var(--dark);

    --bs-primary-disabled: hsl(from var(--primary) h s calc(l + 10));
    --bs-secondary-disabled: hsl(from var(--secondary) h s calc(l + 10));    
    --bs-light-disabled: hsl(from var(--light) h s calc(l + 10));
    --bs-dark-disabled: hsl(from var(--dark) h s calc(l + 10));

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary-disabled);
    --bs-btn-disabled-border-color: var(--bs-primary-disabled);    
    --bs-btn-disabled-opacity: 0.65;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary-hover);
	--bs-btn-hover-border-color: var(--bs-primary-hover);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary-active);
	--bs-btn-active-border-color: var(--bs-primary-active);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-btn-disabled-bg);
	--bs-btn-disabled-border-color: var(--bs-btn-disabled-border-color);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--bs-primary);
}

.bg-primary {
	background-color: var(--primary) !important;
}

.bg-primary hr.divider {
    background-color: #fff;
}

.text-primary {
    color: var(--primary) !important;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    --bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary-disabled);
	--bs-btn-disabled-border-color: var(--bs-primary-disabled);

	color: var(--bs-btn-disabled-color);
	pointer-events: none;
	background-color: var(--bs-btn-disabled-bg);
	border-color: var(--bs-btn-disabled-border-color);
	opacity: var(--bs-btn-disabled-opacity);
}

hr.divider {
    height: 0.2rem;
	max-width: 5rem;
	margin: 1.5rem auto;
    background-color: var(--primary);
    border: 0 none;
    opacity: 1;
}

hr.divider-light {
    height: 0.2rem;
	max-width: 5rem;
	margin: 1.5rem auto;
    background-color: #fff;
    border: 0 none;
    opacity: 1;
}