/* SPINNER PERSO janvier 2025 */

body{background:black}

/* Tout */
.spn
	{
	Position:relative;
	top: -1148px;
	left: 290px;
	height: 200px;
 	width:200px;

		transform:scale(0.45);
	z-index:1000000
	}

.spn:hover
  {
	top: -1030px;
	left: 290px;
	transform:scale(1.6);
	z-index: 10000000;	
  }

/* Exterieur */
.ext
	{
	Position:absolute;
	top: 0px;
	left: 00px;
	height: 200px;
	width: 200px;
	border-radius:150px;
	background:linear-gradient(to left, black, white);
	border-style:solid;
	border-width:2px;
	border-color:gray;
	animation: ac0 7s linear infinite;
 	}

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

/* Bloc interieur */
.int
	{
	Position:absolute;
	top: 10px;
	left: 10px;
	height: 180px;
	width: 180px;
}

/***** Bloc de 4 Paves (fond) ************/
.c1, .c2, .c3, .c4
	{
	Position:absolute;
	height: 50px;
	width: 50px;
	border-style: solid ;
	border-radius:10px;	
	border-width:0px;
  opacity:1;
  }
  
/******* Pave Haut-Gauche **************/
.c1	
	{
	top: 20px;
	left: 20px;
	border-color:black;
	background:linear-gradient(to left, black, white);
	animation: ac1_h 7s cubic-bezier(0.39, 0.36, 0.62, 0.68) infinite  ;
	}
 /* Larheur augmente vers la droite */
@keyframes ac1_h 
	{
	0%,100%    { width: 50px;}
	50%        { width:135px;}
	}

/******* Pave Haut-DROITE *****************/
.c2	
	{
	top: 20px;
	right: 20px;
	border-color: black;
	animation: ac2_v 7s cubic-bezier(0.41, 0.43, 0.7, 0.75) infinite  ;	
	background:linear-gradient(to left, black, white);
	}
/* Hauteur augmente vers le bas*/
@keyframes ac2_v 
    {
	0%,100%    { height: 50px;}
	50%        { height:135px;}
	}

/******* Pave BAS-Gauche **********************/
.c3	
	{
	bottom: 20px;
	left: 20px;
	border-color: black;
	animation: ac3_v  7s linear infinite  ;	
	background:linear-gradient(to left, black, white);
	}
	
/* Hauteur augmente vers le haut */
@keyframes ac3_v 
    {
	0%,100%    { height: 50px;}
	50%        { height:135px;}
	}

/******* Pave Bas-Droite **********************/
.c4	
	{
	top: 110px;
	right: 20px;
	border-color: black;
	animation: ac4_h 7s linear infinite  ;	
	background:linear-gradient(to left, black, white);
	}
	
 /* Largeur augmente vers la gauche */
@keyframes ac4_h 
    {
	0%,100%    { width: 50px;}
	50%        { width:135px;}
	}

/***** Bloc de 4 Paves texte ********/
.c5, .c6, .c7, .c8
	{
	Position:absolute;
	top:  78px;
	left: 78px;
	height: 49px;
	width: 49px;
	border-style: solid ;
	border-radius:100px;	
	border-width:1px;
	border-color:gray;
	animation: a_centre  8s cubic-bezier(0.78, 0.02, 0.16, 1.05)  infinite  ;
	opacity:0;
	transform:scale(2.9);
  }

.c5 {background: linear-gradient(to left,      red,    yellow      );}
.c6 {background: linear-gradient(to top,       yellow, red         );}
.c7 {background: linear-gradient(to top left,  cyan,   blue        );}
.c8 {background: linear-gradient(to left,      red,    white, blue );}

.stop-animation5 {animation: none;}
.stop-animation6 {animation: none;}
.stop-animation7 {animation: none;}
.stop-animation8 {animation: none;}

@keyframes a_centre
    {
	  0%,100%    { transform:scale(0)     rotate(0deg) ;opacity:0}
	  50%        { transform:scale(2.9)   rotate(1080deg) ;opacity:1}	
	  }

/****** Textes ****************/
.c5a, .c5b, .c6a, .c6b, .c7a, .c8a, .c8b, .c8c
	{
	position:absolute;	
	width:40px;	
	text-align:center;
	left: 4px;
	font-weight:bold;
  border-style:solid;
  border-width:0px
}

.c5a /* HAM */
{
	top: 5px;
	font-size:17px;
	font-family:DynaPuff;
	color:blue;	
}
.c5b  /* MAP */
{
	top: 23px;
	font-size:17px;
	font-family:DynaPuff;
	color:blue;		
}

.c6a  /* QSL */
{
	top: 7px;
	left: 4px;
	font-size:14px;
  font-family:Mochiy Pop One;
	color:black;		
}
.c6b  /* ONLINE */
{
	top: 26px;
	font-size:8px;
  font-family:Mochiy Pop One;
	color:black;	
}

.c7a  /* WinREF */
{
	top: 16px;
	font-size:12px;
	font-family:Kalam;
	color:white;
}

.c8a  /* http */
{
	top: 8px;
	font-size:9px;
	font-family:DynaPuff;
	color:blue
}
.c8b  /* f5aib */
{
	top: 18px;
	font-size:12px;
	font-family:DynaPuff;
	color:blue
}
.c8c  /* .net */
{
	top: 30px;
	font-size:12px;
	font-family:DynaPuff;
	color:blue
}