* {
    box-sizing      : border-box;
}
body {
    /* background      : #f1f1f1; */
    display         : flex;
    /* align-items     : center; */
    flex-direction  : column;
}

.frame {
    width: 8.75vw;
    height: 8.75vw;
    border-radius   : 50%;
    border: 5px solid #0099cc;
    box-shadow      : 1px 1px 13px 2px #5d5d5d30;
    display         : flex;
    justify-content : center;
    align-items     : center;
    position        : relative;
    overflow        : hidden;
    transform       : translateY(3vw);
    background-image: linear-gradient(to top, #8ce4f2 0%, #8ce4f2 100%);
}

.thread {
    width: 0px;
    height: 5vw;
    background  : #80808061;
    position    : absolute;
    left        : 50%;
    top         : 0;
    transform-origin: top;
}


.holder {
    width: 90%;
    height: 90%;
    position        : relative;
    border-radius   : 50%;
    animation       : moveAll 3s ease-in-out 0s infinite alternate;
}
@keyframes moveAll {
    100%  { transform: translateY(4vw)}
}



.part-1 {
    clip-path       : polygon(0% 0%, 89% 0%, 64% 48%, -1% 71%);
    background: #ffffff;
    width: 3.75vw;
    height: 3.125vw;
    position        : absolute;
    top: 3vw;
    left: 3.25vw;
}
.part-2-wrap {
    filter          : drop-shadow(9px 5px 10px rgba(black,.2))
                      drop-shadow(-9px 5px 10px rgba(black,.2));
    position        : absolute;
    left            : 0vw;
    top             : 0vw;
    z-index         : 6;
}
.part-2 {
    clip-path       : polygon(21% 41%, 95% 56%, 100% 82%, 0% 92%);
    background: #ffffff;
    background: #ffffff;
    width: 2.875vw;
    height: 4.125vw;
    position        : absolute;
    transform       : rotate(344deg);
    left: 2.25vw;
    top: 1.075vw;
}
.part-3-wrap {
    filter          : drop-shadow(-9px 0px 8px rgba(black,.3));
    position        : absolute;
    left            : 0vw;
    top             : 0vw;
    z-index         : 5;
}
.part-3 {
    background: #ffffff;
    clip-path       : polygon(40% 14%, 0% 100%, 100% 100%);
    width: 2.25vw;
    height: 2.75vw;
    position        : absolute;
    left: 3.275vw;
    top: .325vw;
    z-index         : 8;
    transform-origin: bottom;
    animation: fold-3 2s ease 0s infinite alternate;
}

@keyframes fold-3 {
    100%  { transform: rotateX(38deg)}
}


.part-4-wrap {
    filter              : drop-shadow(-8px 9px 12px rgba(0, 0, 0, 0.3));
    position            : absolute;
    left                : 0vw;
    top                 : 0vw;
    z-index             : 3;
}

.part-4 {
    clip-path           : polygon(100% 0, 46% 100%, 100% 84%);
    background: #ffffff;
    width: 2.25vw;
    height: 3.125vw;
    position            : absolute;
    top: 3vw;
    left: 1.0375vw;
    z-index             : 1;
}

.part-5 {
    clip-path           : polygon(47% 0, 14% 52%, 83% 70%);
    background: linear-gradient(303deg, #ffffff 50%, #000000 100%);
    width: 1.25vw;
    height: 1.25vw;
    position            : absolute;
    top: 3vw;
    left: 6vw;
}

.part-6 {
    clip-path           : polygon(100% 16%, 0% 5%, 100% 100%);
    background: #ffffff;
    width: 2.5vw;
    height: 4.5vw;
    position            : absolute;
    top                 : 0vw;
    left: 1.625vw;
    z-index             : 2;
    transform-origin    : bottom;
    animation           : fold-1 2s ease 0s infinite alternate;
}
@keyframes fold-1 {
    100%  { transform: rotateX(30deg)}
}

.part-6-wrap {
    filter              : drop-shadow(-11px 21px 7px rgba(0, 0, 0, 0.3));
    position            : absolute;
    left                : 0vw;
    top                 : 0vw;
    z-index             : 3;
}

.part-7-wrap {
    filter          : drop-shadow(-13px 17px 11px rgba(0, 0, 0, 0.3));
    position        : absolute;
    left            : 0vw;
    top             : 0vw;
    z-index         : 2;
}
.part-7 {
    clip-path       : polygon(100% 14%, 7% 4%, 89% 61%);
    background: #ffffff;
    background: linear-gradient(22deg, #ffffff 60%, #000000 167%);
    width: 3.125vw;
    height: 3.875vw;
    position        : absolute;
    top: .875vw;
    left: .875vw;
    transform-origin: bottom;
    animation: fold-2 2s ease 0s infinite alternate;
}
@keyframes fold-2 {
    100%  { transform: rotateX(30deg)}
}