body{background:black}
.spn
	{
	Position:absolute;
	top: -60px;
	left: 1155px;
	height: 200px;
	width:200px;	
 	transform:scale(0.39);
z-index: 999
}
.spn:hover
	{
	Position:absolute;
	top: -215px;
	left: 1175px;
	height: 200px;
 	transform:scale(1.89);
z-index: 999
}
.ext
	{
	Position:absolute;
	top: 0px;
	left: 0px;
	height: 200px;
	width: 200px;
  border-radius:120px;
  background: black;
	border-style:solid;
	border-color:gray;	
  animation: ac0 8s linear infinite;
  border-width:2px; 
}

@keyframes ac0 
    {
	  0%  {transform:rotate(0deg); }
	100%  {transform:rotate(360deg) ;}
    }

/***** 4 paves centraux ******************/

.c1, .c2, .c3, .c4
	{
	Position:absolute;
	height: 50px;
	width: 50px;
	border-style: solid ;
  border-radius:10px;	
	border-width:0px;
  opacity:1;
  background: linear-gradient(to top, black, white );  
 }

/**************************************/
.c1	/* Bleu H_G */
	{
	top: 30px;
	left: 30px;
  animation: ac1_h 3s cubic-bezier(0.39, 0.36, 0.62, 0.68) infinite  ;
	}

/* Larheur augmente vers la droite */
@keyframes ac1_h 
    {
	0%, 100%    {width: 30px;}
	50%        {width: 70px;}
	}
/**************************************/
.c2	/* Jaune H_D */
	{
	top: 30px;
	right: 30px;
	border-color: blue;
  animation: ac2_v 3s cubic-bezier(0.41, 0.43, 0.7, 0.75) infinite  ;	
  }

/* Hauteur augmente vers le bas*/
@keyframes ac2_v 
    {
	0%, 100%    { height: 30px;}
	50%   { height:70px;}
	}

/**************************************/
.c3	/* Vert B_G */
	{
	bottom: 30px;
	left: 30px;
	border-color: black;
  animation: ac3_v  3s linear infinite  ;	
  ackground: linear-gradient(to top,       black, white );	
  }
/* Hauteur augmente vers le haut */
@keyframes ac3_v 
    {
	0%, 100%    { height: 30px;}
	50%   { height:70px;}
	}
/**************************************/
.c4	/* Rouge B_D */
	{
	bottom: 30px;
	right: 30px;
	border-color: blue;
  animation: ac4_h 3s linear infinite  ;	
  }
 /* Larheur augmente vers la gauche */
@keyframes ac4_h 
    {
	0%, 100%    { width: 30px;}
	50%   { width:70px;}
	}

/**********************************************/

/* Rond cantral rotation et zoom  */
.int
	{
	Position:absolute;
	top: 2px;
	left: 2px;
	height: 200px;
	width: 200px;
  animation: ac5  10s ease-in-out infinite  ;
  background: linear-gradient(to left top,       yellow, red );	
	border-radius:100px;	
	transform:scale(1);
}

@keyframes ac5
{
   0%			{transform:scale(0.1) rotate(0deg);   opacity:0.3}
	30%			{transform:scale(1)   rotate(360deg); opacity:1}
	50%			{transform:scale(1)	  rotate(0deg);   opacity:1}
	100%		{transform:scale(0.1)	rotate(0deg);   opacity:0.31}
	}

/**************************************/
/* Textes  */
.c5a, .c5b, .c5c	
	{
	position:absolute;	
  text-align:center;
  width:199px;
	font-family:Mochiy Pop One;
	font-weight:bold;
  border-style:solid;
	border-width:0px;
  text-align:center;
  }
.c5a
{
	top:19px;
	left: 0px;
	font-size:55px;
	color:blue;
}
.c5b
{
	top: 76px;
	left: 0px;
 	font-size:55px;
	color:blue;
}
.c5c
{
	top: 140px;
	left: 0px;
	font-size:30px;
	color:#4b1b0a;
}