/* CUSTOM PROPERTIES */

:root {
	--color-primary: #ff5900;
	--color-primary-light: #ffe3d4;
	--color-secondary: #3a86ff;
	--color-secondary-light: #9fbbe8;
	--color-danger: #d21020;
	--color-danger-light: #ffd8db;
	--color-success: #31a125;
	--color-white: white;
	--color-black: #2f4858;
	--color-neutral-light: #f6f6f6;
	--color-neutral: #d4d4d4;
	--color-neutral-dark: #8f8f8f;

	--space-tiny: 0.4rem;
	--space-small: 0.8rem;
	--space-medium: 1.4rem;
	--space-big: 2rem;
	--space-huge: 3.2rem;

	--border-radius: 4px;
}

/* GENERIC */

body {
	font-family: 'Nunito', sans-serif;
	background-color: var(--color-neutral-light);
	color: var(--color-black);
}

i {
	font-size: 1.4rem;
}

/* COLORS */

.background-clear {
	background-color: transparent;
}

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

.background-secondary {
	background-color: var(--color-secondary);
}

.background-secondary-light {
	background-color: var(--color-secondary-light);
}

.background-black {
	background-color: var(--color-black);
}

.background-white {
	background-color: var(--color-white);
}

.background-neutral {
	background-color: var(--color-neutral);
}

.background-neutral-light {
	background-color: var(--color-neutral-light);
}

.background-neutral-dark {
	background-color: var(--color-neutral-dark);
}

.background-danger {
	background-color: var(--color-danger);
}

.background-danger-light {
	background-color: var(--color-danger-light);
}

.background-success {
	background-color: var(--color-success);
}

.color-black {
	color: var(--color-black);
}

.color-white {
	color: var(--color-white);
}

.color-primary {
	color: var(--color-primary);
}

.color-secondary {
	color: var(--color-secondary);
}

.color-secondary-light {
	color: var(--color-secondary-light);
}

.color-neutral {
	color: var(--color-neutral);
}

.color-neutral-light {
	color: var(--color-neutral-light);
}

.color-neutral-dark {
	color: var(--color-neutral-dark);
}

.color-success {
	color: var(--color-success);
}

.color-danger {
	color: var(--color-danger);
}

.color-clear {
	color: transparent;
}

/* LAYOUT */

.flex {
	display: flex;
}

.flex.wrap {
	flex-wrap: wrap;
}

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

.flex > hr {
	width: 100%;
	visibility: hidden;
	margin: 0;
}

.flex.justify-center {
	justify-content: center;
}

.flex.justify-space-between {
	justify-content: space-between;
}

.flex.justify-end {
	justify-content: end;
}

.flex.justify-space-evenly {
	justify-content: space-evenly;
}

.flex.align-center {
	align-items: center;
}

.flex.align-start {
	align-items: start;
}

.flex.gap-tiny {
	gap: var(--space-tiny);
}

.flex.gap-small {
	gap: var(--space-small);
}

.flex.gap-medium {
	gap: var(--space-medium);
}

.flex.gap-big {
	gap: var(--space-big);
}

.flex.gap-huge {
	gap: var(--space-huge);
}

.flex.even-columns > * {
	flex: 1;
}

.grid {
	display: grid;
}

.grid.gap-small {
	gap: var(--space-small);
}

.grid.gap-medium {
	gap: var(--space-medium);
}

.grid.gap-big {
	gap: var(--space-big);
}

.grid.gap-huge {
	gap: var(--space-huge);
}

/* FONTS */

.text-tiny {
	font-size: 0.6rem;
}

.text-small {
	font-size: 0.8rem;
}

.text-medium {
	font-size: 1rem;
}

.text-big {
	font-size: 1.4rem;
}

.text-huge {
	font-size: 2rem;
}

.title-huge {
	font-size: 3rem;
}

.title-big {
	font-size: 1.6rem;
}

.title-medium {
	font-size: 1.2rem;
}

.title-small {
	font-size: 1rem;
	letter-spacing: 0.1rem;
}

.title-tiny {
	font-size: 0.8rem;
	letter-spacing: 0.06rem;
}

.light {
	font-weight: 200;
}

.regular {
	font-weight: 400;
}

.bold {
	font-weight: 700;
}

.extra-light {
	font-weight: 200;
}

/* SPACING */

.padding-clear {
	padding: 0;
}

.padding-tiny {
	padding: var(--space-tiny);
}

.padding-small {
	padding: var(--space-small);
}

.padding-medium {
	padding: var(--space-medium);
}

.padding-big {
	padding: var(--space-big);
}

.padding-huge {
	padding: var(--space-huge);
}

.padding-inline-small {
	padding-inline: var(--space-small);
}

.padding-inline-medium {
	padding-inline: var(--space-medium);
}

.padding-inline-big {
	padding-inline: var(--space-big);
}

.padding-inline-huge {
	padding-inline: var(--space-huge);
}

.padding-block-tiny {
	padding-block: var(--space-tiny);
}

.padding-block-small {
	padding-block: var(--space-small);
}

.padding-block-medium {
	padding-block: var(--space-medium);
}

.padding-block-big {
	padding-block: var(--space-big);
}

.margin-clear {
	margin: 0;
}

.margin-bottom-huge {
	margin-bottom: var(--space-huge);
}

.margin-bottom-big {
	margin-bottom: var(--space-big);
}

.margin-bottom-medium {
	margin-bottom: var(--space-medium);
}

.margin-bottom-small {
	margin-bottom: var(--space-small);
}

.margin-bottom-tiny {
	margin-bottom: var(--space-tiny);
}

.margin-top-huge {
	margin-top: var(--space-huge);
}

.margin-top-big {
	margin-top: var(--space-big);
}

.margin-top-medium {
	margin-top: var(--space-medium);
}

.margin-top-small {
	margin-top: var(--space-small);
}

.margin-top-tiny {
	margin-top: var(--space-tiny);
}

.margin-right-small {
	margin-right: var(--space-small);
}

.margin-block-tiny {
	margin-block: var(--space-tiny);
}

.margin-block-small {
	margin-block: var(--space-small);
}

.margin-block-medium {
	margin-block: var(--space-medium);
}

.margin-block-big {
	margin-block: var(--space-big);
}

.margin-block-huge {
	margin-block: var(--space-huge);
}

/* MISCELLANEOUS */

.round {
	border-radius: 50%;
}

.box-shadow {
	box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
}

.box-shadow-small {
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.no-bullets {
	list-style: none;
	padding-left: 0;
}

a.no-decoration {
	text-decoration: none;
}

a.disabled {
	pointer-events: none;
	cursor: default;
	color: var(--color-neutral);
}

.uppercase {
	text-transform: uppercase;
}

.rounded-corners {
	border-radius: var(--border-radius);
}

.absolute-centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.buttons-gap {
	gap: var(--space-medium);
}