.body {
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
}


  
.loader {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: relative;
	animation: rotate 1s linear infinite
  }
  .loader::before , .loader::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 5px solid #07056c;
	animation: prixClipFix 2s linear infinite ;
  }
  .loader::after{
	border-color: #ffce3c;
	animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
	inset: 20px;
  }

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

  @keyframes prixClipFix {
	  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }