body {
  background-image:url("1.png");
  background-size: 50%;
  color:black;
  background-color:rgba(12, 9, 8, 1);
  font-family: sans-serif;
  line-height: 23px;
}

ul {
list-style:none;
margin-left:0;
padding-left:0;
}
li {
margin-bottom:15px;/* à adapter */
}

p, h1,h2, li {
  color: white;
  background: rgba(1, 42, 27, 0.95);
  padding: 5px;
  margin: 10px;
  max-width: 1300px;
}

p.inverse {
  color: white;
  background: rgba(74, 63, 53, 0.94);
}

h1 {
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.60);
}

/* The animation code */
@keyframes example {
  from {margin-left: :100px;}
  to {margin-left: : 10px;}
}

/* The element to apply the animation to */
p {
  animation-name: example;
  animation-duration: 3s;
}

@keyframes example2 {
  from {margin-left:200px;}
  to {margin-left: 10px;}
}

h2 {
  animation-name: example;
  animation-duration: 3s;
}

@keyframes example2 {
  from {margin-left:200px;}
  to {margin-left: 10px;}
}

/* The element to apply the animation to */
//p.inverse {
  animation-name: example2;
  animation-duration: 2s;
}

h2 {
    background: rgba(8, 6, 6, 1);
	color: rgb(248, 255, 231);
    padding: 20px;
  	max-width: 700px;
}

li {
	color: rgb(255, 254, 246);
    background: rgba(24, 10, 8, 1);
    padding: 3px;
  	margin: 5px;
    margin-left: 60px;
  	max-width: 500px;
}