body {
  margin:0;
  height:100%;
  background: #ffffff;
  
  background-size: 100% 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 15%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
}

.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;
}

h2{
  font-size: 1em;
  color: #898989;
  margin: -6em 0% 1em;
}

.loader {
  width: 1.6em;
  height: 1.6em;
  border: 3px solid #52BB0B;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  animation: pulse 1s linear infinite;
}
.loader:after {
  content: '';
  position: absolute;
  width: 1.6em;
  height: 1.6em;
  border: 3px solid #6FCF97;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
}
@keyframes pulse {
  0% , 60% , 100%{ transform:  scale(1) }
  80% { transform:  scale(1.2)}
}



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