*{
    cursor: none;
}
body{
    background-color: #040303;
}
.container{
 margin: 300px auto;
 height: 300px;
 width: 300px;
 perspective: 800px;
 box-shadow: 1px 1px 12px 8px #1C3879 inset, 2px 1px 10px 10px #EB1D36 inset , 2px 1px 12px 14px #ECB390 ;
 border-radius: 50%;
}

.Cube{
    height: 300px;
    width: 300px;
    transform-style: preserve-3d;
    transform: translateZ(-300px) rotateX(50deg);
    position: relative;
    transition: 2s;
    
}
.Cube:hover{
    transform: translateZ(-300px) rotateX(60deg) rotateY(360deg) scale(0.4);
}
.face{
    position: absolute;
    height: 300px;
    width: 300px;
}

.front{
    background: linear-gradient(#191919,#1C3879);
    transform: rotateX(-90deg) translateZ(150px);
}
.right{
    background: linear-gradient(#191919,#EB1D36);
    transform: rotateY(90deg) translateZ(150px);
}
.back{
    background: linear-gradient(#191919,#1C3879);
    transform: rotateX(90deg) translateZ(150px);
}
.left{
    background: linear-gradient(#191919,#EB1D36);
    transform: rotateY(-90deg) translateZ(150px);

}

.top{
    background: linear-gradient(#191919,#FF87B2);
    transform: rotateX(0deg) translateZ(150px);
    
}
.bottom{
    background: linear-gradient(#191919,#FF87B2);
    transform: rotateX(180deg) translateZ(150px);
    
    
}
.cursor{
    width: 3rem;
    height: 3rem;
    border: solid #f9df4d 1px;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 1;
    background-color: #FCF8E8;
    opacity:0.7;
}
 .secondCursor{
    width: 0.5rem;
    height: 0.5rem;
    border: solid 1px;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transform: translate(190%,190%);
    background-color: #f9df4d;
}