@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/*? Global */
* {
	font-family: Roboto, "Open Sans", sans-serif;

	outline: none !important;
}

/*? Color variables edition */
:root {
	--bs-primary: #f67907;
	--bs-secondary: #faa51c;
	--bs-dark: #24282c;
	--header-height: 150px;
}

/*? BS class addition / modification */
.btn-primary {
	background-color: var(--bs-primary) !important;
}

.btn-secondary {
	background-color: var(--bs-secondary) !important;
}

.bg-dark {
	background-color: var(--bs-gray-dark) !important;
}

.bg-darker {
	background-color: var(--bs-dark) !important;
}

.text-justify {
	text-align: justify;
}

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

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

.bg-alpha {
	background-color: rgba(0, 0, 0, 0.6) !important;
}

.link-white {
	color: var(--bs-white) !important;
}

.flex {
	display: flex;
}

.rounded-4 {
	border-radius: 0.4rem !important;
}

.rounded-5 {
	border-radius: 0.5rem !important;
}

.no-text-wrap {
	white-space: nowrap;
}

.page-item.active a {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

a.page-link {
	color: var(--bs-primary);

	box-shadow: none !important;
}

a.page-link:hover,
a.page-link:focus {
	color: var(--bs-secondary);
}

em {
	color: var(--bs-primary);
}

a.link-primary {
	color: var(--bs-primary);

	transition: color 0.5s;
}

a.link-primary:hover,
a.link-primary:focus {
	color: var(--bs-secondary);
}

span.vertical-separator {
	display: block;

	width: 1px;
	height: 80%;
}

/*? Custom style */
header {
	position: relative;

	width: 100%;
}

header a {
	text-decoration: none;
}

header h1 {
	height: 100%;

	line-height: var(--header-height);
}

header img {
	height: var(--header-height);

	background-color: var(--bs-dark);

	border-radius: 50%;
}

header ul {
	margin: 0;
	padding: 0;

	height: 100%;

	list-style: none;
}

header ul li {
	line-height: var(--header-height);
}

header ul li a {
	padding: 0 !important;
	margin-right: 18px;

	color: white;

	transition: color 0.5s;
}

header ul li a.active {
	color: var(--bs-primary);
}

header ul li a.active:hover,
header ul li a.active:focus {
	color: var(--bs-primary);
}

header ul li a:hover,
header ul li a:focus {
	color: var(--bs-secondary);
}

header ul li a i {
	margin-right: 3px;
}

header button.navbar-toggler {
	position: absolute;

	top: 0;
	right: 0;

	margin: 5px;

	font-size: 25px;

	color: var(--bs-primary);

	transition: color 0.5s;
}

header button.navbar-toggler:hover,
header button.navbar-toggler:focus {
	color: var(--bs-secondary);

	box-shadow: none;
}

main {
	min-height: calc(100vh - (var(--header-height)) - (24px + 32px));

	background-color: #f0f0f0;
}

main.hero-banner {
	background-image: url("../img/night_parc.jpg");
	background-position: 50% 75%;
	background-size: cover;
	background-repeat: no-repeat;
}

main h2 {
	margin: 0 !important;
	padding: 15px 0 !important;
}

main h2 i {
	color: var(--bs-primary);
}

main hr {
	margin: 0;

	height: 40px !important;

	background-color: #ffffff;

	opacity: 1;
}

section.hero-banner {
	z-index: 0;

	background-image: url("../img/parc_de_nuit.jpg");
	background-position: 50% 23%;
	background-size: cover;
	background-repeat: no-repeat;
}

section.hero-banner div.container p {
	max-width: 80%;
}

article {
	transition: transform 0.5s;
}

article:hover,
article:focus {
	cursor: pointer;

	transform: scale(1.02);
}

article a {
	text-decoration: none;

	color: white;
}

article a:hover,
article a:focus {
	color: inherit;
}

article p.text-primary {
	transition: color 0.5s;
}

article:hover p.text-primary,
article:focus p.text-primary {
	color: var(--bs-secondary) !important;
}

div.hero-banner {
	height: 400px;

	background-image: url("../img/grand_parc_de_nuit.jpg");
	background-position: 50% 20%;
	background-size: cover;
	background-repeat: no-repeat;
}

.btn {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;

	transition: background-color 0.5s;
}

.btn:hover,
.btn:focus {
	background-color: var(--bs-secondary) !important;
}

.form-control {
	outline: none !important;
	box-shadow: none !important;

	border-width: 2px;
	border-color: rgba(75, 75, 75, 0.666);
}

.form-control:focus {
	border-color: var(--bs-secondary);
}

aside.modal button.btn-close {
	box-shadow: none;
}

iframe {
	border: none;
}

footer {
	margin-top: 0 !important;
}

/*? Animation */
@keyframes nav {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*? Responsive */
@media (max-width: 1400px) {
	header ul li {
		line-height: 75px;
	}

	header ul li a {
		margin: 10px;
	}
}

@media (max-width: 1200px) {
	header ul li a {
		margin-right: 0;
	}
}