html {
  height: 100%
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #1F1F1F;
  background-size: 100% 100%;


  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

.stretch {
  display:block;
  width:100%; height:100%;
}

.cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}





.loader
{
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(45deg , transparent , transparent 40% , #e5f403);
	animation: animate 0.5s linear infinite;
}
@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
		filter: hue-rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
		filter: hue-rotate(360deg);
	}
}
.loader:before
{
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	background: #1F1F1F;
	border-radius: 50%;
	z-index: 1000;

}
.loader:after
{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: linear-gradient(45deg , transparent , transparent 40% , #e5f403);
	border-radius: 50%;
	z-index: 1000;
	z-index: 1;
	filter: blur(30px);
}





@media (prefers-color-scheme: dark) {
  body {
    margin:0;
    height:100%;
    background-color: #1F1F1F;
    background-size: 100% 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .loader
{
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(45deg , transparent , transparent 40% , #e5f403);
	animation: animate 0.5s linear infinite;
}
@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
		filter: hue-rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
		filter: hue-rotate(360deg);
	}
}
.loader:before
{
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	background: #1F1F1F;
	border-radius: 50%;
	z-index: 1000;

}
.loader:after
{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: linear-gradient(45deg , transparent , transparent 40% , #e5f403);
	border-radius: 50%;
	z-index: 1000;
	z-index: 1;
	filter: blur(30px);
}
}