/* couleur fond # fcf8e6 */

body {
background-color: #fcf8e6;
  font-family: Helvetica, Arial, sans-serif;
  color: #330000;}

h1,h2 { text-align: center;}

img,div {
	max-width: 100%;
	height: auto;
}
/* touniquet bouton stop---------------------*/
 @keyframes spin3D {
    from { transform: rotateY(0deg) }
    to { transform: rotateY(360deg) }
  }
  .spinhov3D:hover {
    animation-name: spin3D;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: ease-in-out;
  }

.imageflottante {
  float: right;
  border-radius: 10px;
  margin-right: 10px;}

.boxflex {	display: flex ;
    flex-flow: row wrap;
justify-content: space-evenly;

align-items: center;
}

.fond { flex-shrink: 3;}


.imageG {
border-radius: 50px;
  margin-right: 10px;
box-shadow: 2px 2px 5px #003300;
}


.buttonactif {
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #999999;
  padding: 4px 10px;
  color: #330000;
  font-family: arial, serif;
text-shadow: 1px 1px 5px white;
  font-size: 16px;
  border-radius: 5px;
box-shadow: 1px 1px 4px #003300 inset;
 
  background-image: linear-gradient(-90deg, rgba(255, 255, 204, 0.75), rgba(204, 204, 204, 0.75));
}
.button {
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #999999;
  padding: 4px 10px 10px 10px;
  color: #0B173B;
  font-family: arial, serif;
text-shadow: 2px 2px 5px white;
  font-size: 24px;
  border-radius: 5px;
box-shadow: 2px 2px 3px #003300;

  background-image:linear-gradient(-90deg, rgba(51, 0, 0, 0.2), rgba(255, 255, 204, 0.75));
}

.button:hover {
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #999999;
  padding: 4px 10px;
  color: #330033;
  font-family: arial, serif;
text-shadow: 0px 0px 5px white;
  font-size: 24px;
  border-radius: 5px;
box-shadow: 2px 2px 7px #003300;