style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100%;
}
.box{
    position: relative;
    display: block;
    background: none;
    width: 1000px;
    height: 1000px;
    margin: auto;
    background-image: url(caver.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    
}

.rope-1{
    position: absolute;
    left: 19%;
    width: 4%;
    height: 18%;
}

.string{
    position: absolute;
    left: 1%;
    width: 12%;
    height: 85%;
    background: #fff;
}

.circle-string{
    position: absolute;
    left: -19%;
    top: 84%;
    width: 55%;
    height: 13%;
    border: 4px solid #fff;
    border-radius: 50%;
    
}

.fanos-1{
    position: absolute;
    bottom: 2%;
    left: 21%;
    width: 25%;
    height: 50%;
}

.circle-holder{
    position: absolute;
    left: -11%;
    top: -62%;
    width: 9%;
    height: 4%;
    border: 3px solid #fff;
    border-radius: 50%;
}

.top-layer{
    position: absolute;
    top: -59%;
    left: -34%;
    width: 55%;
    height: 14%;
    background: #6b0517;
    border: 3px solid #fff;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    overflow: hidden;
}

.inyer-top-layer{
    position: absolute;
    top: 2%;
    left: 26%;
    width: 50%;
    height: 108%;
    border: 3px solid #fff;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: gold;
}

.nid-layer{
    position: absolute;
    right: 72%;
    top: -46%;
    width: 69%;
    height: 8%;
    background: #6b0517;
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.nid-layer-left{
    position: absolute;
    top: 3%;
    left: 1%;
    width: 32%;
    height: 100%;
    background: #6b0517;
    border: 4px solid #fff;
    -webkit-clip-path: polygon(40% 5%, 100% 5%, 100% 100%, 5% 100%);
    clip-path: polygon(0% 5%, 100% 5%, 100% 100%, 5% 100%);
}

.nid-layer-nid{
    position: absolute;
    top: 2%;
    left: 31%;
    width: 39%;
    height: 100%;
    background: #6b0517;
    border: 4px solid #fff;
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 5%, 100% 5%, 100% 100%, 0 100%);
}

.nid-layer-right{
    position: absolute;
    top: 7%;
    right: 2%;
    width: 30%;
    height: 90%;
    background: #6b0517;
    border: 1px solid #fff;
    -webkit-clip-path: polygon();
    clip-path: polygon(5 5%, 65% 5%, 95% 100%, 0 100%);
}

.bottom-layer{
    position: absolute;
    right: 73%;
    top: -39%;
    width: 68%;
    height: 40%;
    border: 3px solid #fff;
    background: #a52a2a69;
}

.left-side{
    position: absolute;
    width: 30%;
    height: 100%;
}

.right-side{
    position: absolute;
    right: 0;
    width: 30%;
    height: 100%;
}

.mind-side{
    position: absolute;
    left: 30%;
    width: 41%;
    height: 100%;
    border-right: 3px solid #fff;
    border-left: 3px solid #fff;
}

.left-glow{
    position: absolute;
    left: 12%;
    top: 2.5%;
    width: 80%;
    height: 95%;
    border: 3px solid #fff;
    background: #6b0517;
}

.right-glow{
    position: absolute;
    left: 8%;
    top: 2.5%;
    width: 85%;
    height: 95%;
    border: 3px solid #fff;
    background: #6b0517;
}

.mind-glow{
    position: absolute;
    left: 9%;
    top: 2.5%;
    width: 85%;
    height: 95%;
    border: 3px solid #fff;
    background: gold;
}

.rope-2{
    position: absolute;
    width: 5%;
    height: 13%;
    right: 50%;
}

.fanows-2{
    position: absolute;
    right: 40%;
    top: 24.5%;
    width: 30%;
    height: 35%;
}

.square-hold{
    position: absolute;
    top: -39%;
    left: 48%;
    width: 6%;
    height: 6%;
    border: 3px solid #fff;
    
}

.fanows-back{
    position: absolute;
    top: -33.5%;
    left: 27%;
    width: 50%;
    height: 55%;
    border: 3px solid #fff;
    background: #6b0517;
    border-radius: 150px;
}

.inner-ovor{
    position: absolute;
    top: -2%;
    width: 43%;
    height: 103%;
    left: 29%;
    border: 3px solid #fff;
    border-radius: 150px;
}

.fanows-front{
    position: absolute;
    left: 25%;
    top: -21%;
    width: 55%;
    height: 30%;
    border: 3px solid #fff;
    background: #6b0517;
}

.glow-l{
    position: absolute;
    top: 15%;
    left: 11%;
    width: 30%;
    height: 75%;
    border: 3px solid #fff;
    background: gold;
    border-radius: 50%;
}

.glow-r{
    position: absolute;
    top: 15%;
    right: 11%;
    width: 30%;
    height: 76%;
    border: 3px solid #fff;
    background: gold;
    border-radius: 50%;
}

.piller{
    position: absolute;
    top: -10%;
    width: 13%;
    height: 120%;
    border: 3px solid #fff;
    background: #6b0517;
}

.piller-1{
    left: -3%;
}

.piller-2{
    left: 44%;
}
.piller-3{
    right: -3%;
}

.nado{
    position: absolute;
    top: -15%;
    left: 35%;
    width: 20%;
    height: 130%;
    background: #fff;
}

.piller-copye{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #6b0517;
    z-index: 2;
}

.circle-top{
    position: absolute;
    top: -10%;
    left: 8%;
    width: 75%;
    height: 10%;
    background: #6b0517;
    border: 3px solid #fff;
    border-radius: 50%;
}

.circle-bottom{
    position: absolute;
    bottom: -10%;
    left: 8%;
    width: 75%;
    height: 10%;
    background: #6b0517;
    border: 3px solid #fff;
    border-radius: 50%;
}