@font-face {
	font-family: 'Ubuntu';
	src:
		url("fonts/ubuntu-c-webfont.eot") format("eot"),
		url("fonts/ubuntu-c-webfont.woff") format("woff"),
		url("fonts/ubuntu-c-webfont.ttf") format("ttf"),
		url("fonts/ubuntu-c-webfont.svg") format("svg");
}

@media (min-width: 1024px) {
}

@media (min-width: 612px) and (max-width: 1023px) {
}

@media (max-width: 611px) {
}

* {
	font-family: Ubuntu, sans-serif;
	padding: 0;
	margin: 0;
	border: none;
	border-collapse: collapse;
	box-sizing: border-box;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	touch-action: manipulation;

	color: #C1C1C1;

	text-decoration: none;

	-ms-overflow-style: none;  // IE 10+
	overflow: hidden;
    scrollbar-width: none;  // Firefox
}

*:focus {
	outline: none;
}

*::-webkit-scrollbar  {
	display: none;
}

h1, h2, h3, h4, h5, h6, p {
	font-size: 1em;
}

h1, a {
	font-size: 1.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.2em;
}

.button {
	border: 1px double #202020;
	background-color: rgba(96, 112, 112, 0.8);
	/* opacity: .8; */
	backdrop-filter: blur(.5px);
	color: #C1C1C1;
	transition: background-color .3s, color .3s, border-color .3s, opacity .7s;

	cursor: pointer;
}

.button:hover {
	border: 1px double #808080;
	background-color: #207070;
	color: #EFEFEF;
	opacity: 1;
	transition: background-color .3s, color .3s, border-color .3s, opacity .7s;
}

.clickable {
	border: 2px double #202020;
	background-color: rgba(2, 2, 2, 0.1);
	/* opacity: .8; */
	backdrop-filter: blur(3px);
	color: #C1C1C1;
	transition: background-color .3s, color .3s, border-color .3s, opacity .7s;

	cursor: pointer;
}

.clickable:hover {
	border: 2px double #808080;
	background-color: #020202;
	color: #EFEFEF;
	opacity: 1;
	transition: background-color .3s, color .3s, border-color .3s, opacity .7s;
}

body {
	height: 100svh;
	width: 100vw;

	background-color: black;
}

canvas {
	position: absolute;
	top: 7svh;
	z-index: -1;	

	border: 2px double #000707;
	background-color: #010909;
	/* opacity: .5; */
	pointer-events: none;
}

header {
	width: 100%;
	height: 7%;

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 0 5%;

	background-color: #0E1212;
}


/* Top menu*/
@media (min-width: 1024px) {
	#header-menu {
		position: relative;
		top: -100%;
		height: 100%;
		width: 60%;

		display: flex;
		justify-content: space-between;
		align-items: center;

		transition: top 1s;
	}

	#header-menu.displayed {
		top: 0;
		transition: top .2s;
	}

	#header-icon {
		display: none;
	}
}

@media (max-width: 1023px) {
	#header-menu {
		display:  none;
	}

	#header-icon {
		position: relative;
		top: -100%;
		height: 100%;

		display: flex;
		align-items: center;

		transition: top 1s;
	}

	#header-icon.displayed {
		top: 0;
		transition: top .2s;
	}
}

#header-menu a {
	font-size: 1.5em;
	height: 100%;
	flex-grow: 1;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: transparent;
	border: 1px solid transparent;

	transition: background-color 0.3s, border-color 0.3s;
}

#header-menu a:hover {
	background-color: #0E1515;
	border: 1px solid #0E1B1B;

	transition: background-color 0.3s, border-color 0.3s;
}

main {
	width: 100%;
	height: 90%;

	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: 1fr;

	overflow-y: auto;
	scroll-snap-type: y mandatory;

	scroll-behavior: smooth;
}

.page {
	width: 100vw;
	height: 90svh;

	padding: 0 5%;

	display: flex;
	align-items: center;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}

footer {
	width: 100%;
	height: 3%;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: #0E1212;
}

footer select {
	background-color: transparent;
}

/* Main menu */
@media (min-width: 1024px) {
	#main-page {
		justify-content: flex-end;
	}

	#main-menu {
		width: 60%;
	}

	#main-menu a {
		justify-content: flex-end;
	}
}

@media (min-width: 612px) and (max-width: 1023px) {
	#main-page {
		justify-content: flex-end;
	}

	#main-menu {
		width: 80%;
	}

	#main-menu a {
		justify-content: flex-end;
	}
}

@media (max-width: 611px) {
	#main-page {
		justify-content: center;
	}

	#main-menu {
		width: 100%;
	}

	#main-menu a {
		justify-content: flex-start;
	}
}

#main-menu {
	height: 70%;

	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: 1fr;
	gap: 5%;
}

#main-menu a {
	font-size: 2em;

	display: flex;
	align-items: center;

	padding: 0 10%;
}

/* Main infos */
@media (min-width: 1024px) {
	#infos {
		justify-content: flex-start;
	}

	#main-infos {
		width: 60%;
	}
}

@media (min-width: 612px) and (max-width: 1023px) {
	#infos {
		justify-content: flex-start;
	}

	#main-infos {
		width: 80%;
	}
}

@media (max-width: 611px) {
	#infos {
		justify-content: center;
	}

	#main-infos {
		width: 100%;
	}
}

#main-infos {
	max-height: 95%;
	padding: 2.5%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	overflow-y: auto;

	background-color: rgba(96, 112, 112, 0.5);
	border: 1px double rgba(96, 112, 112, 1);
	backdrop-filter: blur(0.5px);
}

#main-infos > * {
	margin: 1svh;
}

#projects, #concerts, #medias, #arrangements {
	display: flex;
	flex-direction: column;
	align-items: start;
}

#projects h3, #concerts h3, #medias h3, #arrangements h3 {
	height: 10%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Cards (projects) */
@media (min-width: 1024px) {
	.cards {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-auto-flow: row;
		overflow-y: auto;
	}

	.card {
		width: 100%;
	}
}

@media (min-width: 612px) and (max-width: 1023px) {
	.cards {
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-flow: row;
		overflow-y: auto;
	}

	.card {
		width: 100%;
	}
}

@media (max-width: 611px) {
	.cards {
		grid-template-rows: 1fr 1fr;
		grid-auto-flow: column;
		overflow-x: auto;
	}

	.card {
		height: 100%;
	}
}

.cards {
	width: 100%;
	height: 85%;

	display: grid;
	justify-content: start;
	gap: 2vw;

	scrollbar-width: none;

	scroll-snap-type: y mandatory;
}

.card {
	aspect-ratio: 2/3;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	padding: 5%;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.card .image {
	width: 100%;
	aspect-ratio: 1/1;
	background-color: orange;
	opacity: .5;
	grid-row: span 2;
}

.card img {
	height: 100%;
	width: 100%;
}

.card p {
	height: 25%;

	display: grid;
	place-items: center;
	text-align: center;

	overflow-y: auto;
}

/* Médias */
@media (min-width: 1024px) {
	#medias-wrapper {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 5% 95%;
		grid-auto-flow: column;
	}

	.media {
		overflow-y: auto;
		justify-content: center;
	}

	#recordings, #videos {
		grid-template-columns: 1fr;
	}

	#photos {
		grid-template-columns: repeat(5, 1fr);
		grid-auto-rows: 20svh;
	}
}

@media (max-width: 1023px) {
	#medias-wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: 5% 35% 5% 55% 5% 45%;

		overflow-y: auto;
	}

	.media {
		overflow-x: auto;
		justify-content: flex-start;
	}

	#recordings, #videos {
		grid-template-rows: 1fr;
		grid-auto-flow: column;
	}

	#photos {
		grid-template-rows: 50% 50%;
		grid-auto-flow: column;
		grid-auto-columns: 20vw;
	}

	#videos {
		grid-auto-columns: 100%;
	}
}

#medias-wrapper {
	width: 100%;
	height: 85%;

	display: grid;
	
	gap: 2vw;	
}

#medias-wrapper h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	/* background-color: orange; */
}

.media {
	width: 100%;
	display: grid;

	border: 1px solid black;
}

#photos {
	gap: 4px;
}

.media .image {
	transform: scale(1);

	transition: transform .5s;
}

#photos .image:hover {
	transform: scale(1.1);
	z-index: 9999;

	transition: transform .5s;
}

.media .image:nth-of-type(2n+1) {
	transform-origin: left;
}

.media .image:nth-of-type(2n+2) {
	transform-origin: right;
}

.media .image:nth-of-type(4n+1), .media .image:nth-of-type(4n+4) {
	grid-column: span 3;
}

.media .image:nth-of-type(4n+2), .media .image:nth-of-type(4n+3) {
	grid-column: span 2;
}

.media .image img {
	height: 100%;
	max-width: 100%;
	width: 100%;
	object-fit: cover;
	cursor: pointer;
}

.recording {
	aspect-ratio: 1/1;
}

#recordings .image {
	transform-origin: center;
}

#videos {
	gap: 2vw;
}

.video {
	aspect-ratio: 16/9;
}

.video iframe {
	max-width: 100% !important;
	width: 100% !important;
	height: 100% !important;
}

/* Concerts */
@media (min-width: 1024px) {
	#concerts-wrapper {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 5% 95%;
	}

	#upcoming, #previous {
		grid-template-rows: 1fr;
		grid-auto-flow: row;
		justify-content: flex-start;

		overflow-x: auto;
	}
}

@media (max-width: 1023px) {
	#concerts-wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: 5% 45% 5% 45%;
	}

	#upcoming, #previous {
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		justify-content: flex-start;

		overflow-x: auto;
	}

	.concert {
		height: 100%;
	}
}

#concerts-wrapper {
	width: 100%;
	height: 85%;

	display: grid;	
	grid-auto-flow: column;

	gap: 2vw;	
}

#concerts-wrapper h4 {
	display: flex;
	justify-content: center;
	align-items: center;
}

#upcoming, #previous {
	gap: 2vw;
	scroll-snap-type: x mandatory;
}

#previous .concert {
	opacity: .5;
}

.concert {
	display: grid;
	grid-template-rows: 5% 10% 66% 10% 5%;
	grid-template-columns: 1fr 1fr;
	row-gap: 1%;	
	aspect-ratio: 3/2;
	width: 80%;

	padding: 1vw;
	justify-self: center;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.concert h6, .concert a, .concert p {
	grid-column: span 2;
	text-align: center;
}

.concert h6 {
	font-size: 1.2em;
}

.concert h5:nth-of-type(2) {
	text-align: right;
}

.concert p, .concert h5 {
	font-weight: normal;
	font-style: italic;
	font-size: 0.6em;
	/* overflow-x: scroll; */
}

.concert .image {
	grid-column: span 2;
}

.concert .image img {
	height: 100%;
}

.concert a {
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 1.3em;
}