body, html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto, sans-serif;
  background-color: transparent;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #4B0A27;
	}
}

h1 {
  margin: 0;
}

p {
  opacity: 0.7;
}

#landing-page {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes play150 {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -15616.437px 0px;
    }
}

.shapeshifter {
    animation-duration: 5000ms;
    animation-timing-function: steps(150);
    animation-iteration-count: infinite;
    margin-top: 20px;
    width: 104.10958px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

.shapeshifter.play {
    animation-name: play150;
}

.anim {
    background-image: url('albert_loader.svg');
}