/*Donne un aspect visuel global à tout ce qui est entouré par body*/
body{
	text-align: center;
	line-height: 1.5;
	font-size: large;
	font-family: fangsong;
	text-orientation: upright;
	background-color: rgb(231,232,207);
}

/*image de fond*/
.bg{
	background-image: url('img/bg.png') ;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

/*Donne au header son apparence sticky<*/
header{
	position : sticky;
	top :0;
	background-color: black;
	color: rgb(152,251,152);
	margin: auto;
	border-radius: 20px/20px;
	z-index: 100;
}


/*Modifie l'alignement des tableaux*/
table, td, th{
	margin: auto;
	text-align: center;
	border-width: thin;
	border-color: black;
	border-style: solid;
}

/*custom les images de objects.html*/
td img{
	border-radius: 10px/5px;
}

/*Set la taille de la vidéo et son visuel puis indique qu'il faut qu'elle passe en arrière plan*/
video{
	width: 65%;
	height: auto;
	border-radius: 20px/20px;
	z-index:10;
}


/*Définit une largeur et hauteur pour les figures*/
figure{
	padding-left:14%;
	padding-right:14%;
	margin-top:-0.1%;
}


/*Définit le visuel des figure caption*/
figcaption{
	border-color :black;
	border-style:solid;
	border-width:thin;
	text-align: center;
	font-size:small;
	color:black;
	padding:0.1%;
}


/*Lorsqu'un lien n'est pas encore visité*/
a{
	color:  rgb( 94, 189, 179 );
}

/*quand on passe dessus*/
a:hover{
	color:  rgb( 94, 149, 149 );
}

/*Une fois que le lien a été visité*/
a:visited{
	color: rgb(90,160,185);
}

/*Effets sur toutes les balises de type p*/
p{
	color : rgb(35,42,92);
	margin-left: 21%;
	margin-right: 21%;
	text-align: justify;
	text-align-last: center ;
}

aside{
	float:right;
	width : 20%
}

/*Effets de base apportés aux images*/
img{
	position:relative;
	align-content: center;
	max-width: 80%;
	height: auto;
	border-radius: 50px/35px;
}

/*Effets apportés à toutes les balises de gros titre h1*/
h1{
	background-color: black;
	margin-right: 16%;
	margin-left: 16%;
	color: rgb(152,251,152);
	border-radius: 20px/20px;
	padding-bottom: 4px;
	height: 50px;
	text-shadow: 2px 2px 14px #76d09c ;
	text-align: center;
}

/*spécifie une ombre pour les h2*/
h2{
	text-shadow: 1px 1px 3px #010a59  ;
}

.clright h2{
	margin-left: 20%;
}


/*spécifie une ombre pour les h3*/
h3{
	text-shadow: 1px 1px 2px #010a59;
}


/*Permet d'afficher les listes de cette manière*/
ul{
	margin-left: 26%;
	margin-right: 28%;
	color: rgb(35,42,92);
	list-style-type: '∴';
	border: 1px solid black;
	border-radius: 15px/10px;
}

aside ul{
	padding-left:15px;
}

/*les éléments de la liste seront de la sorte*/
li{
	margin-left: 14%;
	margin-right: 18%;
	display: list-item;
  text-align: -webkit-match-parent;
	/*list-style-type: '∴';*/
}


aside li{
	margin-left:5px;
}

/*permet de fixer et personnaliser le footer*/
footer{
	text-shadow: 2px 2px #76d09c ;
	text-align:center;
  position: fixed;
  bottom:6px;
  right: 0;
  display:inline-block;
  vertical-align:top;
  font-size:13px;
	height: 25px;
}

/*Permet d'afficher la barre nav avec tous ces éléments flexbox*/
.flexbar{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:row;
	margin-bottom: -2px;
	z-index: 10;
	flex-wrap:wrap;
}


/*Permet à l'item "Zelda Breath of The Wild" d'être rapproché du menu*/
.flex{
	display:flex;
	justify-content: space-around;
	align-items:baseline;
	flex-direction:row;
	margin-bottom: -2px;
	flex-wrap:wrap;
}


/*Effets ajoutés à ce qui est dans la navbar, de sorte à ce que cela ressemble à des
boutons*/
.buttonbar{
	text-shadow: 2px 2px 14px #76d09c ;
	background-color: black;
	border-color: black;
	border-style: hidden;
	border-width: thin;
	color: rgb(152,251,152);
	width: 128px;
	font-size: 100%;
	display:block;
	cursor:pointer;
	text-decoration: none;
	border-right: 1px solid #98fb98;
}


/*Effets ajoutés à certains liens pour que cela ressemble à un bouton sur lequel on
peut cliquer*/
/*
border-radius: 50px/35px; hésitation avec ce border radius
*/
.button{
	text-shadow: 2px 2px 14px #76d09c ;
	background-color: black;
	border-color: black;
	border-style: hidden;
	border-width: thin;
	color: rgb(152,251,152);
	width: 128px;
	font-size: 100%;
	display:block;
	cursor:pointer;
	border-radius: 10px/5px;
	text-decoration: none;
}


/*Classe spéciale qui est comme buttonbar mais auquel il manque la couleur de la bordure
droite de délimitation*/
.buttonlast{
	text-shadow: 2px 2px 14px #76d09c ;
	background-color: black;
	border-color: black;
	border-style: hidden;
	border-width: thin;
	color: rgb(152,251,152);
	width: 128px;
	font-size: 100%;
	display:block;
	cursor:pointer;
	text-decoration: none;
}

/*bouton contact*/
.dropdownlog{
	text-shadow: 2px 2px 14px #76d09c ;
  position: fixed;
	top: 0;
	margin-right: 30px;
	margin-top: 23px;
	right: 0;
	border-color: black;
	width: 100px;
	font-size: 100%;
	cursor:pointer;
	text-decoration: none;
  display: inline-block;
	z-index:200;
}

/*contenu du bouton contact*/
.dropdown-aff{
  display: none;
  position: absolute;
	margin-left: 22px;
	background-color: transparent;
	border-color: black;
	border-style: hidden;
	border-width: thin;
	width: 66px;
	cursor:pointer;
	border-radius: 10px/5px;
}


/*affichage des logos du contact*/
.dropdownlog:hover .dropdown-aff {
  display: block;
}


/*Set la couleur pour le petit contact*/
#Contact{
	color: rgb(152,251,152);
}

/*Pour chaque logo, défini un border-radius*/
.logo{
	border-radius: 20px/15px;
}


/*flèche positionnement et look*/
.arrow{
	text-align:center;
	text-decoration: none;
  position: fixed;
  bottom:16px;
  right: 80px;
	background-color: black;
	border: 1px solid black;
	padding-bottom: 5px;
	border-radius: 70px/70px;
  display:inline-block;
  font-size:20px;
	height: 30px;
	width: 40px;
}



.text{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


/*permet d'afficher la map Korogu dans l'onglet map*/
.korokmap{
	modestbranding:1;
	showinfo:0;
	width: 90%;
	height : 700px;
}

/*aspect physique du bouton*/
.dropbtn{
	display: block;
	width: 128px;
	color: rgb(90,180,185);
	text-shadow: 2px 2px 14px #76d09c ;
	background-color: black;
	font-size: 100%;
	font-family: fangsong;
	cursor:pointer;
	text-decoration: none;
	border-right: 1px solid #98fb98;
}

/*affiche le bloc*/
.dropdown{
  display: inline-block;
}

/*contenu du bouton*/
.dropdown-content{
  display: none;
	background-color: black;
	border-color: black;
	border-style: hidden;
	border-width: thin;
	width: 128px;
	font-size: 100%;
	cursor:pointer;
	text-decoration: none;
	position: absolute;
	border-radius: 10px/5px;
}

/*liens à défiler du bouton*/
.dropdown-content a{
  color: white;
	padding-top: 5px;
  text-decoration: none;
  display: block;
}


/*change la couleur lorsque l'on passe dessus*/
.dropdown-content a:hover{
	background-color: #e1f1c1;
}

/*affiche le menu quand on passe dessus*/
.dropdown:hover .dropdown-content{
  display: block;
}

/*Met la couleur au texte dans le contact*/
label{
	color : rgb(35,42,92);
}

/*Stylise le php*/
.php{
	display : flex;
	justify-content:  center;
	align-items:  center;
}

/*dit que si l'écran inférieur ou égal à 800px on passe le aside en float:none*/
@media only screen and (max-width: 800px) {
  div.fleft {
    float: none;
  }
}

/*set pour avoir le aside à côté*/
div.fleft{
	width:80%;
	float:left;
}