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

body {
height: 100vh;
overflow: hidden;
background: #283048;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #000000, #333333, #2f451b, #214a3c, #134E5E, #283048, #4A569D, #DC2424);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #000000, #333333, #2f451b, #214a3c, #134E5E, #283048, #4A569D, #DC2424); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: 800% 800%;
animation: gradient 120s 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;
}

.svg path {
  fill: white;
  stroke-width: 0.5;
}

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

.rotate2 {
  animation: rotation2 360s 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;
}