html, body {
  background-color: black;
  color: #ab911d;
  font-size: 40px;
  width: 100%;
  height: 100%;
}
html .content, body .content {
  text-align: center;
  position: relative;
  top: 20%;
  transform: translateY(-50%);
}
html .content span, body .content span {
  width: 30px;
  display: inline-block;
}
.nbr{
  color: red;
  text-decoration: none;
}
.random{
  color: #ab911d;
  font-size: 40px;
  text-decoration: none;
}
.random:hover{
  color: white;
}
h1{
  position: relative; top: 10%;
  text-align: center;
  margin-top: 10%;
  margin-bottom: 10%;
}
/*suite*/
.sortir, .contentflechegauche, .contentflechedroite{
  display: grid;
  grid-template: 1fr / 1fr;
}

.sortir *, .contentflechegauche *, .contentflechedroite *{
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  justify-self: center;
}
/*****  Tous les bouttons + texte SVG *****/
.Boutons{
  margin-top: 15%;
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content:center;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 60%;
  overflow: hidden;
}
/*****  Modification icones mouseover*****/
.trigger {
  position: relative;
  background: #FFF;
  width: 120px;
  height: 120px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  /*icon replacement */
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}

.trigger span,
.trigger span::before,
.trigger span::after {
  position: absolute;
  width: 44px;
  height: 4px;
  background: black;
  border-radius: 4px;
}

.trigger span {
  top: calc(50% - 2px);
  left: calc(50% - 22px);
  transition: transform 0.3s;
}

.trigger span::before,
.trigger span::after {
  content: "";
  left: 0;
  transition: transform 0.4s, width 0.4s, opacity 0.1s;;
}

.trigger span::before {
  bottom: 12px;
}

.trigger span::after {
  top: 12px;
}

/*****  FLECHE Gauche*****/
.flechegauche .trigger:hover span {
  transform: rotate(-360deg);
  background: white
}
.flechegauche .trigger:hover span::before {
  transform: translate(-2px, 5px) rotate(-45deg);
  width: 50%;
  background: white
}
.flechegauche .trigger:hover span::after {
  transform: rotate(45deg);
  transform: translate(-2px, -5px) rotate(45deg);
  width: 50%;
  background: white
}
.flechegauche .trigger:hover {background:green;}

/**  Centre ***/
.croix .trigger:hover span {
  transform: rotate(-270deg);
  background: white
}
.croix .trigger:hover span::before {
  transform: translate(-2px, 5px) rotate(-45deg);
  width: 50%;
  background: white
}
.croix .trigger:hover span::after {
  transform: rotate(45deg);
  transform: translate(-2px, -5px) rotate(45deg);
  width: 50%;
  background: white
}
.croix .trigger:hover{background:#754EF9;}

/*****  FLECHE Droite*****/
.flechedroite .trigger:hover span {
  transform: rotate(180deg);
  background: black;
}
.flechedroite .trigger:hover span::before {
  transform: translate(-2px, 5px) rotate(-45deg);
  width: 50%;
  background: black;
}
.flechedroite .trigger:hover span::after {
  transform: rotate(45deg);
  transform: translate(-2px, -5px) rotate(45deg);
  width: 50%;
  background: black;
}
.flechedroite .trigger:hover {background:#65FBFB;}

/***** Fin Modification boutons mouseover*****/

svg{
  width: 240px;
  height: 240px;
  transform-origin: center;
  animation-name:autour;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
}
@keyframes autour {
  0%{
    transform: rotate(360deg);
    }
  100%{
    transform: rotate(0deg);
  }
}
.cls-1 /*****Modification lettres des svg (texte autour des boutons)*****/
{
  fill: #ab911d;
  font-size: 10px;
  font-family: MyriadPro-Regular, Myriad Pro;
}

 /*****Arrêt animation au hover lettres des svg (texte autour des boutons)*****/
.contentflechedroite:hover svg
{animation-play-state: paused;}
.sortir:hover svg
{animation-play-state: paused;}
.contentflechegauche:hover svg
{animation-play-state: paused;}

/*****Modification couleur au hover lettres des svg (texte autour des boutons)*****/
  .contentflechedroite:hover .cls-1
  {fill: white;}
  .sortir:hover .cls-1
  {fill: white;}
  .contentflechegauche:hover .cls-1
  {fill: white;}