* {
	margin: 0;
	padding: 0;
	}

html {
	font-family: 'Helvetica', sans-serif;
	color: #000;
	font-size: 12pt;
	}
img {
	width: 100%;
	}
body {
	margin: 1rem;
	}
li {
	list-style: none;
	}
a {
	color: currentColor;
	text-decoration: none;
	}	
button {
	font: inherit;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
	}
strong, b {
	font-weight: 600;
	}
small {
	font-size: inherit;
	}


header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
	}
header .logo{
	margin-right: 1rem;
	}
header .menu a{
	margin-left: 1rem;
	}


h1 {
	font-size: 1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	}

.homepager {
	position: absolute;
	z-index: 9999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

.image {
	display: block;
	width: 100%;
	height: calc(100vh - 10rem);
	background-size: cover;
	background-position: center;
	}
.caption {
	padding: 0.8rem;
	}
@media only screen and (min-device-width: 600px) {
	.image {
		height: calc(100vh - 3rem);
		}
	}				




.work-year {
	margin-bottom: 3rem;
	}
.work-year h1{
	font-size: 2rem;
	}
.work-previews {
	display: flex;
	gap: 1rem;
	flex-direction: row;
	flex-wrap: wrap;
	}
.work-preview {
	display: block;
	width: calc(50% - 0.5rem);
	}
.work-preview .work-preview-title{
	margin-top: .5rem;
	font-style: italic;
	}
.work-preview .work-preview-image{
	filter: grayscale(1);
	transition: filter 0.5s;
	}
.work-preview:hover .work-preview-image{
	filter: grayscale(0);
	transition: filter 0.5s;
	}


.work-header{
	margin-bottom: 3rem;
	}
.work-header a{
	text-decoration: underline;
	}

.work-title {
	font-size: 2rem;
	font-style: italic;
	}	
.work-infos {
	margin-bottom: 1rem;
	}
.work-credits {
	margin-bottom: 1rem;
	}
.work-description {
	font-size: 2rem;
	margin-bottom: 1rem;
	}
.work-images .work-image {
	margin-bottom: 1rem;
	}

.work-images.small {
	display: flex;
	gap: 1rem;
	flex-direction: row;
	flex-wrap: wrap;
	}
.work-images.small .work-image{
	width: calc(25% - 0.75rem);
	margin: 0;
	}

.work-video {
	margin-top: 3rem;
	}

.work-video .video {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
.work-video .video iframe{
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
  	right: 0;
	width: 100%;
	height: 100%;
	}

.about-infos {
	margin-bottom: 3rem;
	}
.about-infos a {
	text-decoration: underline;
	}
.about-text {
	margin-bottom: 8rem;
	}
.about-infos,
.about-text {
	font-size: 1rem;
	}	
.about-text p{
	text-indent: 4rem;
	}
.about-text hr{
	border: none;
	margin-bottom: 6rem;
	}
.about-credits a {
	text-decoration: underline;
	}

@media only screen and (min-width: 1000px) {
	.about-infos,
	.about-text {
		font-size: 2rem;
		}
	.about-text p{
		text-indent: 10rem;
		}
}


.links-group {
	font-size: 1rem;
	margin-bottom: 3rem;
	columns: 1;
	}
@media only screen and (min-width: 1000px) {
	.links-group {
		font-size: 2rem;
		margin-bottom: 3rem;
		columns: 3;
		}
}



footer {
	margin-top: 4rem;
	padding-top: 1rem;
	}