.pr3{
    transform-style: preserve-3d;
}
.pa{
    position: absolute;
}
.wh{
    width: inherit;
    height: inherit;
}



*{
    box-sizing: border-box;
    transition: .3s;
}
body{
    background: #000;
    cursor: grab;
    font-family: sans-serif;
}
body:active{
    cursor: grabbing;
}
.demo{
    transform: rotateY(0deg) rotateX(0deg) scale(1) scaleZ(1);
    animation: Asilbek 4s alternate;
    animation-delay: 0.8s;
}
@keyframes Asilbek{
   0%{
      transform: rotateY(240deg) rotateX(46deg) scale(0.5) scaleZ(0.5);
   }
   
   100%{
    transform: rotateY(0deg) rotateX(0deg) scale(1) scaleZ(1);
   }
}












.lok{
    width: 40px;
    height: 40px;
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 999;
}
.lok .side{
    width: 40px;
    height: 40px;
    background: #000000c0;
    border: 1px solid #eceff3cb;
    border-radius: 3px;
    font-size: 30px;
    padding: 3px 0 0 10px;
}
.lok .oldi{
    transform: translateZ(20px);
}
.lok .orqa{
    transform: rotateY(180deg) translateZ(20px);
}
.lok .ong{
    transform: rotateY(90deg) translateZ(20px);
}
.lok .chap{
    transform: rotateY(-90deg) translateZ(20px);
}
.lok .tepa{
    transform: rotateX(90deg) translateZ(20px);
}
.lok .past{
    transform: rotateX(-90deg) translateZ(20px);
}
.x{
    color: rgba(255, 0, 0, 0.74);
}
.y{
    color: rgba(0, 128, 0, 0.74);
}
.z{
    color: rgba(0, 0, 255, 0.74);
}


.link{
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: #ffffffad;
    border: 1px solid #0c51a0cb;
    border-radius: 3px;
    box-sizing: border-box;
    padding-left: 4px;
    position: fixed;
    top: 7px;
    left: 10px;
    font-size: 20px;
    font-weight: bold;
    z-index: 999;
}
.link:hover{
    width: 115px;
}
.link a{
    list-style: none;
    text-decoration: none;
}
.container{
    position: relative;
    margin: 200px auto;
    width: 300px;
    height: 300px;
    perspective: 600px;
}
.cubb{
    width: 300px;
    height: 300px;
}
.tom{
    transform: rotateX(-90deg) translateX(-180px) translateZ(-200px) translateY(-200px);
}
.tom .yon{
    width: 168px;
    height: 396px;
    
}
.tom .yoni1{
    transform: translateX(512px) translateZ(-54px);
}
.tom .yoni2{
    transform: translateX(-20px) translateZ(-54px);
}
.tom .yon{
    background: url('./img/Capture7.PNG');
}
.tom .yon1{
    transform: rotateY(-40deg) rotateX(0deg);
    clip-path: polygon(0 27%, 100% 0, 100% 100%, 0 73%);
}
.tom .yon2{
    transform: rotateY(40deg) rotateX(0deg);
    clip-path: polygon(0 0, 100% 27%, 100% 73%, 0 100%);
}


.tom .side3{
    width: 660px;
    height: 396px;
    background: url('./img/Capture9.PNG');
}
.tom .side3 .side4{
    width: 660px;
    height: 280px;
    background: url('./img/Capture7_2.PNG');
    clip-path: polygon(0 0, 100% 0, 80% 56%, 80% 100%, 19% 100%, 19% 54%);
}
.tom .side3 .side4_1{
    transform-origin: 50% 0%;
    transform: rotateX(-45deg);
}
.tom .side3 .side4_3{
    width: 300px;
    height: 40px;
    color: #00000075;
    font-size: 30px;
    box-shadow: inset 1px 1px 7px grey;
    background: #000000a9;
    border: 1px solid #7a0e06a4;
    border-radius: 5px;
    transform-origin: 50% 0%;
    transform: rotateX(90deg) translateY(-40px) translateX(178px);
    animation: Asilbek1 2s linear infinite;
}
@keyframes Asilbek1{
   0%{
      text-shadow: 1px 1px 10px red;
   }
   20%{
    text-shadow: 1px 1px 10px yellow;
   }
   40%{
    text-shadow: 1px 1px 10px blue;
   }
   60%{
    text-shadow: 1px 1px 10px green;
   }
   80%{
    text-shadow: 1px 1px 10px white;
   }
   100%{
    text-shadow: 1px 1px 10px red;
   }
}
.tom .side3 .side4_2{
    transform-origin: 50% 100%;
    transform: rotateX(-135deg) translateZ(82px) translateY(198px);
}


.devor0{
    transform: translateX(-5px) translateY(240px);
}


.devor0 .side, .devor0 .side1{
    width: 300px;
    height: 60px;
    background: url('./img/Capture5.PNG');
}

.devor0 .olqa{
    width: 600px;
    height: 60px;
}
.devor0 .oldi{
    transform: translateZ(150px) translateX(-150px);
}
.devor0 .orqa{
    transform: rotateY(180deg) translateZ(150px) translateX(150px);
}
.devor0 .ong{
    transform: rotateY(90deg) translateZ(300px);
}
.devor0 .chap{
    transform: rotateY(-90deg) translateZ(300px);
}


.devor0 .side1{
    width: 300px;
    height: 10px;
    transform-origin: 50% 0%;
    transform: rotateX(-90deg);
}

.devor0 .oldi .olqa2, .devor0 .orqa .olqa2{
    width: 600px;
    height: 10px;
}


.devor0 .side1 .side2{
    width: 280px;
    height: 200px;
    background: url('./img/Capture6.PNG');
    background-size: cover;
    transform-origin: 50% 0%;
    transform: rotateX(-90deg) translateZ(10px) translateX(10px);
}

.devor0 .oldi .oldi .oldi{
    width: 150px;
    height: 200px;
    border: 5px solid #eee;
    box-sizing: border-box;
    background: #00f5;
    transform-origin: 50% 0%;
    transform: rotateX(-90deg);
}
.devor0 .oldi .oldi .side2_1{
    width: 141px;
    transform: rotateX(-90deg) translateX(10px) translateZ(10px);
}
.devor0 .oldi .oldi .side2_2{
    width: 140px;
    transform: rotateX(-90deg) translateX(151px) translateZ(10px);
    transition: .6s;
}
.devor0 .oldi .oldi .side2_3{
    width: 150px;
    transform: rotateX(-90deg) translateX(291px) translateZ(10px);
    transition: .6s;
}
.devor0 .oldi .oldi .side2_2:hover, .devor0 .oldi .oldi .side2_3:hover{
    cursor: col-resize;
}
.devor0 .oldi .oldi .side2_2:active, .devor0 .oldi .oldi .side2_3:active{
    cursor: grab;
}
.devor0 .oldi .oldi .side2_4{
    width: 149px;
    transform: rotateX(-90deg) translateX(441px) translateZ(10px);
}
.devor0 .oldi .oldi .side_a{
    transform: rotateX(-90deg) translateX(400px) translateZ(10px);
}
.devor0 .oldi .oldi .side_2a{
    transform: rotateX(-90deg) translateX(50px) translateZ(10px);
}

.zina .rgb1{
    background: url('./img/Capture7.PNG');
}
.zina .rgb{
    background: url('./img/Capture4.PNG');
}
.zina .rgb2{
    background: url('./img/Capture5.PNG');
}
.zina .ziny{
    width: 130px;
    height: 60px;
}
.zina .zinyo1{
    transform: rotateY(-90deg) translateX(65px) translateZ(-136px);
    clip-path: polygon(25% 0, 25% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 75%, 100% 75%, 100% 100%, 0 100%, 0 0);
}

.zina .tep{
    width: 196px;
    height: 32.5px;
}
.zina .tep1{
    transform: rotateX(90deg) translateX(201px) translateY(16px) translateZ(16px);
}
.zina .tep2{
    transform: rotateX(90deg) translateX(201px) translateY(48px) translateZ(1.22px);
}
.zina .tep3{
    transform: rotateX(90deg) translateX(201px) translateY(80px) translateZ(-13.8px);
}
.zina .tep4{
    transform: rotateX(90deg) translateX(201px) translateY(113px) translateZ(-28.7px);
}



.zina .zinyo2{
    transform: rotateY(-90deg) translateX(65px) translateZ(-332px);
    clip-path: polygon(25% 0, 25% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 75%, 100% 75%, 100% 100%, 0 100%, 0 0);
}
.zina .pas{
    width: 196px;
    height: 15px;
}
.zina .pas1{
    transform: translateX(201px) translateY(0.25px) translateZ(32.75px);
}
.zina .pas2{
    transform: translateX(201px) translateY(15px) translateZ(64.8px);
}
.zina .pas3{
    transform: translateX(201px) translateY(30px) translateZ(96.76px);
}
.zina .pas4{
    transform: translateX(201px) translateY(45px) translateZ(129.6px);
}



.devor0 .orqa .orqa .orqa{
    width: 150px;
    height: 200px;
    background: url('./img/Capture6.PNG');
    background-size: cover;
    transform-origin: 50% 0%;
    transform: rotateX(-90deg);
}
.devor0 .orqa .orqa .side2_1{
    width: 141px;
    transform: rotateX(-90deg) translateX(10px) translateZ(10px);
}
.devor0 .orqa .orqa .side2_2{
    width: 140px;
    transform: rotateX(-90deg) translateX(151px) translateZ(10px);
}
.devor0 .orqa .orqa .side2_3{
    width: 150px;
    transform: rotateX(-90deg) translateX(291px) translateZ(10px);
}
.devor0 .orqa .orqa .side2_4{
    width: 149px;
    transform: rotateX(-90deg) translateX(441px) translateZ(10px);
}
.pol{
    transform: rotateX(-90deg) translateX(-140px) translateZ(-140px);
}
.pol .side{
    width: 580px;
    height: 280px;
    background: url('./img/Capture3.PNG');
}






.yre{
    transform: rotateX(-90deg) translateX(-900px) translateZ(-700px);
}
.yer{
    width: 2000px;
    height: 2000px;
    background: url('./img/Capture.PNG');
}