body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: #000;
  text-shadow: 1px 1px 1px #fff;
}

#svg {
  position: fixed;
  width: 100%;
  height: 100%;
  cursor: pointer;
  filter: drop-shadow(0 0 4px #000);
}

.flower path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layer {
  animation-name: layerAnim1;
  animation-duration: 4s;
  animation-fill-mode: both; 
  transform-box: fill-box;
  transform-origin: center center;
}

.layer path {
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 0.75px;
}

a {
  color: #555;
  text-decoration: none;
  border-bottom: 0.25rem solid transparent;
  transition: all 0.4s;
}
a:hover {
  color: #000;
  border-bottom-color: rgba(0, 0, 0, 0.7);
}

header, footer {
  position: absolute;
  width: 100%;
  text-align: center;
}
header h1 {
  font-size: 2em;
  margin: 0.5em 0 0;
}
footer {
  bottom: 0.5em;
}

@-moz-document url-prefix() {
  #svg {
    filter: none;
  }
  .layer {
    filter: drop-shadow(0 0 2px #000);
  }
}

@keyframes layerAnim1 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes layerAnim2 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes layerAnim3 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotateZ(-270deg); }
  to { opacity: 1; opacity: 1; transform: rotateZ(0deg); }
}

@keyframes layerAnim4 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotateZ(360deg) scale3d(0.2, 0.2, 0.2); }
  to { opacity: 1; opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
}

@keyframes layerAnim5 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes layerAnim6 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: rotateZ(180deg) scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: rotateZ(-25.71deg) scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: rotateZ(25.71deg) scale3d(0.9, 0.9, 0.9);
  }

  60% {
    transform: rotateZ(-7.71deg) scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: rotateZ(7.71deg) scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
}

@keyframes layerAnim7 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: rotateZ(-180deg) scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: rotateZ(25.71deg) scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: rotateZ(-25.71deg) scale3d(0.9, 0.9, 0.9);
  }

  60% {
    transform: rotateZ(7.71deg) scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: rotateZ(-7.71deg) scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
}

@keyframes layerAnim8 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg); }
  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg); }
}

@keyframes layerAnim9 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotate3d(1, 1, 1, 360deg) scale3d(0.1, 0.1, 0.1); }
  to { opacity: 1; transform: rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1); }
}

@keyframes layerAnim10 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: scale3d(2, 2, 2); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes layerAnim11 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotateZ(-360deg) scale3d(2, 2, 2); }
  to { opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
}