:root {
	--switch-size: 13px;
	--switch-gap: 4px;

	--background-dark: #191919;
}

* {
	margin: 0;
	padding: 0;
	color: #1b1b1b;
	box-sizing: border-box;
}

@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_regular.woff');
	font-weight: 400;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_it.woff');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_light.woff');
	font-weight: 300;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_lightit.woff');
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_lightex.woff');
	font-weight: 300;
	font-stretch: expanded;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_md.woff');
	font-weight: 500;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_mdex.woff');
	font-weight: 500;
	font-stretch: expanded;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_medextit.woff');
	font-weight: 500;
	font-style: italic;
	font-stretch: expanded;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_bold.woff');
	font-weight: 700;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_boldit.woff');
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_boldcn.woff');
	font-weight: 700;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_boldcnit.woff');
	font-weight: 700;
	font-style: italic;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_xbd.woff');
	font-weight: 800;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_xbdit.woff');
	font-weight: 800;
	font-style: italic;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_xbdcn.woff');
	font-weight: 800;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_xbdcnit.woff');
	font-weight: 800;
	font-style: italic;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_super.woff');
	font-weight: 900;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_superitalic.woff');
	font-weight: 900;
	font-style: italic;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_cn.woff');
	font-weight: 400;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_mdcn.woff');
	font-weight: 500;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_mdcnit.woff');
	font-weight: 500;
	font-style: italic;
	font-stretch: condensed;
}
@font-face {
	font-family: 'Akzidenz Light';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_light.woff');
	font-weight: 300;
}
@font-face {
	font-family: 'Akzidenz Extended';
	src: url('/assets/fonts/Akzidenz/akzidenzgroteskpro_lightex.woff');
	font-weight: 300;
	font-stretch: expanded;
}
.text-lighter {
	font-weight: lighter;
}
.centered-text {
	text-align: center;
}

.right-text {
	text-align: right;
}
.text-s {
	font-size: 0.6em;
}
.text-m {
	font-size: 0.8em;
}
.text-l {
	font-size: 0.9em;
}
.text-xs {
	font-size: 0.6em;
}
@media (max-width: 768px) {
	.text-l {
		font-size: 0.8em;
	}
	.text-m {
		font-size: 0.7em;
	}
	.text-s {
		font-size: 0.7em;
	}
	.text-xs {
		font-size: 0.5em;
	}
}

a {
	text-decoration: none;
	color: inherit;
}

.gutters {
	padding: 15px;
}
.gutters-left {
	padding-left: 15px;
}
.gutters-top {
	padding-top: 15px;
}
.gutters-right {
	padding-right: 15px;
}
.gutters-bottom {
	padding-bottom: 15px;
}

.hidden {
	/* opacity: 0; */
	display: none;
}

li {
	list-style: none;
}

#navbar {
	display: flex;

	font-family: 'Akzidenz Extended', sans-serif;
	user-select: none;

	justify-content: space-between;
}
#navbar-links a {
	margin: 0 0 0 4vw;
}
#navbar-links a:first-child {
	margin: 0 0 0 8vw;
}
#navbar sup {
	font-size: 0.6em;
	margin-left: 2px;
}
#about {
	cursor: pointer;
}

/* thème switch */
#theme-switch {
	display: flex;
	position: relative;
	gap: var(--switch-gap);
	height: var(--switch-size);
	border-radius: 10px;
	transition: 0.2s;
	margin-top: 3px;
	cursor: pointer;
}
#theme-switch * {
	display: block;
	width: var(--switch-size);
	height: var(--switch-size);
	border-radius: 10px;
	opacity: 1;
	transition: 0.2s;
	padding: 0;
}
#theme-switch *.hover {
	opacity: 0.8;
}
#theme-switch #theme-dark {
	background: #d7d7d73d;
}
#theme-switch #theme-light {
	background: #d7d7d733;
}
#selector {
	position: absolute;
	background-color: #bebebe;
	opacity: 1;
	height: var(--switch-size);
	width: var(--switch-size);
	pointer-events: none;
	padding: 0;
	opacity: 0.8;
}
#theme-switch:hover #selector {
	width: 100%;
}
#selector.dark {
	right: 0;
}

@media (max-width: 768px) {
	#navbar {
		flex-shrink: 1;
		position: fixed;
		width: 100vw;
		background-color: white;
		transition: 0.2s;
	}
	body.dark-theme #navbar {
		background-color: var(--background-dark);
	}
	#navbar.scroll-up {
		transform: translateY(-100%);
	}
	#footer {
		position: fixed;
		bottom: 0;
		background-color: white;
		width: 100vw;
	}

	body.dark-theme #footer {
		background-color: var(--background-dark);
	}

	#aboutDiv {
		position: fixed;
	}
	#projetDiv {
		display: flex;
		flex-direction: column-reverse;
		margin-top: 10vh;
	}
	body {
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.carouselElement img,
	.carouselElement video {
		width: 100%;
	}
	#theme-switch {
		visibility: hidden;
	}
}
@media (min-width: 769px) {
	#navbar {
		height: 17vh;
		flex-shrink: 0;
	}
	body {
		overflow-y: hidden;
	}
	#projetDiv {
		flex-grow: 1;
	}
}
body,
body * {
	transition:
		color 0.4s,
		background-color 0.4s;
}
body.dark-theme {
	background-color: var(--background-dark);
	color: white;
}
body.dark-theme * {
	color: #d7d7d7;
}

#footer {
	display: flex;

	font-family: 'Akzidenz', sans-serif;
	height: auto;
	position: fixed;
	bottom: 0;
	width: 100vw;
}

.flex-to-bottom {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#footer-mail,
#coralie {
	width: 33vw;
	flex-shrink: 0;
	flex-grow: 0;
}

#footer-text,
#navbar-text {
	flex-grow: 1;
}

@media (max-width: 999px) {
	#footer-text,
	#navbar-text {
		display: none;
	}
	#coralie {
		flex-grow: 1;
	}

	#aboutDiv {
		display: flex;
		flex-direction: column;
		height: 100vh;
		justify-content: center;
	}
	#aboutDiv p {
		font-size: 0.6rem;
	}
}

@media (max-height: 600px) {
	#footer-text {
		display: none;
	}
}

#footer-links {
	flex-grow: 1;

	display: flex;
	justify-content: flex-end;

	gap: 50px;
	user-select: none;
}
#footer-links a:not(:first-child):before {
	content: '| ';
	user-select: none;
}
#footer-links a:hover {
	text-decoration: underline;
}

#footer p {
	font-family: 'Akzidenz', sans-serif;
}

#aboutDiv {
	position: fixed;
	background: rgba(255, 255, 255, 0.9);
	width: 100vw;
	height: 100vh;

	top: 0;

	font-family: 'Akzidenz Extended', sans-serif;

	transition:
		visibility 0.2s,
		opacity 0.2s ease-in-out;

	opacity: 0;
	visibility: hidden;

	z-index: 1;
}
#body.dark-theme #aboutDiv {
	background-color: #191919fa;
}

#aboutDiv p {
	font-weight: bold;
	margin-bottom: 15px;
	padding: 0 8%;
}

#aboutDiv a:hover {
	text-decoration: underline;
}

#aboutDiv #aboutEmphasis {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 15px;
}

body.is-template-home {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
body.is-template-projet {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

@media (max-width: 768px) {
	body.is-template-projet {
		flex-direction: column;
		height: auto;
	}
}

body.is-template-home #carouselDiv {
	flex-grow: 1;
}

/* Desktop */
@media (min-width: 769px) {
	#carouselDiv {
		min-height: 66vh;
		height: 66vh;
		display: flex;
		flex-shrink: 0;
	}

	#carousel {
		display: flex;
		gap: 15px;
		flex-direction: row;
		flex: 1;
		height: auto;
		min-height: 66vh;
		padding: 0 15px;
		overflow-x: hidden;
		overflow-y: hidden;
		scrollbar-width: none;
		transform: translateZ(0);
	}

	.carouselElement {
		display: flex;
		position: relative;
		min-height: 66vh;
		height: auto;
		transition: 0.1s ease-in-out;
	}

	.carouselElement img,
	.carouselElement video {
		height: 66vh;
		object-fit: cover;

		user-select: none;
		-ms-user-select: none;
		-drag: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
	}
	.carouselElement video {
		cursor: pointer;
	}

	.credits {
		position: absolute;

		height: 100%;

		flex-direction: column;

		justify-content: center;

		line-height: 1.4;

		z-index: 1;

		display: none;

		mix-blend-mode: difference;
		gap: 15px;
	}
	#carouselDiv:hover .credits {
		display: flex;
	}

	.credits p {
		/* color: #BFBFBF; */
		color: white;
	}
}

/* Mobile */
.video-mute-toggle {
	display: none;
}

@media (max-width: 768px) {
	.carouselElement {
		position: relative;
	}

	.video-mute-toggle {
		display: block;
		position: absolute;
		right: 10px;
		bottom: 15px;
		z-index: 2;
		border: 0;
		background: rgba(255, 255, 255, 0.9);
		color: #1b1b1b;
		font-family: 'Akzidenz', sans-serif;
		font-size: 14px;
		cursor: pointer;
		width: 10vw;
		height: 10vw;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.video-mute-toggle .mute-logo {
		flex-grow: 0;
	}

	#carousel {
		padding: 0 15px;
		padding-bottom: 8vh;
		display: flex;
		flex-direction: column;
		width: 100vw;
		gap: 15px;
	}
	body.is-template-home #carouselDiv {
		padding: 16vh 0 0 0;
	}
	.credits {
		padding: 0;
		display: flex;
		gap: 3px;
		justify-content: space-between;
		padding-top: 5px;
	}
	.credits p {
		color: #ababab;
		flex-grow: 0;
		width: 30%;
	}

	.inline-credits {
		margin-bottom: 8px;
	}

	/* .credits p:first-child {
		columns: 3;
		width: 33%;
		flex-grow: 1;
	}
	.credits p {
		columns: 2;
		margin-bottom: 15px;
		width: 66%;
	} */
}
.credits {
	font-family: 'Akzidenz', sans-serif;
}

#carousel li a {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 5px;
	user-select: none;
}

@keyframes mainPageCarouselImgLoad {
	0% {
		filter: blur(100px);
		opacity: 0.1;
	}
	20% {
		filter: blur(100px);
	}

	100% {
		filter: blur(0);
		opacity: 1;
	}
}
@keyframes mainPageBlurOnLoad {
	0% {
		filter: blur(10px);
		opacity: 0.1;
	}
	50% {
		filter: blur(10px);
	}

	100% {
		filter: blur(0);
		opacity: 1;
	}
}

body.is-template-home .carouselElement:hover {
	opacity: 0.75;
}

.carouselElement span {
	font-family: 'Akzidenz', sans-serif;
	color: #919191;
	display: block;
	flex-shrink: 0;
	flex-grow: 0;
	height: 20px;
}

body.is-template-home #navbar,
body.is-template-home #footer {
	animation: mainPageBlurOnLoad 0.5s ease-in-out;
}
body.is-template-home #projects {
	opacity: 0;
	pointer-events: none;
}
.blurOnLoad {
	animation: mainPageCarouselImgLoad 0.5s ease-in-out;
}

#projet-infos {
	font-family: 'Akzidenz', sans-serif;
}
@media (min-width: 769px) {
	#projet-infos {
		display: flex;
		flex-grow: 1;
		flex-shrink: 1;
		padding-top: 5vh;
	}
	#projet-titres {
		width: 33vw;
		flex-shrink: 0;
		line-height: 1.4;
	}
}
@media (max-width: 768px) {
	#projet-titres {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	#projet-titres p {
		flex-grow: 0;
		flex-shrink: 0;
	}
	#projet-titres p:last-child {
		text-align: right;
		grid-area: 1 / 2 / 2 / 3;
	}

	.div1 {
		grid-area: 1 / 1 / 2 / 2;
	}
	.div2 {
		grid-area: 2 / 1 / 3 / 2;
	}
}

#projet-description {
	padding-top: 4px;
	line-height: 1.2;
	overflow-y: scroll;
}
#projet-description {
	width: 50vw;
}
@media (max-height: 999px) {
	#projet-infos {
		padding-top: 2vh;
	}
}
@media (max-width: 999px) {
	#projet-description {
		width: 100%;
	}
}

@media (max-width: 999px) {
	.desktop-only {
		visibility: hidden;
		display: none;
	}
}
@media (min-width: 1000px) {
	.mobile-only {
		visibility: hidden;
		display: none;
	}
}

@media (max-width: 768px) {
	.for-big-screens {
		visibility: hidden;
		display: none;
	}
}
@media (min-width: 769px) {
	.for-small-screens {
		visibility: hidden;
		display: none;
	}
}