@font-face {
	font-family: 'Doodle_Gum';
	src: url('fonts/Doodle_Gum.ttf') format('truetype');
}

body
{
	background-image: url("images/background.jpg");	
	background-repeat: no-repeat;
	background-position: center top;
	max-width: 1940px;
	max-height: 2779px;
	min-width: 900px;
	margin: auto;
	margin-left: 5%;
	margin-right: 0%;
	position: relative;
}

h1, h2, h3, h4, p, nav
{
	background-color: RGBa(255, 255, 000, 0.8);
	border-radius: 10px;
	box-shadow: 4px 4px 4px black;
	padding: 4px 10px;
}

h1
{
	width: 10%;
	min-width: 150px;
	text-align: center;
	border: 2px solid red;
	margin: 20px auto;
	font-family: 'Doodle_Gum', Arial, serif;
}

h2
{
	width: 30%;
	min-width: 550px;
	text-align: center;
	border: 2px solid red;
	font-family: 'Doodle_Gum', Arial, serif;
}

h3
{
	width: 20%;
	min-width: 200px;
	border: 2px solid red;
}

h4
{
	width: 30%;
	min-width: 300px;
}

p
{
	width: 40%;
	min-width: 400px;
	text-align: Justify;
}

/*p[class]
{
	width: 20%;
	text-align: center;
}*/
nav
{
	width: 15%;
	min-width: 100px;
	position: absolute;
	top: 10px;
	right: 5%;
}

.pochette
{
	margin-right: 10px;
	border: 2px solid #FF0;
	box-shadow: 4px 4px 4px black;
	position: absolute;
	top: 200px;
	right: 5%;
}

.presentation
{
	min-height: 300px;
}


#video
{
	display: flex;
	
	justify-content: space-around;
}

.river, .guitar
{
	width: 40%;
	margin: auto;
}

audio
{
	margin-left: 20px;
}


@media screen and (min-width: 1941px)
{
	body
	{
		background-size: 100%;
	}
}

@media screen and (max-width: 800px)
{
	
	body
	{
		background-image: url("images/background-less.jpg");
		background-repeat: repeat-y;
		max-width: 800px;
		min-width: 600px;
	}
	
	header
	{
		display: flex;
		flex-direction: column;
	}
	
	.pochette
	{
		top: 580px;
	}
	
	.presentation
	{
		height: 600px;
	}
	
	#video
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}