body {
    font-family: 'Black Ops One', cursive;
    margin-top: 2%;
    margin-bottom: 2%;
    background: linear-gradient(210deg, #161527 30%, rgb(97, 39, 56) 55%,  75%, rgb(81, 118, 131) 85%, #008E9B 90%, rgb(56, 117, 108) 100%) center center fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    z-index: 0;
    cursor: url('../img/cursor.png'), default;
}
.stars {
  background-color: rgb(248, 229, 142);
  position: fixed;
  border-radius: 50%;
  z-index: 5;
}
h1 {
    text-align: center;
    font-size: 5em;
    margin-top: 2.5%;
    margin-bottom: 3%;
}
button{
  font-family: 'Aldrich', sans-serif;
  color: rgb(255, 255, 255);
  border-color: lightseagreen;
  text-shadow: 2px 0 0 lightseagreen, -2px 0 0 rgb(175, 217, 255), 0 2px 0 lightseagreen, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  background-image: linear-gradient(90deg, rgb(206, 77, 105) 0%, rgb(142, 151, 170) 30%, #09c, 80%, rgb(206, 77, 105) 100%);
  border-radius:10px;
  width: 300px;
  z-index: 10;
  cursor: url('../img/pointer.png'), default;
}
#gameOver{
  font-size: 94px;
  position: absolute;
  display: center;
  top: 50%;
  /*bottom:50%;*/
  width: 100%;
  height: 80%;
  text-align: center;
  /* background-size: 1000px, 2000px;*/
  /* background-color: black; */
  /* background:  url(https://media.giphy.com/media/l41lHDSvmwnQGDUD6/giphy.gif) no-repeat center center fixed;
  background-size: cover;*/
}
#explosion{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 21;
}
#container {
    text-align:center;
    position: relative;
    z-index: 20;
}
#affichage {
    font-size: 2.3em;
}
#clic {
    margin: auto;
    width: 600px;
    height: 450px;

}
.blink-image {
  transform: scale(0.97, 0.97);
  cursor: url('../img/pointer.png'), default;
}
.blink-image2 {
  transform: scale(1, 1);
  cursor: url('../img/pointer.png'), default;
}
#containerButtons {
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    position:absolute;
    margin-left: -45%;
    margin-top: -25%;
}
.buy {
    margin-top: 5%;
    font-family: 'Courier New', Courier, monospace;
}
.nobonus {
    color: #eb3737;
    font-size:2em;
    padding:4%;
    margin-top: 20%;
  height: 130px;
    line-height: 1.5em;

}
.rainbow-button {
  font-size: 2.5em;
  line-height: 1.5em;
  margin-top: 15%;
  height: 130px;
}
.rainbow-button:after {
  content:attr(alt);
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}
#reparation {
  font-size: 1.8em;
  line-height: 2em;
  margin-right: -70%;
  margin-top: 2%;
  padding: 0.5%;
  height: 130px;
}
#reparation:after {
  content:attr(alt);
}
#reparation:hover {
  animation:slidebg 2s linear infinite;
}
#mon_canvas {
  transform: rotate(-25deg);
}
footer {
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  text-align: center;
  background-color: rgb(58, 58, 58, 0.5);
  z-index: 30;
  color: rgb(208, 209, 209)
}
p {
  z-index: 30;
}
#music {
  position: absolute;
  top: -30px;
  right: 20px;
  z-index: 40;
}
header{
  z-index: 50;
}
#healthbar {

  position: absolute;
  margin-top:5%;
  margin-left:35%;
}
#health{
  margin-top:2%;
  width: 500px;
  height:20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
#credits {
  margin-top: 1%;
}
/*healthbar pour Chrome*/
progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg,
	                           transparent 33%, rgba(0, 0, 0, .1) 33%,
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top,
	                           rgba(255, 255, 255, .25),
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, rgb(206, 77, 105), #09c);

    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
/*healthbar pour Firefox*/
progress[value]::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left,
      rgb(206, 77, 105),
      #09c
    );
  border-radius: 2px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}
#health{
  width: 500px;
}

#credits {
  margin-top: 1%;
}