@font-face {
	font-family: 'Ethnocentric';
	src: url('../fonts/ethnocentric.ttf');
}

@font-face {
	font-family: 'Syntax', sans-serif;
	src: url('../fonts/Syntax.ttf');
}
@font-face {
	font-family: 'Syntax-Bold', sans-serif;
	src: url('../fonts/Syntax_Bold.ttf');
}
@font-face {
	font-family: 'Syntax-Regular', sans-serif;
	src: url('../fonts/Syntax_Regular.ttf');
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	font-family:"Syntax", sans-serif;
}

body {
	background: #141820;
}
a:hover {
	color: #141820;
}
a:active {
	color: #97ACD7;
}
em {
	font-weight: bolder;
	font-size: 1.2em;
	font-style: normal;
}


header {
	display: grid;
	grid-template-areas:
	"logo h1 ."
	"logo h2 ."
	"nav nav nav";
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr .5fr;
	grid-column-gap: 4vw;

	background: #9AAFD6;
}

.background-header {
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	background: #9AAFD6;
	background: radial-gradient(circle,#9AAFD6,#232833);
}

header img {
	grid-area: logo;

	justify-self: flex-end;
	align-self: center;

	margin: 32px 4vw 32px 32px;

	width: 6.7vw;
}

header h1 {
	grid-area: h1;

	justify-self: center;
	align-self: flex-end;

	text-align: center;
	font-family: "Ethnocentric", arial !important;
	font-size: 2.5rem;

}

header h2 {
	grid-area: h2;

	justify-self: center;
	align-self: flex-start;

	text-align: center;
	font-size: 2rem;
	font-weight: 500;
}

header nav {
	grid-area: nav;

	display: grid;
	justify-items: center;
	align-items: center;

	position: sticky;
	top: 0;

	background: #536587;
}

header nav button {
	display: none;
}

header nav ul {
	list-style: none;

	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 4rem;

}
header nav ul li {
	justify-self: center;
	align-self: center;
}

main {
	display: grid;

	justify-items: center;
	align-items: center;

	width: 73vw;
	margin: auto;

	background: #38445B;
}

main section {
	width: 100%;

	padding: 64px;

	display: grid;
	grid-gap: 8vh;
}

main section.projet {
	grid-auto-rows: 1fr;
	grid-gap: 4vw;

	justify-items: center;
	align-items: center;
}

main section.gallerie {
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2vw;

	justify-items: center;
	align-items: center;
}

main section.card figure {
	display: grid;

	justify-items: center;
	align-items: center;

	background: linear-gradient(180deg, #00FCFD, #001F1E);
	padding: 4px;
	border-radius: .25rem;

	width: 100%;
}

section.card figure figcaption {
	background: #10161A;
	width: 100%;
	height: 100%;
	padding: 8px;
}

main section.card figure img {
	width: 100%;
	height: 30vw;
	object-fit: cover;

	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
}

main section.projet figure.pro img {
	width: 42vw;
	height: 32vw;
	object-fit: cover;
}

main.about section h1 {
	font-family: "Ethnocentric", arial;
}

main.about section p {
	font-size: 1.25em;
	line-height: 1.5;
}

footer {
	display: grid;
	grid-template-rows: 1fr min-content min-content;

	justify-items: center;
	align-items: center;

	padding-top: 64px;
	padding-bottom: 64px;

	background: #273246;
}

footer nav {
	justify-self: center;
	align-self: center;

	display: grid;
	grid-template-columns:  repeat(4, 1fr);
	grid-column-gap: 6rem;

	margin-bottom: 2vw;
}
footer nav a {
	justify-self: center;
	align-self: center;

}

footer nav img {
	width: 4vw;
	height: 4vw;
	object-fit: contain;
}
footer nav a img:hover {
	background-color: #8FA2C6;
	border-radius: 100%;
}

footer nav a:nth-of-type(4) img:hover {
	border-radius: 7px;
}

footer p {
	text-align: center;
	margin-top: 8px;
}

@media (orientation: portrait) {
	header {
		grid-template-areas:
		"logo"
		"h1"
		"h2"
		"nav";
		grid-template-columns: 1fr;
		/* grid-template-rows: 1fr 1fr 1fr .5fr; */
		grid-template-rows: repeat(4, max-content);
		/* grid-row-gap: 32px; */
	}

	.background-header {
		grid-row: 1 / 4;
	}

	header img{
		justify-self: center;
		margin: 0;
		width: 32vw;
		margin-top: 32px;
	}


	header h1 {
		align-self: center;
		margin-top: 32px;

	}

	header h2 {
		align-self: center;
		margin-top: 32px;
		padding-bottom: 32px;

	}

	header nav ul {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, 1fr);
		grid-row-gap: 8px;

		padding: 16px 0;
		margin: 0;
	}

	main {
		width: 100%;
		margin: 0;
	}

	main section.gallerie {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 1fr);
		grid-gap: 8vh;

		justify-items: center;
		align-items: center;
	}

	main section.card figure img {
		height: 46vh;
	}

	main section.projet figure.pro img {
		width: 100%;
		height: 32vh;
		object-fit: cover;
	}

	main.about section {
		grid-gap: 4vh;
		padding: 42px 16px;
	}

	main.about section h1 {
		font-size: 22px;
	}
	/* .contact{
	grid-gap: 4vh;
	} */
	main#video section {
		padding: 40px 20px;
		grid-gap: 4vh;
	}
	main#video section h2 {
		font-size: 16pt;
	}

	main section.edk {
		padding: 0px
	}
	footer {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	footer nav {
		justify-self: center;
		align-self: center;

		display: grid;
		grid-template-columns:  repeat(2, 1fr);
		grid-column-gap: 3rem;
		grid-row-gap: 1rem;

		margin-bottom: 8vw;
	}

	footer nav img {
		width: 16vw;
		height: 16vw;
		object-fit: contain;
	}

	/* button menu */
	header nav {
		height: 44px;
		overflow: hidden;
	}

	header nav.open {
		height: max-content;
	}

	header nav button {
		display: initial;

		background: transparent;
		border: none;
	}

	.baton {
		background: white;

		width: 32px;
		height: 4px;

		border-radius: 64px;

		margin-top: 8px;
	}

	.mr-b {
		margin-bottom: 8px;
	}
}

@media (max-width: 1796px) and (orientation: landscape) {
	header h1 {
		font-size: 32px;

	}
}
@media (max-width: 1437px) and (orientation: landscape) {
	header h1 {
		font-size: 24px;
	}
	header h2 {
		font-size: 22px;
	}
}
@media (max-width: 900px) and (orientation: landscape) {
	main section.gallerie {
		padding-left: 40px;
		padding-right: 40px;
	}

	main section.card figure img {
		height: 25vw;
	}
}