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

body {
  height: 100%;
  overflow: hidden;
}

.container {
background: #283048;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #000000, #214a3c, #134E5E, #283048, #4A569D, #DC2424, #FFA500, #FFFF00, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #000000, #214a3c, #134E5E, #283048, #4A569D, #DC2424, #FFA500, #FFFF00, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari */
background-size: 800% 800%;
animation: gradient 180s ease infinite;
}

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

.svg {
    display: block;
    text-align: center;
}

@-webkit-keyframes strokeColour {
  0%   {stroke: white; stroke-opacity: 0.2;}
  5%   {stroke-opacity: 0.8;}
  10%  {stroke: red; stroke-opacity: 0.6;}
  16%   {stroke-opacity: 0.2;}
  20%  {stroke: yellow; stroke-opacity: 0.7;}
  40%   {stroke-opacity: 0.5;}
  50%  {stroke: grey; stroke-opacity: 0.7;}
  60%   {stroke-opacity: 0.5;}
  70%  {stroke: yellow; stroke-opacity: 0.7;}
  80%   {stroke-opacity: 0.2;}
  85%  {stroke: red; stroke-opacity: 0.6;}
  100% {stroke: white; stroke-opacity: 0.2;}
}
@-moz-keyframes strokeColour {
  0%   {stroke: white; stroke-opacity: 0.2;}
  5%   {stroke-opacity: 0.8;}
  10%  {stroke: red; stroke-opacity: 0.6;}
  16%   {stroke-opacity: 0.2;}
  20%  {stroke: yellow; stroke-opacity: 0.7;}
  40%   {stroke-opacity: 0.5;}
  50%  {stroke: grey; stroke-opacity: 0.7;}
  60%   {stroke-opacity: 0.5;}
  70%  {stroke: yellow; stroke-opacity: 0.7;}
  80%   {stroke-opacity: 0.2;}
  85%  {stroke: red; stroke-opacity: 0.6;}
  100% {stroke: white; stroke-opacity: 0.2;}
}
@-o-keyframes strokeColour {
  0%   {stroke: white; stroke-opacity: 0.2;}
  5%   {stroke-opacity: 0.8;}
  10%  {stroke: red; stroke-opacity: 0.6;}
  16%   {stroke-opacity: 0.2;}
  20%  {stroke: yellow; stroke-opacity: 0.7;}
  40%   {stroke-opacity: 0.5;}
  50%  {stroke: grey; stroke-opacity: 0.7;}
  60%   {stroke-opacity: 0.5;}
  70%  {stroke: yellow; stroke-opacity: 0.7;}
  80%   {stroke-opacity: 0.2;}
  85%  {stroke: red; stroke-opacity: 0.6;}
  100% {stroke: white; stroke-opacity: 0.2;}
}
@keyframes strokeColour {
  0%   {stroke: white; stroke-opacity: 0.2;}
  5%   {stroke-opacity: 0.8;}
  10%  {stroke: red; stroke-opacity: 0.6;}
  16%   {stroke-opacity: 0.2;}
  20%  {stroke: yellow; stroke-opacity: 0.7;}
  40%   {stroke-opacity: 0.5;}
  50%  {stroke: grey; stroke-opacity: 0.7;}
  60%   {stroke-opacity: 0.5;}
  70%  {stroke: yellow; stroke-opacity: 0.7;}
  80%   {stroke-opacity: 0.2;}
  85%  {stroke: red; stroke-opacity: 0.6;}
  100% {stroke: white; stroke-opacity: 0.2;}
}

@keyframes strokeColour {
  0%   {stroke: white; stroke-opacity: 0.3;}
  5%   {stroke-opacity: 0.8;}
  10%  {stroke: red; stroke-opacity: 0.6;}
  16%   {stroke-opacity: 0.2;}
  20%  {stroke: yellow; stroke-opacity: 0.7;}
  40%   {stroke-opacity: 0.5;}
  50%  {stroke: black; stroke-opacity: 0.7;}
  60%   {stroke-opacity: 0.5;}
  70%  {stroke: yellow; stroke-opacity: 0.7;}
  80%   {stroke-opacity: 0.2;}
  85%  {stroke: red; stroke-opacity: 0.6;}
  100% {stroke: white; stroke-opacity: 0.2;}
}

.strokeColour {
  stroke: white;
  stroke-opacity: 0.3;
    animation: strokeColour 180s ease infinite;
}

.strokeDelay {
  animation-delay: 10s;
}

@-webkit-keyframes showHide {
  0%, 100% { fill-opacity: 0.1; }
  50% { fill-opacity: 0.2; }
}
@-moz-keyframes showHide {
  0%, 100% { fill-opacity: 0.1; }
  50% { fill-opacity: 0.2; }
}
@-o-keyframes showHide {
  0%, 100% { fill-opacity: 0.1; }
  50% { fill-opacity: 0.2; }
}
@keyframes showHide {
  0%, 100% { fill-opacity: 0.1; }
  50% { fill-opacity: 0.2; }
}

.pathOpacity {
  fill-opacity: 0.1;
  fill: white;

  -webkit-animation: showHide 140s infinite; /* Safari 4+ */
  -moz-animation:    showHide 140s infinite; /* Fx 5+ */
  -o-animation:      showHide 140s infinite; /* Opera 12+ */
  animation:         showHide 140s infinite; /* IE 10+, Fx 29+ */
}
.pathOpacity:nth-child(1) {
  animation-delay: 0s;
}
.pathOpacity:nth-child(2) {
  animation-delay: 10s;
}
.pathOpacity:nth-child(3) {
  animation-delay: 20s;
}
.pathOpacity:nth-child(4) {
  animation-delay: 30s;
}
.pathOpacity:nth-child(5) {
  animation-delay: 40s;
}
.pathOpacity:nth-child(6) {
  animation-delay: 50s;
}
.pathOpacity:nth-child(7) {
  animation-delay: 60s;
}
.pathOpacity:nth-child(8) {
  animation-delay: 70s;
}
.pathOpacity:nth-child(9) {
  animation-delay: 80s;
}
.pathOpacity:nth-child(10) {
  animation-delay: 90s;
}
.pathOpacity:nth-child(11) {
  animation-delay: 100s;
}
.pathOpacity:nth-child(12) {
  animation-delay: 110s;
}
.pathOpacity:nth-child(13) {
  animation-delay: 120s;
}
.pathOpacity:nth-child(14) {
  animation-delay: 130s;
}

* {
  -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;
}