
.app {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: radial-gradient(49% 81% at 45% 47%,rgba(4, 101, 157, 0.271) 0,rgba(143, 7, 255, 0) 100%),
                      radial-gradient(113% 91% at 17% -2%,#11adc9 1%,rgba(92, 78, 220, 0) 99%),
                      radial-gradient(142% 91% at 83% 7%,#0946ed 1%,rgba(119, 0, 255, 0) 99%),
                      radial-gradient(142% 91% at -6% 74%,#064aa3 1%,rgba(17, 0, 255, 0) 99%),
                      radial-gradient(142% 91% at 111% 84%,#0e4aef 0,#07b7ed 100%);
}
.kinetic {
    position: relative;
    margin: 25% 15%;
    width: 150px;
    height: 150px;
}
.kinetic::before,.kinetic::after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 100px solid transparent;
}
.kinetic.square::before,.kinetic.square::after {
    border-image: linear-gradient(135deg,#dd8d24 10%,#cc6008 90%);
}
.kinetic.angle::before,.kinetic.angle::after {
    border-bottom-color:#ee730e;
}
.kinetic::before {
    transform: rotate(90deg);
    animation: rotateA 4s linear infinite;
}
.kinetic::after {
    animation: rotateB 4s linear infinite 3s;
}
@keyframes rotateA {
    0%,25% {
        transform: rotate(0deg);
    }
    50%,75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateB {
    0%,25% {
        transform: rotate(90deg);
    }
    50%,75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(450deg);
    }
}
@media screen and (max-width:600px) {
    .app {
        flex-direction: column;
    }
}