* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    height: 100vh;
    overflow:hidden;
    background: radial-gradient(100% 260px ellipse at 16% bottom, rgba(22, 121, 235, 0.5),transparent),
                radial-gradient(100% 260px ellipse at 16% top, transparent,rgba(22, 121, 235, 0.5)),
                linear-gradient(180deg,#b1d3ec,#2a92e7);
    justify-content: center;
    align-items: center;
            
}
.kl-kinetic {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 25% 15%;
}
.kl-kinetic::before,.kl-kinetic::after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 100px solid transparent;
}
.kl-kinetic.kl-square::before,.kl-kinetic.kl-square::after {
    border-image: radial-gradient(closest-corner circle at 50% top,#e9b998,#d37218);
}
.kl-kinetic.kl-angle::before,.kl-kinetic.kl-angle::after {
    border-bottom-color: #d37218;
}
.kl-kinetic::before {
    transform: rotate(90deg);
    animation: rotateA 4s linear infinite;
}
.kl-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 (max-width:600px){
    body {
        flex-direction: column;
    }
}