body {
  background-image: linear-gradient(to right, #fdfcfb 0%, #e2d1c3 100%);
}

  picture {
  width: 400px;
  display: block;
  margin: auto;
  margin-top: 1em;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

#formulaire, #erreur, #succes {
  width: 600px;
  margin: auto;
  text-align: center;
  padding: 6px;
  margin-top: 3em;
  border-radius: 8px;
  box-shadow: 2px 2px 6px #000;
}

#formulaire a {
  color: #FFF;
  text-decoration: underline;
}

#formulaire a:hover {
  color: #A0A0A0;
  text-decoration: overline;
}

#succes {
  background: #1f4037;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #99f2c8, #1f4037);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #99f2c8, #1f4037); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-weight: bold;
}

#erreur {
  background: #ED213A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: white;
  font-weight: bold;
}

#formulaire {
  background: linear-gradient(#923888, #be54b2);
  color: white;
}

#codes {
  width: 90%;
  margin-top: 15px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.colonne {
  flex: 1;
  padding: 6px;
  margin: 1em;
  border-radius: 8px;
  background-color: #7cffcb;
  background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
  box-shadow: 1px 1px 4px #000;
  text-align: center;
}