html,
body {
  align-items: center;
  display: flex;
  margin: auto;
  justify-content: center;
}

body {
height: 100vh;
overflow: hidden;
background: #ffffff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffffff, #ffffff, #f2f2f2, #e5e5e5, #d9d9d9, #cccccc, #cfc8d5, #d8c2d9, #e6bad8, #ffb2c8, #ffb299, #ffc75a, #ffe900);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffffff, #ffffff, #f2f2f2, #e5e5e5, #d9d9d9, #cccccc, #cfc8d5, #d8c2d9, #e6bad8, #ffb2c8, #ffb299, #ffc75a, #ffe900); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 800% 100%;
animation: gradient 60s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.svg {
  text-align: center;
  max-height: 90vh;
  height: 1000px;
  fill: black;
  stroke: black;
  stroke-width: 0.1;
}



.rotate2 {
  animation: rotation 360s infinite linear;
  transform-origin: 50% 50%;
}

.rotate {
  animation: rotation2 720s infinite linear;
  transform-origin: 50% 50%;
}

@keyframes rotation {
  from {
     transform: rotate(359deg);
  }
  to {
     transform: rotate(0deg);
  }
}

@keyframes rotation2 {
  from {
     transform: rotate(0deg);
  }
  to {
     transform: rotate(359deg);
  }
}


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}