@font-face {
	font-family: Suisse;
	src: url('./src/fonts/SuisseIntl-Regular-WebXL.woff2');
}

@font-face {
	font-family: Suisse;
	src: url('./src/fonts/SuisseNeue-LightItalic-WebXL.woff2');
	font-style: italic;
}

:root {
	--footer-flex-direction: row;
	--about-width: 50%;
	--ML-align-items: flex-start;
	--Explanation-flex-direction: row;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	:root {
		--footer-flex-direction: column;
		--about-width: 100%;
		--ML-align-items: flex-end;
		--Explanation-flex-direction: column;
	}
}

body, html {
/* 	height: 200vh; */
	margin: 0;
	font-family: Suisse;
	font-size: 1.5vh;
}

p {
	margin: 0;
}

a {
	color: #000000;
	text-underline-offset: 20%;
}

a:hover {
	font-style: italic;
}

#Hero {
	background-size: cover;
	height: 100vh;
	color: #FFEB00;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 3vh;
	padding-right: 3vh;
}

#Mute {
	align-self: flex-start;
	position: absolute;
	padding-bottom: 20px;
	color: #FFEB00;
}

#backgroundVideo {
	position: absolute;
	left:0;
	top:0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: -100;
	background-color: black;
}

#Titre {
	width: fit-content;
	height: fit-content;
	white-space: nowrap;
	overflow: hidden;
	font-size: calc(100vw / 5.75);
}

footer, .footerLink {
	color: #FFEB00;
	display: flex;
	justify-content: space-between;
}

footer {
	position: fixed;
	bottom: 0;
	padding: 3vh;
	flex-direction: var(--footer-flex-direction);
	align-items: stretch;
	z-index: 100;
	width: calc(100vw - 6vh);
	height : auto
}

.aboveHero {
	color: #FFEB00;
}

.aboveProjects {
	color: black;
}

.footerLink {
	width: fit-content;
	white-space: nowrap;
}

#Home {
	display: inline;
}

#About, #Contact, #ML {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#contactML {
	display: flex;
	flex-direction: row;
	width: var(--about-width);
	justify-content: space-between;
}

#About {
	width: var(--about-width);
}

#Contact {
	width: 50%;
}

#ML {
	width: 50%;
	align-items: var(--ML-align-items);
}

#Projects {
	padding: 3vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#List {
	font-size: 1.75vh;
}

#Explanation {
	display: flex;
	flex-direction: var(--Explanation-flex-direction);
	justify-content: space-between;
}

#explanationText {
	flex-basis: 60%;
}

#Credit {
	flex-basis: 30%;
}

#Medias {
	flex-basis: 60%;
	position: relative;
}

.Italic {
	font-style: italic;
}