:root {
  --bg-color: #33333f;
  --font-color: #afb1a8;
  --rect-color: #130e10;
}
body{color: var(--font-color);}
.barre_navig {
  background-color: var(--rect-color);
  margin: 10px;
  display: table;
  padding: 5px;
  width: 155px;
}
.barre_navig a{font-variant: small-caps}

.montage {
  background-color: var(--rect-color);
  float: right;
  width: 300px;
  height: 250px;
}

.fun_fact {
  background-color: var(--rect-color);
  float: right;
  width: 200px;
  height: auto;
  padding: 5px;
}

.partie_php {
  background-color: rgba(255, 255, 255,0.1);
  border: 3px;
  border-style: solid;
  border-color: #707082;
  width:100%;
  position: relative;
}

.titreanecdote, .corpsanecdote{  background-color: rgba(255, 255, 255,0.1); border: 3px solid var(--bg-color); text-align: justify;}

a {
  text-decoration: none;
  color: #f7f7f5;;
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

	.magie-elem{}
	.magie-elem a {text-decoration: none;}
	.magie-elem input{display: none;}
	.magie-elem div {display: inline-block; width: 100%; /*Pour éviter le pb de décentrage*/}
	.magie-elem label{cursor: help;}
	.magie-elem label img{width: 60px; height: 30px; object-fit: cover; border: 1px dotted; border-radius: 15px; object-position: center 20%; margin-top: 10px;}

	.magie-elem div div{text-align: left; /*Je conseille plutôt text-align: justify, plus joli à mon gout.*/ width: 95%;height: 0; overflow: auto; scrollbar-width: thin;}
	.magie-elem input:checked ~ div{height:auto;}
	p{margin-bottom: 5px;}
	/*Je te rajoute un .magie-elem, sinon TOUS test titres H2 auront la même apparence, y compris sur les autres pages*/
	.magie-elem h2{margin-left: auto; margin-right: auto; width:fit-content; border: 2px solid; padding: 3px;}
h3{text-indent:2%;}
h2[title="Eau"] {
  border-color: #aad5db;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Terre"] {
  border-color: #836539;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Air"] {
  border-color: #D1F1F9;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Feu"] {
  border-color: #aa4203;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Electricité"] {
  border-color: #2c75ff;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Glace"] {
  border-color: #53CCDC;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Métal"] {
  border-color: #aaa9ad;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Plantes"] {
  border-color: #777A44;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Bois"] {
  border-color: #A1662F;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Gaz"] {
  border-color: #9aa015;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Lave"] {
  border-color: #cf1020;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Magnétisme"] {
  border-color: #900090;		/*PENSE A TES POINTS VIRGULES!*/
}

h2[title="Roche"] {
  border-color: #4D3833;		/*PENSE A TES POINTS VIRGULES!*/
}