/* Standardisation */
[hidden] {
	display: none;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Root */
:root {
	--primary-color: #009b77;
	--primary-transparent-color: #009975cc;
	--primary-very-transparent-color: #0099756c;
	--light-primary-color: #c8f5ea;
	--dark-primary-color: #005c46;
	--selected-primary-color: #00c798;
	--secondary-color: #46e8c2;
	--light-secondary-color: #e5fdf8;
	--light-transparent-secondary-color: #e5fdf8c2;
	--dark-secondary-color: #126351;
	--dark-transparent-secondary-color: #0d5357c2;
	--mid-dark-secondary-color: #137e67;
	--selected-secondary-color: #0cf0be;
	--important-color: #e81736;
	--light-important-color: #fdf2f3;
	--dark-important-color: #30171b;
	--selected-important-color: #fa3b58;
}
/* Animations */
@keyframes slideLoop {
	0% {
		transform: translateY(-13px);
	}
	35% {
		transform: translateY(13px);
	}
	100% {
		transform: translateY(-13px);
	}
}
@keyframes GdtBgAnime {
	0% {
		background-position: 51% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 51% 0%;
	}
}

/* CSS Base */
html {
	scroll-behavior: smooth;
}
body {
	min-width: 100vw;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--light-secondary-color);
	background: linear-gradient(50deg, #15403b, #26736b);
	background-size: 400% 400%;
	animation: GdtBgAnime 10s ease infinite;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased !important;
}
html.landing {
	scroll-snap-type: y proximity;
}
html.landing section#about-me {
	scroll-snap-align: center;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}
h1,
h2,
h3 {
	margin: 0;
	padding: 0.8em 15vw;
	color: var(--secondary-color);
}
p {
	font-size: 1.06em;
}
svg {
	display: block;
}
span.icon svg {
	width: auto;
	height: 100%;
}
.social-media svg {
	margin-top: -0.11em;
}
.clear {
	clear: both;
}
.no-animation {
	transform: none !important;
}
.grid:before,
.grid:after {
	content: "";
	display: table;
}
*::selection {
	background: rgba(44, 231, 188, 0.5);
	color: rgb(20, 80, 66);
}

/* Header && Menu */
header {
	top: 0;
	position: -webkit-sticky;
	position: sticky;
	padding: 0.5rem 15vw;
	background-color: var(--primary-color);
	font-weight: 600;
	text-transform: uppercase;
	z-index: 999;
	transition: background-color 200ms ease-in, backdrop-filter 200ms ease-in, webkit-backdrop-filter 200ms ease-in, box-shadow 200ms ease-in;
}
header.landing {
	background-color: transparent;
}
header.scroll {
	color: white;
	background-color: var(--primary-color);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transition: background-color 400ms ease-in, backdrop-filter 400ms ease, webkit-backdrop-filter 400ms ease, box-shadow 1s ease-out;
}
header:hover,
header.menu-open {
	color: white;
	background-color: var(--primary-color);
}

nav {
	position: relative;
	width: 100%;
}
header nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
header nav ul li a {
	color: white;
}
header nav li.page:not(.active),
header nav li.social-media {
	opacity: 50%;
	transition: opacity 2s ease 1s;
}
header:hover nav li.page:not(.active),
header:hover nav li.social-media {
	opacity: 100%;
	transition: opacity 400ms ease;
}

/* Logo && Title */
header nav li.logo {
	flex: 1;
	font-size: 1.7em;
	text-transform: capitalize;
}
header nav li.logo a {
	display: inline-block;
	padding: 0.3em 0;
	text-decoration: none;
}
header nav li.logo a span.icon {
	display: inline-block;
	height: 1.7em;
	margin-right: 0.3rem;
	vertical-align: middle;
}
header nav li.logo a span.label {
	vertical-align: middle;
}

/* Page Links */
header nav li.page {
	padding: 0.3em 0.5em 0.3em 0;
}
header nav li.page a {
	display: block;
	padding: 0.5em 1em;
	text-decoration: none;
	border-radius: 3em;
	transition: color 500ms ease-in-out 300ms, background-color 500ms ease-in-out 300ms, box-shadow 700ms ease-in-out 450ms;
}
header nav li.page a:hover,
header nav li.page a:focus {
	color: white;
	background-color: var(--selected-primary-color);
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
		rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	transition: color 300ms ease-in-out 150ms, background-color 300ms ease-in-out 150ms, box-shadow 300ms ease-in-out;
}

/* Social Media */
header nav li.social-media {
	padding: 0.1em 0 0.1em 1em;
	border-left: var(--light-primary-color) 2px solid;
}
header nav li.social-media a {
	display: inline-block;
	height: 1.5em;
	margin-left: 0.5em;
	vertical-align: middle;
}
header nav li.social-media a svg {
	-webkit-transition: -webkit-filter 700ms ease-in-out 450ms;
	transition: filter 700ms ease-in-out 450ms;
}
header nav li.social-media a:hover svg,
header nav li.social-media a:focus svg {
	-webkit-filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
	-webkit-transition: -webkit-filter 300ms ease-in-out;
	transition: filter 300ms ease-in-out;
}

/* Mobile Button */
header nav li.toggle {
	display: none;
	order: 1;
	padding: 0.3em 0.3em 0.7em;
	cursor: pointer;
}
.bars {
	display: inline-block;
	position: relative;
	background: white;
	width: 1.5em;
	height: 2px;
	border-radius: 2px;
	transition: 200ms;
}
.bars::before,
.bars::after {
	content: "";
	display: inline-block;
	position: absolute;
	background: white;
	width: 1.5em;
	height: 2px;
	border-radius: 2px;
	transition: 600ms;
}
.bars::before {
	top: 7px;
}
.bars::after {
	top: -7px;
}
header.menu-open nav .toggle .bars {
	background: transparent;
}
header.menu-open nav .toggle .bars::before {
	transform: translateY(-7px) rotate(-45deg);
}
header.menu-open nav .toggle .bars::after {
	transform: translateY(7px) rotate(45deg);
}

/* Main content */
main {
	position: relative;
	min-height: 83vh;
}
main.landing {
	position: initial;
}

main section {
	position: relative;
	padding: 1.5em 0;
}

main h1 {
	padding-top: 13vh;
	padding-bottom: 13vh;
	font-size: 6em;
	font-weight: 300;
	line-height: 0;
}
main h1 + * {
	padding-top: 0;
}
main h2 {
	position: relative;
	font-size: 2em;
	font-weight: 400;
}
main h2::after {
	content: "";
	position: absolute;
	top: 1.8em;
	left: 15vw;
	width: 3.4em;
	height: 3px;
	border-radius: 3px;
	background-color: var(--secondary-color);
}
main a {
	color: var(--selected-secondary-color);
	text-decoration: none;
	outline: 0;
	font-weight: 600;
}
main a:hover,
main a:focus {
	text-decoration: underline;
}
main a.button {
	display: inline-block;
	padding: 0.5em 1em;
	color: var(--secondary-color);
	text-decoration: none;
	border: 1px var(--secondary-color) solid;
	border-radius: 3em;
	transition: color 500ms ease-in-out 300ms, border 500ms ease-in-out 300ms, background-color 500ms ease-in-out 300ms, box-shadow 300ms ease-in-out 300ms;
}
main a.button:hover,
main a.button:focus {
	color: var(--dark-secondary-color);
	border-color: var(--selected-secondary-color);
	background-color: var(--selected-secondary-color);
	box-shadow: rgba(0, 155, 119, 0.19) 0px 10px 20px, rgba(0, 155, 119, 0.23) 0px 6px 6px;
	transition: color 300ms ease-in-out 150ms, border 300ms ease-in-out 150ms, background-color 300ms ease-in-out 150ms, box-shadow 300ms ease-in-out 150ms;
}
img.top-landing {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	object-position: center top;
	z-index: -100;
	transition: filter 400ms ease-in;
}
img.landing {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100vw;
	height: auto;
	object-fit: contain;
	object-position: center top;
	z-index: -100;
}
.top-landing + .landing > img.landing {
	top: 100vh;
	z-index: -101;
}

/* Landing */
main section.landing {
	min-height: 90.5vh;
}
main section.landing + section {
	padding-top: 20vh;
	padding-bottom: 20vh;
}
main section.landing .title {
	position: relative;
	width: 18rem;
	margin: 0 auto;
	padding: 15vh 0 0;
	color: white;
	text-align: center;
}
main section.landing .title div.icon {
	height: 15em;
}
main section.landing .title div.label {
	font-size: 3em;
	font-weight: 500;
}
main section.landing a.landing-chevron {
	position: absolute;
	bottom: 4em;
	left: 50vw;
	display: block;
	width: 3.5em;
	height: 3em;
	padding: 0 0.5em;
	transform: translateX(-50%);
	color: var(--light-secondary-color);
	opacity: 80%;
}
main section.landing a.landing-chevron span svg {
	animation: slideLoop 2s ease-in-out infinite;
}
main section.landing div.credit-photo {
	position: absolute;
	bottom: 2.5vh;
	right: 2.5vh;
	display: inline-block;
	height: 2em;
	font-size: 9px;
	opacity: 60%;
}
main section.landing div.credit-photo a {
	color: var(--light-primary-color);
}
main section.landing div.credit-photo .icon {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.3em;
	vertical-align: middle;
}
main section.landing div.credit-photo .label {
	display: inline-block;
	vertical-align: middle;
}

/* Content with text */
main section article {
	max-width: 42rem;
	margin: 0 auto;
}
main section article h2 {
	padding: 0.5em 0;
}
main section article h2::after {
	top: 1.5em;
	left: 0;
}
main section article p + h2 {
	margin-top: 0.5em;
}
main section article p:first-of-type,
main section article h2 + p {
	margin-top: 0;
}

/* Content element list */
main .list-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: left;
}
main .list-element {
	position: relative;
	flex-basis: calc(100vw / 3);
	height: calc(100vw / 3);
	margin: 0 0 2rem;
	padding: 0 0.3em;
	vertical-align: top;
	overflow: hidden;
}
/* Portfolio element */
main .list-element div.description {
	position: absolute;
	bottom: 0;
	width: calc((100vw / 3) - 5.6rem);
	max-height: 2.8em;
	margin: 0 2.5rem;
	padding: 0.5em 0.8em;
	font-size: 0.85em;
	border-radius: 0.3em 0.3em 0 0;
	background-color: var(--dark-transparent-secondary-color);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px, rgba(10, 37, 64, 0.2) 0px -2px 2px 0px inset;
	overflow-y: hidden;
	transition: max-height 2s ease 1s, box-shadow 1.2s ease 2s;
}
main .list-element:hover div.description {
	max-height: 50em;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px, rgba(10, 37, 64, 0.1) 0px -1px 2px 0px inset;
	transition: max-height 1.5s ease-out, box-shadow 750ms ease-out;
}
main .list-element div.description h3 {
	padding: 0 0 0.3em;
}
main .list-element div.description p {
	margin: 0;
}

main .list-element.image-element img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.3em;
	object-fit: cover;
}
main .list-element.video-element video {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.3em;
	object-fit: cover;
}

main .list-element.see-more {
	padding: calc((100vw / 3) / 3) 2.2rem 0;
}
main .list-element.see-more h3 {
	padding: 0 0 0.3em;
}
main .list-element.see-more p {
	margin: 0 0 0.6em;
}
main .list-element.see-more .icon {
	display: inline-block;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: middle;
}
main .list-element.see-more .label {
	vertical-align: middle;
}

/* Footer */
footer {
	min-height: 22em;
	padding: 0 15vw;
	background-color: transparent;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
}
footer div.nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 2em 0 0;
	border-top: 1px var(--mid-dark-secondary-color) solid;
}
footer div.nav section {
	display: inline-block;
	position: relative;
	flex-basis: calc((100vw - 30vw) / 3);
	margin-bottom: 2em;
	padding-right: 1em;
	vertical-align: top;
}
footer h2 {
	display: block;
	padding: 0 0 1em;
	color: var(--light-secondary-color);
	font-size: 1.2em;
	text-transform: uppercase;
}

/* Footer Menu */
footer a {
	display: inline-block;
	padding: 0.4em 0;
	color: var(--light-secondary-color);
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
footer li {
	margin-bottom: 0.4em;
}

/* Social Media */
footer .social-media a {
	display: block;
	width: fit-content;
	margin-bottom: 0.4em;
}
footer .social-media .icon {
	display: inline-block;
	height: 1.7em;
	margin-right: 0.5em;
	vertical-align: middle;
}

/* Screen > 1960px */
@media screen and (min-width: 1960px) {
	h1 {
		padding: 0.8em 20vw;
	}
	h2,
	h3 {
		padding: 1em 0;
	}
	main h2::after {
		top: 2em;
		left: 0;
	}
	header {
		padding: 1em 20vw;
	}
	main section {
		padding: 1.5em 20vw;
	}
	main section.landing {
		min-height: 92.1vh;
	}
	main section.landing + section {
		padding-top: 26vh;
		padding-bottom: 26vh;
	}
	main .list-element {
		flex-basis: calc((100vw - 40vw) / 3);
		height: calc((100vw - 40vw) / 3);
	}
	main .list-element div.description {
		width: calc(((100vw - 40vw) / 3) - 5.6rem);
	}
	main .list-element.see-more {
		padding: calc(((100vw - 40vw) / 3) / 3) 2.2rem 0;
	}
	footer {
		padding: 0 20vw;
	}
	footer div.nav section {
		flex-basis: calc((100vw - 40vw) / 3);
	}
}

/* When backdrop-filter "blur" works */
@supports (-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px)) {
	header.scroll,
	header:hover,
	header.menu-open {
		-webkit-backdrop-filter: saturate(200%) blur(12px) !important;
		backdrop-filter: saturate(200%) blur(12px) !important;
		background-color: var(--primary-transparent-color);
	}
	main .list-element div.description {
		-webkit-backdrop-filter: saturate(200%) blur(12px) !important;
		backdrop-filter: saturate(200%) blur(12px) !important;
	}
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
}