html, body {
  margin: 0;
  background: #131313;
}

.mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -500px;
  margin-left: -500px;
  width: 1000px;
  height: 1000px;
}
.mandala .flower:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 9;
  transform: rotate(60deg);
  transition: transform 1s;
}
.mandala .flower:nth-child(1) .whorl {
  position: absolute;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 14.2857142857px;
  height: 14.2857142857px;
  background: gold;
  background-image: radial-gradient(circle, transparent 2px, transparent 4px);
  background-size: 8px 8px;
  top: 50%;
  left: 50%;
  margin-left: -7.1428571429px;
  margin-top: -7.1428571429px;
  box-shadow: 0px 0px 20px gold;
}
.mandala .flower:nth-child(1) .petal:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(90deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(1):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(135deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(2):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(180deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(3):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(225deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(4):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(270deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(5):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(315deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(6):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(7) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(360deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(7):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1) .petal:nth-child(8) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 80% 0% 80% 0%;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(405deg) translate(33.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(1) .petal:nth-child(8):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 4px;
  height: 4px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(1):hover .petal:after {
  opacity: 0.8;
}
.mandala .flower:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: 8;
  transform: rotate(120deg);
  transition: transform 1s;
}
.mandala .flower:nth-child(2) .whorl {
  position: absolute;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 28.5714285714px;
  height: 28.5714285714px;
  background: gold;
  background-image: radial-gradient(circle, transparent 2px, transparent 4px);
  background-size: 8px 8px;
  top: 50%;
  left: 50%;
  margin-left: -14.2857142857px;
  margin-top: -14.2857142857px;
  box-shadow: 0px 0px 20px gold;
}
.mandala .flower:nth-child(2) .petal:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(81deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(1):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(117deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(2):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(153deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(3):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(189deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(4):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(225deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(5):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(261deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(6):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(7) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(297deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(7):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(8) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(333deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(8):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(9) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(369deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(9):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2) .petal:nth-child(10) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 80% 0% 80% 0%;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(405deg) translate(66.6666666667px) rotate(45deg);
}
.mandala .flower:nth-child(2) .petal:nth-child(10):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 8px;
  height: 8px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(2):hover .petal:after {
  opacity: 0.8;
}
.mandala .flower:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  z-index: 7;
  transform: rotate(180deg);
  transition: transform 1s;
}
.mandala .flower:nth-child(3) .whorl {
  position: absolute;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 42.8571428571px;
  height: 42.8571428571px;
  background: gold;
  background-image: radial-gradient(circle, transparent 2px, transparent 4px);
  background-size: 8px 8px;
  top: 50%;
  left: 50%;
  margin-left: -21.4285714286px;
  margin-top: -21.4285714286px;
  box-shadow: 0px 0px 20px gold;
}
.mandala .flower:nth-child(3) .petal:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(75deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(1):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(105deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(2):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(135deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(3):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(165deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(4):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(195deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(5):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(225deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(6):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(7) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(255deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(7):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(8) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(285deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(8):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(9) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(315deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(9):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(10) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(345deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(10):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(11) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(375deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(11):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3) .petal:nth-child(12) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 80% 0% 80% 0%;
  width: 120px;
  height: 120px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(405deg) translate(100px) rotate(45deg);
}
.mandala .flower:nth-child(3) .petal:nth-child(12):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(3):hover .petal:after {
  opacity: 0.8;
}
.mandala .flower:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -400px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  z-index: 6;
  transform: rotate(240deg);
  transition: transform 1s;
}
.mandala .flower:nth-child(4) .whorl {
  position: absolute;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 57.1428571429px;
  height: 57.1428571429px;
  background: gold;
  background-image: radial-gradient(circle, transparent 2px, transparent 4px);
  background-size: 8px 8px;
  top: 50%;
  left: 50%;
  margin-left: -28.5714285714px;
  margin-top: -28.5714285714px;
  box-shadow: 0px 0px 20px gold;
}
.mandala .flower:nth-child(4) .petal:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(70.7142857143deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(1):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(96.4285714286deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(2):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(122.1428571429deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(3):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(147.8571428571deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(4):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(173.5714285714deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(5):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(6) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(199.2857142857deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(6):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(7) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(225deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(7):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(8) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(250.7142857143deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(8):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(9) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(276.4285714286deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(9):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(10) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(302.1428571429deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(10):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(11) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(327.8571428571deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(11):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(12) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(353.5714285714deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(12):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(13) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(379.2857142857deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(13):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4) .petal:nth-child(14) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 80% 0% 80% 0%;
  width: 160px;
  height: 160px;
  background: linear-gradient(-45deg, #673AB7, #131313);
  transform-style: preserve-3d;
  transform: rotate(405deg) translate(133.3333333333px) rotate(45deg);
}
.mandala .flower:nth-child(4) .petal:nth-child(14):after {
  position: absolute;
  content: "";
  top: 250%;
  left: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 16px;
  height: 16px;
  background: gold;
  box-shadow: 0 0 20px yellow;
  opacity: 0;
}
.mandala .flower:nth-child(4):hover .petal:after {
  opacity: 0.8;
}