@font-face {
	font-family: "helvetica";
	src:url("../static/font/arial.ttf") ;
}

@font-face {
	font-family: "Times";
	src: url("../static/font/times.ttf");
}

body {
	font-family: 'Helvetica';
	background-color:hsl(0, 0%, 95%) ;
	padding: 35px;
}



#panel {
	width: 400px;
}

a {
	color: black;
	text-decoration: none;
}
span.title {
	font-style: italic;
}



span.author {
	display: none;
}

h2 {
	text-decoration: underline;
	margin: 65px 0px 20px 0px;
	padding: inherit;
	font-size: 1em;
	font-weight: inherit;
}


.credit h2 {

	text-decoration: inherit;
}

h3 {
	text-decoration: underline;
	margin: 50px 0px 13px 0px;
	padding: inherit;
	font-size: 1em;
	font-weight: inherit;
}

h1 {
	margin:  0px 35px 0px 0px;
	letter-spacing: 1px;

	padding: inherit;
	font-size: 1em;

}

li {
	transition: all 0.25s ease;
	margin: 0px 0px 5px;

}

li a:hover {
	font-size: 1em;
	font-weight: bold;
	/*	margin: 1px 0px;*/
	/*    transition-duration: 4s;*/
}



ul {
	text-transform: uppercase;
	padding: inherit; 
	margin: inherit;
}

div#work {
	padding: 0px 8px 0px;
}

#menu-cat a .year {
	display: none;
	font-size: 0.75em;
	line-height: 1;
	opacity: 0.7;
}


details summary {
	cursor: pointer;        /* curseur demandé */
	margin: 10px 10px 5px 0px;
	display: block;         /* se comporte comme un bloc (plus facile à styler) */
	user-select: none;      /* évite la sélection de texte au clic */
	outline: none;          /* évite outline par défaut (mais garde accessibilité, voir remarque) */
}


details[open] summary {
	font-weight: bold;
}

details ul {

	list-style: none;
}

details summary:focus {
	/*	box-shadow: 0 0 0 3px rgba(0,0,0,0.08);*/
	outline: none;
}

/*
details summary:hover {
background-color: white;
}
*/



#panel img {

	object-fit: cover;
	width: 23vw;
}


.wdesc p{
	margin: 2px;
	font-style: italic;
	text-decoration: underline;
	font-size: 1.5em;
}

@media only screen and (max-width: 1000px) {



	body {
		padding: inherit;
		padding: 5px
	}

	#panel {
		width: inherit;
	}

	nav {
		width: inherit;
	}

	#works {

	}

	#menu ul {
		display: flex;
		flex-wrap: wrap;
	}

	h2 {
		margin: 0px 0px 20px ;
		padding: inherit;
	}

	#works {

		margin: 0px 0px 20px;
	}

	h1 {
		font-size: 1em;
		padding: 20px 0px 35px;
		color: black;
	}

	.article {
		display: flex;
		width: 80vw; 
		padding: inherit;
	}

	#sliderShow {
		margin: inherit
	}

	.work {
		display: flex;
		border: 0px solid black;
		border-radius: 2px;
		overflow: hidden;
		transition-duration: 1s;
		flex-grow: 1;
		flex-direction: column;
		align-content: space-around;
		justify-content: space-between;
		color: black;
		align-items: flex-start;
		background-color: white;
	}

	.wdesc {
		font-size: 0.8em;
	}

	video {
		display: block;
		margin: 10px;
		max-width: 500px;
		height: auto;
		width: 300px;
	}

	a.menu-btn:hover {
		color: black;
		background-color: white;

	}


	#menu a.home {
		font-size: 1em;
	}

	#menu a.info {
		font-size: 1em;
	}

	#menu ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	#menu ul {

		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	#menu li {
		display: none;
	}

	#menu a {
		font-size: 1.1em;

	}

	#menu a:hover {
		color: white;
		/*		border-radius: 3.5px;*/
		background-color: black;
	}

	#panel img {
		max-width: 100%;
		height: auto;
		margin: 10px;
	}

	img {
		width: 100%;
	}

	.home-img {
		margin: 10px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}


}