nav {
	top: 0;
	right : 0;
	width: 100%;
	height: 60px;
	z-index: 10;
	margin : auto;
	text-align : center;
	position : fixed;
	background-color : #cececeb0;
	background-position : top;
	background-size: 100%;
	border-bottom: 5px solid #3D8BAFb0;
	justify-content: center;
}
#menu {
	list-style : none;
	display : inline-flex;
}
#menuli {
	margin-left: 80px;
	margin-right: 80px;
	margin-top: -5px;
}
#iconmenu {
	height: 0px;
	width: 0px;
	margin-top: 15px;
	margin-left: 15px;
	z-index: 100;
	opacity: 0%;
}
#iconmenu:hover {
	filter: contrast(20%);
}
img#btn_closenav {
	height: 30px;
	width: 30px;
    float : right;
	padding: 10px 10px 10px 10px;
	filter: brightness(0%);
	display: none;
}
img#btn_closenav:hover {
	filter: contrast(20%);
}
@media (max-width: 1550px) {
	#menuli {
		margin-left: 60px;
		margin-right: 60px;
	}
}
@media (max-width: 1500px) {
	nav {
		left: -80%;
		width: 400px;
		height: 100%;
		z-index: 1000;
		margin : auto;
		position : fixed;
		background-color : #cececeb0;
		background-position : left;
		background-size: 100%;
		border-right: 5px solid #3D8BAFb0;
		display: none;
	}
	nav:target{
		display : block;
	}
	#menu {
		display: block;
		position: relative;
	}
	#menuli {
		margin-bottom: 80px;
		margin-top: 80px;
	}
	#iconmenu {
		height: 60px;
		width: 60px;
		opacity: 100%;
	}
	img#btn_closenav {
		display: block;
	}
}
@media (max-width: 800px) {
	nav {
		left: -60%;
	}
}
@media (max-height: 650px) {
	#menuli {
		margin-bottom: 5px;
		margin-top: 5px;
	}
}
#page1, #page2, #page3, #page4, #page5 {
	font-family: 'Roboto', sans-serif;
	color: black;
	text-decoration : none;
	font-size: 35px;
}
#page0:hover, #page1:hover, #page2:hover, #page3:hover, #page4:hover, #page5:hover {
	color: #3D8BAF;
}
#page0 {
	font-family: 'Roboto', sans-serif;
	color : #3D8BAF;
	text-decoration : none;
	font-size: 35px;
}
#titre {
	font-family: 'Oswald', sans-serif;
	font-size: 50px;
	font-weight: 900;
	margin-top: 6%;
	margin-left: 450px;
	margin-bottom: 4%;
	cursor: default;
}
#part {
	height: 450px;
	width: 100%;
}
@keyframes anim_vignette1 {
	from {
		background-size: 550px 550px;
	}
	to {
		background-size: 450px 450px;
	}
}
@keyframes anim_vignette2 {
	from {
		background-size: 450px 450px;
	}
	to {
		background-size: 550px 550px;
	}
}
#r6s {
	background-image: url(https://ouessantlife.meezyr.fr/images/r6s.gif);
	height: 430px;
	width: 430px;
	background-position: center;
	border: 10px #3D8BAFb0 solid;
	background-repeat: no-repeat;
	animation-duration: 2s;
	animation-name: anim_vignette1;
	background-size: 450px 450px;
	float: left;
	cursor: pointer;
}
#ets2 {
	background-image: url(https://ouessantlife.meezyr.fr/images/ets2.gif);
	height: 430px;
	width: 430px;
	background-position: center;
	border: 10px #3D8BAFb0 solid;
	background-repeat: no-repeat;
	animation-duration: 2s;
	animation-name: anim_vignette1;
	background-size: 450px 450px;
	float: right;
	margin-top: 0px;
	cursor: pointer;
}
#minecraft {
	background-image: url(https://ouessantlife.meezyr.fr/images/minecraft.gif);
	height: 430px;
	width: 430px;
	background-position: center;
	border: 10px #3D8BAFb0 solid;
	background-repeat: no-repeat;
	animation-duration: 2s;
	animation-name: anim_vignette1;
	background-size: 450px 450px;
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	cursor: pointer;
}
#arma {
	background-image: url(https://ouessantlife.meezyr.fr/images/arma.gif);
	height: 430px;
	width: 430px;
	background-position: center;
	border: 10px #3D8BAFb0 solid;
	background-repeat: no-repeat;
	animation-duration: 2s;
	animation-name: anim_vignette1;
	background-size: 450px 450px;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	cursor: pointer;
}
#arma:hover, #r6s:hover, #ets2:hover, #minecraft:hover {
	animation-duration: 2s;
	animation-name: anim_vignette2;
	background-size: 550px 550px;
}
#part1 {
	font-family: 'Oswald', sans-serif;
	color : black;
	font-size: 30px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 460px;
	height: 100%;
	cursor: default;
	line-height: 50px;
	overflow: hidden;
}
#part2 {
	font-family: 'Oswald', sans-serif;
	color : black;
	font-size: 30px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 460px;
	height: 100%;
	cursor: default;
	line-height: 50px;
	overflow: hidden;
}
#lien {
	color : black;
	text-decoration : none;
}
#lien:hover {
	color : #3D8BAF;
	text-decoration : none;
}
footer {
	width: 100%;
	margin-left: -8px;
	padding-right: 16px;
	margin-top: 1%;
	margin-bottom: -50px;
	text-align: center;
	background-color : #cececeb0;
	background-position : bottom;
	background-size: 100%;
	border-top: 5px solid #3D8BAFb0;
	float : left;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
#footer {
	height: 20px;
	width: 100%;
	font-family: 'Faster One', cursive;
	font-weight: bold;
	color : rgb(0, 0, 0);
	font-size: 30px;
	cursor: help;
}
#lecteurTW {
	margin-bottom: 50px;
}
#lecteur {
	width: 1075px;
	height: 100%;
	overflow: scroll;
	vertical-align: middle;
	margin-bottom: 1%;
	margin-top: 50px;
	border: 10px #3D8BAFb0 solid;
}
@media (max-width: 1550px) {
	#lecteur {
		width: 500px;
		height: 100%;
		margin-bottom: 500px;
	}
	#lecteurYT {
		width: 4810px;
		height: 601.25px;
	}
	#lecteurTW {
		margin-bottom: 500px;
	}
	#iconreseaux {
		margin-bottom: 1000px;
	}
}
#lecteurYT {
	width: 9620px;
	height: 601.25px;
	vertical-align: middle;
}
#PLEuropaPark, #PLLives, #PLCourtMetrage, #PLLetsPlayCreatif, #PLJeux, #PLVideoIRL, #PLNews, #PLVideosMatos, #PLGmodDarkRP {
	margin-right: 5px;
}
#divrecherche1 {
	display: flex;
  	flex-direction: column;
  	align-items : center;
  	justify-content: center;
  	height: 50px;
}
#divrecherche2 {
	position: relative;
  	width: 500px;
  	height: 45px;
 	overflow: hidden;
  	border-radius: 5px;
  	border: 2px solid black;
}
#divrecherche2::after {
	content: url(images/loupe.png);
  	position: absolute;
	top: 0;
	right: 0;
  	background: white;
  	pointer-events: none;
  	background: #F9F9F9;
}
#divrecherche2:hover::after {
	content: url(images/loupe2.png);
}
#lecteurcherche {
	appearance: none;
	outline: 0;
	border: 0;
  	background: white;
  	background-image: none;
  	box-shadow: none;
	font-family: 'Oswald', sans-serif;
	color : black;
	font-size: 25px;
	width: 100%;
  	height: 100%;
	margin: 0;
	text-align: center;
  	cursor: pointer;
}
#lecteurcherche option {
	background: white;
	color: black;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
}
#lecteurcherche option[value=""] {
	background: white;
	color: rgb(71, 71, 71);
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
}
#categorie1 {
	width: 100%;
	height: 100%;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
#titrecategorie {
	font-family: 'Oswald', sans-serif;
	color: black;
	font-size: 40px;
	font-weight: 100;
	margin-top: 15px;
	margin-left: 200px;
	margin-bottom: 10px;
	text-align: left;
	cursor: default;
	display: block;
	animation-duration: 2s;
	animation-name: anim_titrecategorie;
}
@keyframes anim_titrecategorie {
	from {
		margin-left: -3000px;
	}
	to {
		margin-left: 200px;
	}
}
#imagesmatos {
	height: 400px;
	width: 400px;
	opacity: 50%;
	filter: saturate(100%);
	animation-duration: 3s;
	animation-name: anim_imagesmatos1;
	z-index: 0;
	position: absolute;
}
#imagesmatos:hover {
	z-index: 0;
	opacity: 100%;
	filter: saturate(200%);
	animation-duration: 1s;
	animation-name: anim_imagesmatos2;
}
@keyframes anim_imagesmatos1 {
	from {
		opacity: 100%;
		filter: saturate(200%);
	}
	to {
		opacity: 50%;
		filter: saturate(100%);
	}
}
@keyframes anim_imagesmatos2 {
	from {
		opacity: 50%;
		filter: saturate(100%);
	}
	to {
		opacity: 100%;
		filter: saturate(200%);
	}
}
#divmatos {
	background-color: #3D8BAF;
	height: 400px;
	width: 400px;
	border: 10px #3D8BAF solid;
	cursor: pointer;
	display: inline-block;
	margin-right: 10px;
	margin-top: 10px;
	z-index: 3;
}
#textediv {
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 400px;
	height: 0px;
}
#textematos {
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	font-weight: lighter;
	color: black;
	cursor: pointer;
	z-index: 4;
	text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97999px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.51361px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
	animation-duration: 5s;
	animation-name: anim_textematos;
	top: 0%;
}
@keyframes anim_textematos {
	from {
		font-size: 0px;
	}
	to {
		font-size: 30px;
	}
}
#apropos {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
#reseaux {
	justify-content: center;
	display: inline-block;
	animation-duration: 2s;
	animation-name: anim_reseaux;
}
@keyframes anim_reseaux {
	from {
		margin-left: -3000px;
	}
	to {
		margin-left: 0px;
	}
}
#iconreseaux {
	height: 100px;
	width: 100px;
	filter: saturate(100%);
	filter: brightness(100%);
	animation-duration: 1s;
	animation-name: anim_iconreseaux1;
	margin-right: 30px;
	margin-top: 20px;
	margin-bottom: 430px;
}
#iconreseaux:hover {
	filter: saturate(200%);
	filter: brightness(120%);
	animation-duration: 1s;
	animation-name: anim_iconreseaux2;
}
@keyframes anim_iconreseaux1 {
	from {
		filter: saturate(200%);
		filter: brightness(120%);
	}
	to {
		filter: saturate(100%);
		filter: brightness(100%);
	}
}
@keyframes anim_iconreseaux {
	from {
		filter: saturate(100%);
		filter: brightness(100%);
	}
	to {
		filter: saturate(200%);
		filter: brightness(120%);
	}
}
@media (max-width: 1550px) {
	#iconreseaux {
		margin-bottom: 1000px;
	}
}
#imgdiscord {
	height : 50%;
	width : 50%;
	padding-top : 2%;
	padding-bottom : 3%;
}
#txtdiscord {
	font-family: 'Oswald', sans-serif;
	color : #ffffff;
	font-size : 40px;
	font-weight: lighter;
	cursor: default;
}
#overlaydiscord{
    display : none;
    position : fixed;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
    background-color : rgba(0, 0, 0, 0.534);
    z-index : 1000;
}
#overlaydiscord:target{
    display : block;
}
#popup_block{
    background-image : url(images/fonddiscord.jpg);
    padding : 20px;
    border : 5px solid #3D8BAF;
    position : relative;
    margin : 10% auto;
    width : 40%;
	box-shadow : 0px 0px 20px rgb(0, 0, 0);
    border-radius : 10px;
}
img#btn_close {
    float : right;
	margin : -15px -15px 0 0;
	filter: contrast(100%);
}
img#btn_close:hover {
	filter: contrast(30%);
}