/*Fond*/

body {
  /*background-color: rgb(179, 145, 255);*/
  background-image: url("../images/fond 3.png");
  background-repeat: no-repeat;
  background-size: 2050px 1100px;
}

#page3 {
  /*background-color: rgb(179, 145, 255);*/
  background-image: url("../images/fond 3.png");
  background-repeat: no-repeat;
  background-size: 2950px 2000px;
}

#MARIO {
  /*background-color: rgb(179, 145, 255);*/
  background-image: url("../images/Fete fond.gif");
  background-repeat: no-repeat;
  background-size: 2000px 1100px;
}

h1 {
  border-bottom: 5px solid #9613ff;
  font-family: "Audiowide", sans-serif;
  color: white;
  text-align: center;
  font-size: 40px;
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #9613ff;
}

h2 {
  font-family: "Audiowide", sans-serif;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #f366ac;
  color: white;
  text-align: left;
  font-size: 40px;
}

/* le #liste est une liste des domaines d'utilisation du monde virtuel */

#liste {
  font-family: "Audiowide", sans-serif;
  color: white;
  text-align: left;
  font-size: 20px;
}

#marioo {
  color: red;
  text-align: left;
  font-size: 20px;
}

#source {
  color: white;
  text-align: left;
  font-size: 15px;
}

p {
  color: white;
  font-family: verdana;
  font-size: 20px;
}

/* ici se trouve les sous-titres */


#subtitle {
  font-family: "Audiowide", sans-serif;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #f366ac;
  color: white;
  text-align: left;
  font-size: 20px;
}


/* options de bouton */

a {
  color: hotpink;
}

#boutonSavoir {
  color: rgb(100, 95, 203);
}







/* barre de navigation */

#menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#menu li {
  float: left;
}

#menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-bottom: 5px solid rgb(100, 95, 203);
}

#menu li a:hover:not(.active) {
  background-color: #111;
}

#menu .active {
  background-color: rgb(100, 95, 203);
}

table, td, th {
border: 1px solid;
}


table {
width: 50%;
border-collapse: collapse;
}

/* Bouton */

#NavigationImage {
  background-color: rgb(100, 95, 203);
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-family: "Audiowide", sans-serif;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#NavigationImageActive {
  background-color: rgb(103, 89, 133);
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-family: "Audiowide", sans-serif;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Bordure */

table, td, th {
	border: 1px solid;
}

table {
	width: 50%;
	border-collapse: collapse;
	color: white;
}

th {
	color: hotpink;
	height: 200px;
}

tr {
	font-family: "Audiowide", sans-serif;
	height: 100px;
}

tr:hover {background-color: #ff8aff;}

tr:nth-child(even) {background-color: #e32954;}

table, th, td {
	border: 4px solid white;
	border-collapse: collapse;
}



#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 100px;
}

#rcorners2 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 170px;
}

#rcorners3 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 40px;
}

#rcorners4 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 80px;
}

#rcorners5 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 120px;
}

#rcorners6 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 70px;
}

#rcorners7 {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 850px;
  height: 80px;
}

/* Bordure D'image*/

.image {
  border: 5px solid rgb(100, 95, 203);
}

#Suite {
  width: 160px; 
  transition: width 2s;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

#Suite:hover {
  width: 600px;
  transition: width 3,5s;
}

#annimation {
  width: 160px;
  height: 25px;
  background: rgb(100, 95, 203);
  transition: width 2s;
}

#annimation:hover {
  width: 600px;
}


/* le #liste tout en bas est en fait un #rcorners7 */


#liste {
  border-radius: 15px 50px 30px 5px;
  background: #b5a8ff;
  padding: 20px;
  width: 350px;
  height: 200px;
}