/*------------------------------------------------------------
# ROOT
------------------------------------------------------------*/


:root {

	/*----- fonts -----*/

	--ff-basic: sans-serif;
	--ff-header: sans-serif;
	/*--ff-fa: 'Font Awesome 5 Pro';*/
	--ff-fa: 'Font Awesome 6 Pro';

	--fw-basic-n: 400;
	--fw-basic-b: 700;
	--fw-header-n: 400;
	--fw-header-b: 700;

	font-size: 16px;
	--fz-0: 14px;
	--fz-1: 32px; /* 14 + 10 + 16 = 14 + 26 */
	--fz-2: 24px; /* 14 + 3,8 + 6,2 = 14 + 10 */
	--fz-3: 18px; 
	--fz-4: 14px;
	--fz-5: 12px;
	--fz-6: 10px;

	--lh: 1.25;


	/*----- indents -----*/

	--gap: 16px;
	--gap-small: calc(var(--gap) / 2);
	--gap-big: calc(var(--gap) * 2);

	--spacer: calc(var(--gap) * 4);
	--spacer-small: calc(var(--spacer) / 2);
	--spacer-big: calc(var(--spacer) * 2);

	--limiter: calc(var(--gap) * 75);
	--limiter-padding: var(--gap);

	--radius: var(--gap-small);


	/*----- colors -----*/

	--c-white: 255 255 255;
	--c-white-i: 0 0 0;

	--c-black: 0 0 0;
	--c-black-i: 255 255 255;

	--c-grey: 185 185 185;
	--c-grey-lighten: 243 243 243;
	--c-grey-darken: 128 128 128;

	--c-text: var(--c-black);
	--c-text-i: var(--c-black-i);

	--c-primary: 11 21 142; /* #0B158E */
	--c-primary-i: 255 255 255;
	--c-primary-lighten: 14 29 190;
	--c-primary-darken: 7 14 95;

	--c-secondary: 5 9 37; /* #050925 */
	--c-secondary-i: 255 255 255;

	--c-tertiary: 225 29 72;
	--c-tertiary-i: 26 188 156;


	/*----- inputs -----*/

	--input-display: inline-block;

	--input-padding-v: .25em;
	--input-padding-h: .75em;
	--input-lh: 1.5;
	--input-height: var(--input-lh);

	--input-ff: var(--ff-basic);
	--input-fz: var(--fz-0);
	--input-fw: var(--fw-0-n);

	--input-background-color: var(--c-white);
	--input-content-color: var(--c-white-i);
	--input-content-color-alpha: 1;
	--input-border-color: var(--input-content-color);
	--input-placeholder-color-alpha: .5;

	--button-background-color: var(--c-primary);
	--button-content-color: var(--c-primary-i);
	--button-content-color-alpha: 1;
	--button-border-color: var(--button-background-color);

	--input-border-width: .5px;
	--input-border-style: solid;
	--input-border-radius: calc(var(--radius) / 2);
}




/*------------------------------------------------------------
# ALL
------------------------------------------------------------*/


* {
	outline: unset;
}
*, *::before, *::after {
	box-sizing: border-box;
	vertical-align: middle;
}
*:first-child {
	margin-top: unset;
}
*:last-child {
	margin-bottom: unset;
}




/*------------------------------------------------------------
# DOCUMENT
------------------------------------------------------------*/


body {
	margin: unset;
	font-family: var(--ff-basic);
	font-size: var(--fz-0);
	line-height: var(--lh);
}




/*------------------------------------------------------------
# CLEARFIX
------------------------------------------------------------*/


section::before, section::after,
aside::before, aside::after,
.clearfix::before, .clearfix::after {
	content: "";
	display: table;
	clear: both;
}




/*------------------------------------------------------------
# TAG'S
------------------------------------------------------------*/


figure, picture, img, video {
	vertical-align: middle;
}

iframe {
	vertical-align: middle;
}

a {
	color: rgb(var(--c-primary));
	cursor: pointer;
}
a:hover {
}
a:active {
}


h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-header);
	font-weight: var(--fw-header-n);
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}
h1 { font-size: var(--fz-1); }
h2 { font-size: var(--fz-2); }
h3 { font-size: var(--fz-3); }
h4 { font-size: var(--fz-4); }
h5 { font-size: var(--fz-5); }
h6 { font-size: var(--fz-6); }

p {
	margin-top: var(--gap-small);
	margin-bottom: var(--gap-small);
}




/*------------------------------------------------------------
# MEDIA's
------------------------------------------------------------*/


img {
	max-width: 100%;
	object-fit: cover;
}
video {
	width: 100%;
	max-width: 100%;
}




/*------------------------------------------------------------
# LIST's
------------------------------------------------------------*/


ul, ol {
	padding-left: 2.5em;
	margin-top: var(--gap-small);
	margin-bottom: var(--gap-small);
}




/*------------------------------------------------------------
# TABLE's
------------------------------------------------------------*/


table {
	width: 100%;
	border-spacing: unset;
	border-collapse: collapse;
	border-radius: var(--radius);
}
td, th {
	padding: .25em .75em;
	border-style: solid;
	border-width: .5px;
	border-color: rgb(var(--c-black));
}
thead > * {
	background-color: rgb(var(--c-primary));
	color: rgb(var(--c-primary-i));
}

table > *:first-child > tr:first-child > *:first-child,
table > tr:first-child > *:first-child {
	/*border-top-left-radius: var(--radius);*/
}




/*------------------------------------------------------------
# SPACER's
------------------------------------------------------------*/


.limiter {
	max-width: var(--limiter);
	margin-inline: auto;
	padding-inline: var(--limiter-padding);
}
.spacer {
	margin-top: var(--spacer);
	margin-bottom: var(--spacer);
}
.spacer_small {
	margin-top: var(--spacer-small);
	margin-bottom: var(--spacer-small);
}
.spacer_big {
	margin-top: var(--spacer-big);
	margin-bottom: var(--spacer-big);
}




/*------------------------------------------------------------
# INPUT's
------------------------------------------------------------*/


/*----- all -----*/
input,
select,
textarea,
button,
.button,
.btn,
input[type="file"] + label {

	display: var(--input-display);
	margin: unset;
	padding: var(--input-padding-v) var(--input-padding-h);
	font-family: var(--input-ff);
	font-size: var(--input-fz);
	font-weight: var(--input-fw);
	line-height: var(--input-lh);
	min-height: calc(1em * var(--input-height));
	border-width: var(--input-border-width);
	border-style: var(--input-border-style);
	border-color: rgb(var(--input-border-color));
	border-radius: var(--input-border-radius);
	background-color: rgb(var(--input-background-color));
	box-sizing: content-box;
	color: rgba(var(--input-content-color) / var(--input-content-color-alpha));
	opacity: 1;
}
*:focus,
input[type="file"]:focus + label {
	outline-width: 2px;
	outline-style: solid;
	outline-color: rgba(var(--button-border-color) / .25);
	outline-offset: 0;
}
input::placeholder,
textarea::placeholder {
	color: rgba(var(--input-content-color) / var(--input-placeholder-color-alpha));
}

/*----- pseudo -----*/
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="file"] {
	line-height: 1;
}
input::-webkit-datetime-edit,
input::-webkit-textfield-decoration-container {
	padding: unset;
	margin: unset;
	line-height: var(--input-lh);
	height: calc(1em * var(--input-height));
	vertical-align: middle;
}
input::-webkit-datetime-edit-fields-wrapper {
	padding: unset;
	margin: unset;
	line-height: 1;
}
input::-webkit-datetime-edit-year-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-second-field,
input::-webkit-datetime-edit-millisecond-field,
input::-webkit-datetime-edit-meridiem-field,
input::-webkit-datetime-edit-text {
	display: inline-block;
	padding: unset;
	margin: unset;
	vertical-align: middle;
	line-height: var(--input-height);
}
input::-webkit-datetime-edit-text {
	padding: 0 1px;
}


/*----- select -----*/
option {
	background-color: rgba(var(--input-background-color));
	color: rgba(var(--input-content-color));
}

/*----- buttons -----*/
input[type="submit"],
input[type="button"],
input[type="file"] + label,
button,
.button,
.btn {
	background-color: rgb(var(--button-background-color));
	color: rgb(var(--button-content-color));
	border-color: rgb(var(--button-border-color));

}
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
input[type="file"] + label,
input[type="file"] {
	cursor: pointer;
}
input[type="file"]::file-selector-button {
	background-color: rgb(var(--button-background-color));
	border-width: var(--input-border-width);
	border-style: var(--input-border-style);
	border-color: rgb(var(--button-border-color));
	color: rgb(var(--button-content-color));
	line-height: 1;
	box-sizing: border-box;
	height: calc(1em * var(--input-height));
	padding-inline: var(--input-padding-h);
	border-radius: var(--input-border-radius);
	vertical-align: middle;
}
input[type="file"] + label::before {
	content: attr(data-file-empty);min-height: calc(1em * var(--input-height));
	display: flex;
	align-items: center;
}
input[type="file"]:has(+label) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}
input[type=file][data-file-count]:not([data-file-count="0"]):valid + label::before {
	content: attr(data-file-chosen);
}

/*----- checkbox, radio -----*/
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(1em * var(--input-lh));
	height: calc(1em * var(--input-lh));
	padding: var(--input-padding-v);
	cursor: pointer;
}
input[type="checkbox"]::before,
input[type="radio"]::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--input-padding-v);
	border-width: var(--input-border-width);
	border-style: var(--input-border-style);
	/*border-color: rgb(var(--input-content-color));*/
	border-color: rgb(var(--button-border-color));
}
input[type="checkbox"]::before {
	border-radius: calc(var(--input-border-radius) - var(--input-padding-v));
}
input[type="radio"],
input[type="radio"]::before {
	border-radius: 50%;
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
	/*background-color: rgb(var(--input-content-color));*/
	background-color: rgb(var(--button-background-color));
}

/*----- range  -----*/
input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
::-webkit-slider-runnable-track {
	/*display: unset;*/
	height: var(--input-border-width);
	background-color: rgb(var(--input-border-color));
}
::-moz-range-track {
	/*display: unset;*/
	height: var(--input-border-width);
	background-color: rgb(var(--input-border-color));
}

::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(1em * var(--input-lh));
	height: calc(1em * var(--input-lh));
	transform: translateY(-50%);
	background-color: rgb(var(--button-background-color));
	border-style: var(--input-border-style);
	border-width: var(--input-border-width);
	border-color: rgb(var(--button-border-color));
	border-radius: 50%;
}
::-moz-range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(1em * var(--input-lh));
	height: calc(1em * var(--input-lh));
	/*transform: translateY(-50%);*/
	background-color: rgb(var(--button-background-color));
	border-style: var(--input-border-style);
	border-width: var(--input-border-width);
	border-color: rgb(var(--button-border-color));
	border-radius: 50%;
}

input[type="color"] {
	width: unset;
	height: unset;
	width: calc(1em * var(--input-height));
	height: calc(1em * var(--input-height));
	padding: var(--input-padding-v);
	line-height: 1;
}
input[type="color"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	/*display: block;*/
	padding: unset;
	border: unset;
	width: 100%;
	height: 100%;
	line-height: 1;
	/*display: block;*/
}
input[type="color"]::-webkit-color-swatch {
	border: unset;
}
input[type="color"]::-moz-color-swatch {
	border: unset;
	width: 1em;
	height: 1em;
}

/*----- hover, active -----*/
input:hover,
select:hover,
textarea:hover,
button:hover,
.button:hover,
.btn:hover,
[type="button"]:hover,
[type="file"]:hover + label {
	--button-background-color: var(--c-primary-lighten);
}
input:active,
select:active,
textarea:active,
button:active,
.button:active,
.btn:active,
[type="button"]:active,
[type="file"]:active + label {
	--button-background-color: var(--c-primary-darken);
}

/*----- disabled -----*/
input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.button:disabled,
.btn:disabled,
[type="button"]:disabled,
[type="file"]:disabled + label {
	cursor: unset;
}




/*----- custimize -----*/
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
	--input-lh: 1;
	--input-height: 1;
}
/*----- disable customize -----*/
input:disabled,
input:disabled:hover,
input:disabled:active,
select:disabled,
select:disabled:hover,
select:disabled:active,
textarea:disabled,
textarea:disabled:hover,
textarea:disabled:active,
button:disabled,
button:disabled:hover,
button:disabled:active,
.button:disabled,
.button:disabled:hover,
.button:disabled:active,
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active,
[type="button"]:disabled,
[type="button"]:disabled:hover,
[type="button"]:disabled:active,
[type="file"]:disabled + label,
[type="file"]:disabled:hover + label,
[type="file"]:disabled:active + label {

	--input-background-color: var(--c-grey-lighten);
	--input-content-color: var(--c-grey-darken);
	--input-border-color: var(--input-content-color);

	--button-background-color: var(--c-grey-darken);
	--button-content-color: var(--c-grey);
	--button-border-color: var(--button-background-color);
}

















/*------------------------------------------------------------
# SCROLL
------------------------------------------------------------*/

html {
	scroll-behavior: smooth;
}
* {
	scroll-margin-top: calc(var(--gap) * 2);
}















/*------------------------------------------------------------
# SECTION: NAV
------------------------------------------------------------*/

.nav a {
	text-decoration: unset;
	color: inherit;
}
.nav ul {
	list-style: none;
	padding: unset;
	margin: unset;
	display: flex;
	gap: var(--gap);
}