@media (prefers-color-scheme: dark) {
  body {
    background-color: #000 !important;
  }
  .logo {
    filter: invert(1);
  }
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes logo-rotate {
  0%, 80% {
    transform: rotateY(0deg);
  }
  90% {
    transform: rotateY(180deg);
  }
}

.square {
  position: relative;
  width: 60vmin;
  max-width: 356px;
  min-width: 250px;

  -webkit-animation: logo-rotate 6s infinite linear;
  -moz-animation: logo-rotate 6s infinite linear;
  animation: logo-rotate 6s infinite linear;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.logo {
  position: absolute;
  border-radius: 50%;
}