.view {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 400px;
    /* margin-top: 14%; */
    z-index: 1000;
    margin-top: 35vh;
}

/* @media screen and (min-width: 320px) {
  .view {
    margin-top: 90% !important;
  }
}

@media screen and (min-width: 480px) {
  .view {
    margin-top: 70% !important;
  }
}

@media screen and (min-width: 600px) {
  .view {
    margin-top: 55% !important;
  }
}

@media screen and (min-width: 700px) {
  .view {
    margin-top: 50% !important;
  }
}

@media screen and (min-width: 801px) {
  .view {
    margin-top: 25% !important;
  }
}

@media screen and (min-width: 1025px) {
  .view {
    margin-top: 20% !important;
  }
}

@media screen and (min-width: 1281px) {
  .view {
    margin-top: 17% !important;
  }
} */

.plane {
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
}

    .plane.main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: rotateX(60deg) rotateZ(-30deg);
        -webkit-animation: rotate 20s infinite linear;
        animation: rotate 20s infinite linear;
    }

        .plane.main .circle {
            width: 120px;
            height: 120px;
            position: absolute;
            transform-style: preserve-3d;
            border-radius: 100%;
            box-sizing: border-box;
            box-shadow: 0 0 60px var(--dodec-color), inset 0 0 60px var(--dodec-color);
        }

            .plane.main .circle::before, .plane.main .circle::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 10%;
                height: 10%;
                border-radius: 100%;
                background: var(--dodec-color);
                box-sizing: border-box;
                box-shadow: 0 0 60px 2px var(--dodec-color);
            }

            .plane.main .circle::before {
                transform: translateZ(-90px);
            }

            .plane.main .circle::after {
                transform: translateZ(90px);
            }

            .plane.main .circle:nth-child(1) {
                transform: rotateZ(72deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(2) {
                transform: rotateZ(144deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(3) {
                transform: rotateZ(216deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(4) {
                transform: rotateZ(288deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(5) {
                transform: rotateZ(360deg) rotateX(63.435deg);
            }

@-webkit-keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}