.App{display:flex;flex-direction:column;justify-content:center;align-items:center}.box{margin:100px auto;position:absolute;top:10%}.top{z-index:2;width:108px;height:108px;border:.01rem solid #000;transform:rotate(-22.5deg) skew(45deg) scaleY(cos(45deg));background:#CCC;box-shadow:inset 400px 100px 100px -180px #ffffff4a;background:linear-gradient(225deg,rgb(255,88,88) 10%,rgb(255,166,0) 10% 20%,yellow 20% 30%,rgb(131,236,50) 30% 40%,rgb(20,157,255) 40% 50%,rgb(255,88,88) 50% 60%,rgb(255,166,0) 60% 70%,yellow 70% 80%,rgb(131,236,50) 80% 90%,rgb(20,157,255) 90%)}.left{z-index:1;width:99.5px;height:250px;transform:skewy(22.5deg) translate(-50%,38.2%);border-bottom:.01rem solid #000;border-left:.01rem solid #000;box-shadow:inset 230px -240px 50px -150px #7d7d7d61;background:#b6b6b6;background:linear-gradient(to right,rgb(255,88,88) 20%,rgb(255,166,0) 20% 40%,yellow 40% 60%,rgb(131,236,50) 60% 80%,rgb(20,157,255) 80%)}.right{z-index:1;width:99.5px;height:250px;transform:skewy(-22.5deg) translate(50%,38.2%);border-bottom:.01rem solid #000;border-left:.01rem solid #000;border-right:.01rem solid #000;box-shadow:inset 400px 100px 100px -180px #ffffff4a;background:linear-gradient(to left,rgb(255,88,88) 20%,rgb(255,166,0) 20% 40%,yellow 40% 60%,rgb(131,236,50) 60% 80%,rgb(20,157,255) 80%)}.bottom{width:208px;height:108px;transform:rotate(-22.5deg) skew(45deg) scaleY(cos(45deg)) translate(-233%,302.9%);background:linear-gradient(90deg,transparent,#b6b6b6);background:linear-gradient(to bottom,rgba(209,72,72,.5) 20%,rgba(210,137,0,.5) 20% 40%,rgba(196,196,0,.5) 40% 60%,rgba(101,184,38,.5) 60% 80%,rgba(15,121,197,.5) 80%);box-shadow:inset 360px 100px 100px -180px #fff}