:root {
  color-scheme: dark;
  --bs-teal: #5ae3e2;
  --bs-teal-inverse: #c14302;
  --bs-cyan: #5ae3e2;
  --bs-card-bg: #292B32;
  --bs-body-bg: #1F2026;
}

#mdiv{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  	background-color: var(--bs-card-bg);
    z-index: 9999;
}
.cdiv{
    width: 100%;
    height: 100%;
}
.loader{
	position: relative;
	width: 6rem;
    margin: 21.3rem auto;
	-webkit-animation: flickerAnimation 1.5s infinite;
	-moz-animation: flickerAnimation 1.5s infinite;
	-o-animation: flickerAnimation 1.5s infinite;
	animation: flickerAnimation 1.5s infinite;
}
.log1,
.log2{
    position: absolute;
    top: 0;
    left: 0;
}
.log1 {
    width: 100%;
    z-index: 1;
}
.log2 {
    width: 6rem;
    z-index: 2;
}
.rot{
    position: absolute;
    width: 10rem;
    height: 10rem;
	left: -1.89rem;
	top: -1.78rem;
    border-right: 0.25rem solid var(--bs-teal);
    border-radius: 50%;
    animation: pre 1s linear infinite;
}
@keyframes pre {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.heart {
	animation: beat .35s infinite alternate;
	transform-origin: center;
}

@keyframes beat{
	to { transform: scale(1.1); }
}

*::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

*::-webkit-scrollbar-track {
	background: var(--bs-body-bg);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--bs-teal);
	border-radius: 10px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
@media (max-width: 60rem) {
  .cdiv{
	margin: 0 auto;
  }
  .loader{
	margin: 33rem auto;
  }
}
@media (max-width: 30rem) {
  .cdiv{
	margin: 0 auto;
  }
  .loader{
	width: 4rem;
	margin: 20.3rem auto;
  }
  .log2{
	width: 4rem;
  }
  .rot{
	width: 6rem !important;
	height: 6rem !important;
	left: -0.97rem !important;
	top: -0.87rem !important;
	border-right: 0.15rem solid var(--bs-teal) !important;
  }
}