body 
{ 
	padding: 0; 
	margin: 0;
	background-color: #00202C;

	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	background: radial-gradient(circle at 50% 100%, #212121, #000);
  background-image: url('bg-img.png') no-repeat absolute;
}

#unity-container 
{ 
	position: absolute
}
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas 
{ 
	background: #000000 
}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 360px; height: 20px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat absolute; background: radial-gradient(circle at 50% 100%, #121212, #000); opacity: 0.65 }
#unity-progress-bar-full { width: 0%; height: 100%; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat absolute; background: radial-gradient(circle at 50% 100%, #8c00ff, #1aff00);  opacity: 1 }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

:root {
	--speed: 0.5s; /* change speed */
}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

.content {
	width: 50%;
	height: 50%;
	transform: rotateY(55deg) scale3d(0.5, 1.5, 0.5);
}


body {
  overflow-y:hidden;
  display:flex;
  background: radial-gradient(circle at 50% 100%, #212121, #000);
  background-size: 100% 100%;
}     
.circles {
  width:300px;
  height:300px;
  position:relative;
  margin:auto;
}
.circles > * {
  background-color:transparent;
  box-sizing:border-box;
  border:10px solid powderblue;
  border-top: 0 solid transparent;
  border-left: 0 solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%, rgb(41 47 86), rgb(0 118 153));
  position:absolute;
  animation: spin 1.5s infinite linear alternate;
}
      
.circle1 {
  width: 300px; height: 300px;
  animation-delay:-5s;    
  border-color:rgba(163,207,113, 1);
}
.circle2 {
  width: 280px; height: 280px;
  top:10px;left:10px;
  animation-delay:-4.9s;
  border-color:rgba(163,207,133, .95);
}
.circle3 {
  width: 260px; height: 260px;
  top:20px;left:20px;
  animation-delay:-4.8s;
  border-color:rgba(163,207,163, .9);
}
.circle4 {
  width: 240px; height: 240px;
  top:30px;left:30px;
  animation-delay:-4.7s;
  border-color:rgba(163,207,193, .85);
}
.circle5 {
  width: 220px; height: 220px;
  top:40px;left:40px;
  animation-delay:-4.6s;
  border-color:rgba(163,207,223, .8);
}
.circle6 {
  width: 200px; height: 200px;
  top:50px;left:50px;
  animation-delay:-4.5s;
  border-color:rgba(163,207,253, .75);
}
.circle7 {
  width: 180px; height: 180px;
  top:60px;left:60px;
  animation-delay:-4.4s;
  border-color:rgba(193,207,253, .7);
}
.circle8 {
  width: 160px; height: 160px;
  top:70px;left:70px;
  animation-delay:-4.3s;
  border-color:rgba(223,207,253, .65);
}
.circle9 {
  width: 140px; height: 140px;
  top:80px;left:80px;
  animation-delay:-4.2s;
  border-color:rgba(253,207,253, .6);
}
.circle10 {
  width: 120px; height: 120px;
  top:90px;left:90px;
  animation-delay:-4.1s;
  border-color:rgba(253,177,253, .55);
}
.circle11 {
  width: 100px; height: 100px;
  top:100px;left:100px;
  animation-delay:-4s;
  border-color:rgba(253,147,253, .5);
}
.circle12 {
  width: 80px; height: 80px;
  top:110px;left:110px;
  animation-delay:-3.9s;
  border-color:rgba(253,117,253, .45);
}
.circle13 {
  width: 60px; height: 60px;
  top:120px;left:120px;
  animation-delay:-3.8s;
  border-color:rgba(253,87,253, .4);
}
.circle14 {
  width: 40px; height: 40px;
  top:130px;left:130px;
  animation-delay:-3.7s;
  border-color:rgba(253,57,253, .35);
}
.circle15 {
  width: 20px; height: 20px;
  top:140px;left:140px;
  animation-delay:-3.6s;
  border-color:rgba(253,27,253, .3);
}
      
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);};
}