@media screen and (min-width: 451px) and (max-width:769px) {


body{
    width: 100vw;
    overflow-x: hidden;
    background: #FFF7E8;
    position: relative;
}

.one{
      width: 100vw;
}

.krisha{
    margin-top: 34.5%;
    width: 100vw;
    height: 20.14vw;

    
}
.krishaimg{
    width: 100%;
    position: absolute;
}


.sh{
    width: 18%;
  position: absolute;
  margin-top: -43%;
  margin-left: 7%;
animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.t{
    width: 15%;
    position: absolute;
    margin-top: -40%;
    margin-left: 25%;
    animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.r{
    width: 12%;
    position: absolute;
     margin-top: -40%;
     margin-left: 42%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.i{
    width: 14%;
    position: absolute;
     margin-top: -44%;
     margin-left: 57%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.h{
    width: 14%;
    position: absolute;
     margin-top: -42%;
     margin-left: 72%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}




.logo{
   width: 16%;
   position: absolute;
   margin-top: -55%;
   margin-left: 84%;

}

.dim{
   width: 4%;
   position: absolute;
   margin-top: -32%;
   margin-left: 5%;
    animation: slide-out-top 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}
@keyframes slide-out-top {
  0% { transform: translateY(0);
    opacity: 1;}
  100% {transform: translateY(-1000px);
    opacity: 0;}
}

.tarelka{
   
    margin-left: 68%;
    margin-top: -30%;
}
.tarelkaimg{
  width: 28%;
  position: absolute;
  
   
}





.list1{
    margin-top: 22%;
    margin-left: 5%;
}

.l1{
    position: absolute;
    width: 3%;
}

.lk1{
    position: absolute;
    opacity: 0;
    width: 3%;
}

.lk1:hover{
    opacity: 1;
}




.list2{
    margin-top: 22%;
    margin-left: 13%;
}

.l2{
    position: absolute;
    width: 3%;
}

.lk2{
    position: absolute;
    opacity: 0;
    width: 3%;
}

.lk2:hover{
    opacity: 1;
}




.list3{
 
    margin-left: 18%;
}

.l3{
    position: absolute;
    width: 3%;
    margin-top: -7%;
}

.lk3{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -7%;
}

.lk3:hover{
    opacity: 1;
}


.list4{
 
    margin-left: 22%;
}

.l4{
    position: absolute;
    width: 3%;
    margin-top: 0%;
}

.lk4{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: 0%;
}

.lk4:hover{
    opacity: 1;
}



.list5{
 
    margin-left: 25%;
}

.l5{
    position: absolute;
    width: 6%;
    margin-top: -7%;
}

.lk5{
    position: absolute;
    opacity: 0;
    width: 6%;
    margin-top: -7%;
}

.lk5:hover{
    opacity: 1;
}



.list6{
 
    margin-left: 27%;
}

.l6{
    position: absolute;
    width: 5%;
    margin-top: 0%;
}

.lk6{
    position: absolute;
    opacity: 0;
    width: 5%;
    margin-top: 0%;
}

.lk6:hover{
    opacity: 1;
}




.list7{
 
    margin-left: 34%;
}

.l7{
    position: absolute;
    width: 3%;
    margin-top: -10%;
}

.lk7{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -10%;
}

.lk7:hover{
    opacity: 1;
}




.list8{
 
    margin-left: 36%;
}

.l8{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk8{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk8:hover{
    opacity: 1;
}




.list9{
 
    margin-left: 42%;
}

.l9{
    position: absolute;
    width: 6%;
    margin-top: -6%;
}

.lk9{
    position: absolute;
    opacity: 0;
    width: 6%;
    margin-top: -6%;
}

.lk9:hover{
    opacity: 1;
}




.list10{
 
    margin-left: 50%;
}

.l10{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk10{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk10:hover{
    opacity: 1;
}





.list11{
 
    margin-left: 50%;
}

.l11{
    position: absolute;
    width: 4%;
    margin-top: -8%;
}

.lk11{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: -8%;
}

.lk11:hover{
    opacity: 1;
}


.list12{
 
    margin-left: 56%;
}

.l12{
    position: absolute;
    width: 3%;
    margin-top: -5%;
}

.lk12{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -5%;
}

.lk12:hover{
    opacity: 1;
}



.list13{
 
    margin-left: 60%;
}

.l13{
    position: absolute;
    width: 4%;
    margin-top: -9%;
}

.lk13{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: -9%;
}

.lk13:hover{
    opacity: 1;
}





.list14{
 
    margin-left: 60%;
}

.l14{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk14{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk14:hover{
    opacity: 1;
}





.list15{
 
    margin-left: 66%;
}

.l15{
    position: absolute;
    width: 3%;
    margin-top: -7%;
}

.lk15{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -7%;
}

.lk15:hover{
    opacity: 1;
}





.list16{
 
    margin-left: 70%;
}

.l16{
    position: absolute;
    width: 4%;
    margin-top: 2%;
}

.lk16{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 2%;
}

.lk16:hover{
    opacity: 1;
}




.p1{
    margin-top: 17%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 20%;
    width: 20%;
   
}

.p2{
    margin-top: 17%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 67%;
    width: 20%;
   
}

.beg1{
    width: 100vw;
    height: 5.97vw;
    background-color: #323A47;
    margin-top: 7.8%;
    position: absolute;
}

.begimg1{
position: absolute;
width: 481.18vw;
animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.door1{
    position: absolute;
    width: 22.71vw;
    margin-left: 77.29vw;
    margin-top: 13.6%;
    display: none;
}

.ruk1{
    position: absolute;
    width: 3.54vw;
    margin-top: 35.5%;
    margin-left: 96%;
    animation: rot 2s linear infinite; 
    display: none;
}

@keyframes rot {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}


.pop1, .jidsk {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}




.jid{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    margin-top: 4%;
    margin-left: 10%;
    text-align: center;
}


.popup-content {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close:hover {
  color: #000;
}


.ok1 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok1:hover {
  background-color: #3e4e68; 
}


.ruk1 {
  cursor: pointer;
}







.col{
    width: 47.53vw;
    height: 26.76vh;
    position: absolute;
    flex-direction: row;
    margin-top: 22%;
    margin-left: 3%;
}

.col1 , .col2 , .col3 , .col4{
    width: 23.18vw;
  
}

.str1{
    transform: scale(1.4);
width: 9.03vw;
position: absolute;
margin-top: 28%;
margin-left: 50%;
}

.str2{
    transform: scale(1.4);
width: 9.03vw;
position: absolute;
margin-top: 28%;
margin-left: 88%;
}

.ram{
    position: absolute;
     width: 17.78vw;
    margin-top: 51%;
    margin-left: 17.5%;
}



.ram3{
    position: absolute;
    width: 21.60vw;
    margin-top: 44.5%;
    margin-left: 63%;
}





.begimg2{
margin-top: 74%;
position: absolute;
width: 481.18vw;
animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

#selected-image img {
    position: absolute;
    width: 17.78vw;
    object-fit: contain; 
  }

.bukm{
    transform: scale(2);
position: absolute;
    margin-top: 26%;
    margin-left: 68%;
    width: 5vw;
}

.buksh{
    transform: scale(2);
position: absolute;
    margin-top: 26%;
    margin-left: 68%;
    width: 5vw;
}


.door2{
    position: absolute;
    margin-top: 68.1%;
    width: 23.96vw;
    display: none;
   
}

.ruk2{
position: absolute;
margin-top: 89%;
margin-left: 1%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.pop11, .jidsk11 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jidsk11ok{
    width: 29.46vw;
}

.jid11{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    margin-top: 4%;
    margin-left: 10%;
    text-align: center;
}


.popup-content11 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close11 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close11:hover {
  color: #000;
}


.ok11 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok11:hover {
  background-color: #3e4e68; 
}


.ruk2 {
  cursor: pointer;
}





.str11{
width: 9.03vw;
position: absolute;
margin-top: 94%;
margin-left: 1%;
transform: scale(1.6);
}

.str22{
width: 9.03vw;
position: absolute;
margin-top: 94%;
margin-left: 88%;
transform: scale(1.6);
}

.p11{
    margin-top: 80%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 44%;
    width: 20%;
}

.plitka1{
    position: absolute;
    width: 57.43vw;
    margin-top: 84%;
    margin-left: 20%;
}

.plitka2{
    position: absolute;
    width: 57.43vw;
    margin-top: 84%;
    margin-left: 20%;
}

.plitka3{
    position: absolute;
    width: 57.43vw;
    margin-top: 84%;
    margin-left: 20%;
}


.pl11, .pl22, .pl23{
     position: absolute;
    width: 57.43vw;
}


.pl1{
    width: 3.26vw;
    position: absolute;
    top: 10%;
    left: -40%;
    cursor: move;
}
.pl2{
width: 6.74vw;
position: absolute;
top: 70%;
left: -50%;
cursor: move;
}

.pl3{
    width:  5.07vw;
    position: absolute;
    top: 15%;
    left: -7%;
    cursor: move;
}
.pl4{
    width: 7.4vw;
    position: absolute;
top: 75%;
left: -25%;
    cursor: move;
}
.pl5{
width: 6.74vw;
position: absolute;
top: 10%;
left: 15%;
cursor: move;
}
.pl6{
    width:  5.07vw;
    position: absolute;
    top: 75%;
    left: 5%;
    cursor: move;
}
.pl7{
    width: 7.4vw;
    position: absolute;
top: 40%;
left: 32%;
    cursor: move;
}
.pl8{
width: 6.74vw;
position: absolute;
top: 15%;
left: 50%;
cursor: move;
}
.pl9{
    width:  5.07vw;
    position: absolute;
top: 42%;
left: 63%;
    cursor: move;
}
.pl10{
    width: 7.4vw;
    position: absolute;
top: 10%;
left: 77%;
    cursor: move;
} 
.pl11{
width: 6.74vw;
position: absolute;
top: 70%;
left: 90%;
cursor: move;
}
.pl12{
    width:  5.07vw;
    position: absolute;
top: 10%;
left: 95%;
    cursor: move;
}
.pl13{
    width: 7.4vw;
    position: absolute;
top: 74%;
left: 110%;
    cursor: move;
}
.pl14{
width: 6.74vw;
position: absolute;
top: 10%;
left: 112%;
cursor: move;
}
.pl15{
    width:  5.07vw;
    position: absolute;
    top: 75%;
    left: 125%;
    cursor: move;
}





.begimg3{
margin-top: 127.8%;
position: absolute;
width: 445.56vw;
animation: text 6s linear infinite;
z-index: 3000;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}


.door3{
    position: absolute;
    width: 22.71vw;
    margin-top: 121.64%;
    margin-left: 77.29%;
    display: none;
}

.ruk3{
position: absolute;
margin-top: 143.5%;
margin-left: 96%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}




.pop111, .jidsk111 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jidsk111ok{
    width: 29.46vw;
}

.jid111{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    top: -30%;
    margin-left: 10%;
    text-align: center;
}


.popup-content111 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close111 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close111:hover {
  color: #000;
}


.ok111 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok111:hover {
  background-color: #3e4e68; 
}


.ruk3 {
  cursor: pointer;
}










.tkan{
    transform: scale(1.5);
    position: relative;
    width: 50.83vw;
    
    margin-top: 131.34%;
    margin-left: 39.27%;
    z-index: 1;
}

#paint{
    margin-top: 139%;
    margin-left: 27.3%;
    position: absolute; 
    top: 0; left: 0;
    z-index: 2;
    
}



.skinp{
      margin-top: -57.5%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 58%;
    width: 20%;
}










.pro1{
    position: absolute;
    width: 26.46vw;
    margin-top: -54.1%;
    z-index: 1;
    transform: scale(1.4);
}

.pro2{
    position: absolute;
    width: 26.46vw;
    margin-top: -54.1%;
    transform: scale(1.4);
}

.but1{
    position: absolute;
    width:  10.46vw;
    height: 4vw;
    margin-top: -32.5%;
    margin-left: 7.6%;
     background-color: #FFF7E8;
    z-index: 1;
    border-radius: 32px;
    font-family: "Inter-regular";
    font-size: 1.4vw;
    transform: scale(1.4);
    
}





.vish1{
    position: absolute;
    width: 26.46vw;
    margin-top: -20.6%;
    z-index: 2;
    transform: scale(1.4);
}

.vish2{
    position: absolute;
    width: 26.46vw;
    margin-top: -20.6%;
    z-index: 1;
    transform: scale(1.4);
}

.but2{
    position: absolute;
    width: 10.46vw;
    height: 4vw;
    margin-top: 0%;
    margin-left: 7.6%;
    background-color: #FFF7E8;
    z-index: 1000;
     border-radius: 32px;
    font-family: "Inter-regular";
    font-size: 1.4vw;
    transform: scale(1.4);
}





.begimg4{
margin-top: 200.4%;
position: absolute;
width: 425.28vw;
z-index: 3;
animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}
}


.door4{
position: absolute;
width: 23.96vw;
margin-top: 5%;
display: none;
}

.ruk4{
position: absolute;
margin-top: 27%;
margin-left: 19%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}





.pop1111 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jid1111 {
        font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 25.39vw;
    margin-top: 4%;
    margin-left: 7%;
    text-align: center;
}



.popup-content1111 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close1111 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close1111:hover {
  color: #000;
}


.ok1111 {
  margin-top: 14.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok1111:hover {
  background-color: #3e4e68; 
}


.ruk4 {
  cursor: pointer;
}








.bukv1{
    position: absolute;
    width: 15.69vw;
    margin-top: 21%;
    margin-left: 6%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}

@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}


.bukv2{
    position: absolute;
    width: 8.40vw;
    margin-top: 18%;
    margin-left: 29%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv3{
    position: absolute;
    width: 13.89vw;
    margin-top: 23%;
    margin-left: 40%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv4{
    position: absolute;
    width:  9.24vw;
    margin-top: 20%;
    margin-left: 58%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv5{
    position: absolute;
    width:  13.47vw;
    margin-top: 22%;
    margin-left: 71%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv6{
    position: absolute;
    width:  12.20vw;
    margin-top: 18%;
    margin-left: 87%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}


.blue{
    position: absolute;
    width: 76.04vw;
    margin-top: 50%;
    margin-left: 0%;
    transform: scale(1.68);
}

.white{
    position: absolute;
    width: 60.00vw;
    margin-top: 52%;
    margin-left: 34%;
    
}
.white-container {
    position: relative;
    width: 60vw; 
    top: 29vw;
    margin-left: 5%;
    box-sizing: border-box;
   
}
.white {
    width: 100%;
    height: auto; 
    transform: scale(1.38);
    
}

.pe{
    margin-top: 49%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 42%;
    width: 25%;
    color: #FFFFFF;
    transform: scale(1.68);
}


.bukva2{
    position: absolute;
    width: 5.63vw;
    margin-top: 52%;
    margin-left: 5%;
    filter: invert(100%);
    transform: scale(1.68);
}

.bukva3{
    position: absolute;
    width: 4.63vw;
    margin-top: 61.5%;
    margin-left: 5.4%;
    filter: invert(100%);
    transform: scale(1.68);
}

.bukva4{
    position: absolute;
    width: 5.23vw;
    margin-top: 72%;
    margin-left: 5%;
    filter: invert(100%);
    transform: scale(1.68);
}



 .bukva2, .bukva3, .bukva4 {
    cursor: pointer; 
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

 .bukva2:active, .bukva3:active, .bukva4:active {
    transform: scale(1.1); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    
}












.rec{
    position: absolute;
    width: 100vw;
    margin-top: 88%;
}

.door5{
    position: absolute;
    margin-top: 90.3%;
    margin-left: 65%;
    width: 23.96vw;
   
}

.ruk5{
position: absolute;
margin-top: 111.2%;
margin-left: 66%;
width: 3.40vw;

}

.rec2{
    position: absolute;
    width: 100vw;
    margin-top: 138%;
}

.podv{
    position: absolute;
    width: 42.36vw;
    margin-top: 96%;
    margin-left: 2%;
}

.tab{
    position: absolute;
    width: 6.74vw;
    margin-top: 111%;
    margin-left: 74.4%;
    animation: wobble-hor-top 2s ease infinite;
}

@keyframes wobble-hor-top {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-5px) rotate(6deg);}
  30% {transform: translateX(5px) rotate(-6deg);}
  45% {transform: translateX(-5px) rotate(3.6deg);}
  60% {transform: translateX(5px) rotate(-2.4deg);}
  75% {transform: translateX(-5px) rotate(1.2deg);}
}




.cubiki{
position: absolute;
width: 50vw;
height: 10vw;
margin-top: 70vw;
margin-left: 30vw;
}

.cubiki img{
position:  absolute;
width: 4vw;
}


.draggable {
  position: absolute;
  cursor: grab;
}





}








@media screen and (min-width: 1px) and (max-width: 450px)  {



body{
    width: 100vw;
    overflow-x: hidden;
    background: #FFF7E8;
    position: relative;
}

.one{
      width: 100vw;
}

.krisha{
    margin-top: 100.5%;
    width: 100vw;
    height: 20.14vw;

    
}
.krishaimg{
    width: 100%;
    position: absolute;
}


.sh{
    width: 18%;
  position: absolute;
  margin-top: -83%;
  margin-left: 7%;
animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.t{
    width: 15%;
    position: absolute;
    margin-top: -80%;
    margin-left: 25%;
    animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.r{
    width: 12%;
    position: absolute;
     margin-top: -80%;
     margin-left: 42%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.i{
    width: 14%;
    position: absolute;
     margin-top: -84%;
     margin-left: 57%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.h{
    width: 14%;
    position: absolute;
     margin-top: -82%;
     margin-left: 72%;
     animation: wobble-hor-bottom 3s ease-out infinite both;
}
@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}




.logo{
   width: 16%;
   position: absolute;
   margin-top: -120%;
   margin-left: 84%;

}

.dim{
   width: 4%;
   position: absolute;
   margin-top: -32%;
   margin-left: 5%;
    animation: slide-out-top 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}
@keyframes slide-out-top {
  0% { transform: translateY(0);
    opacity: 1;}
  100% {transform: translateY(-1000px);
    opacity: 0;}
}

.tarelka{
   
    margin-left: 68%;
    margin-top: -30%;
}
.tarelkaimg{
  width: 28%;
  position: absolute;
  
   
}





.list1{
    margin-top: 22%;
    margin-left: 5%;
}

.l1{
    position: absolute;
    width: 3%;
}

.lk1{
    position: absolute;
    opacity: 0;
    width: 3%;
}

.lk1:hover{
    opacity: 1;
}




.list2{
    margin-top: 22%;
    margin-left: 13%;
}

.l2{
    position: absolute;
    width: 3%;
}

.lk2{
    position: absolute;
    opacity: 0;
    width: 3%;
}

.lk2:hover{
    opacity: 1;
}




.list3{
 
    margin-left: 18%;
}

.l3{
    position: absolute;
    width: 3%;
    margin-top: -7%;
}

.lk3{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -7%;
}

.lk3:hover{
    opacity: 1;
}


.list4{
 
    margin-left: 22%;
}

.l4{
    position: absolute;
    width: 3%;
    margin-top: 0%;
}

.lk4{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: 0%;
}

.lk4:hover{
    opacity: 1;
}



.list5{
 
    margin-left: 25%;
}

.l5{
    position: absolute;
    width: 6%;
    margin-top: -7%;
}

.lk5{
    position: absolute;
    opacity: 0;
    width: 6%;
    margin-top: -7%;
}

.lk5:hover{
    opacity: 1;
}



.list6{
 
    margin-left: 27%;
}

.l6{
    position: absolute;
    width: 5%;
    margin-top: 0%;
}

.lk6{
    position: absolute;
    opacity: 0;
    width: 5%;
    margin-top: 0%;
}

.lk6:hover{
    opacity: 1;
}




.list7{
 
    margin-left: 34%;
}

.l7{
    position: absolute;
    width: 3%;
    margin-top: -10%;
}

.lk7{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -10%;
}

.lk7:hover{
    opacity: 1;
}




.list8{
 
    margin-left: 36%;
}

.l8{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk8{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk8:hover{
    opacity: 1;
}




.list9{
 
    margin-left: 42%;
}

.l9{
    position: absolute;
    width: 6%;
    margin-top: -6%;
}

.lk9{
    position: absolute;
    opacity: 0;
    width: 6%;
    margin-top: -6%;
}

.lk9:hover{
    opacity: 1;
}




.list10{
 
    margin-left: 50%;
}

.l10{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk10{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk10:hover{
    opacity: 1;
}





.list11{
 
    margin-left: 50%;
}

.l11{
    position: absolute;
    width: 4%;
    margin-top: -8%;
}

.lk11{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: -8%;
}

.lk11:hover{
    opacity: 1;
}


.list12{
 
    margin-left: 56%;
}

.l12{
    position: absolute;
    width: 3%;
    margin-top: -5%;
}

.lk12{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -5%;
}

.lk12:hover{
    opacity: 1;
}



.list13{
 
    margin-left: 60%;
}

.l13{
    position: absolute;
    width: 4%;
    margin-top: -9%;
}

.lk13{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: -9%;
}

.lk13:hover{
    opacity: 1;
}





.list14{
 
    margin-left: 60%;
}

.l14{
    position: absolute;
    width: 4%;
    margin-top: 0%;
}

.lk14{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 0%;
}

.lk14:hover{
    opacity: 1;
}





.list15{
 
    margin-left: 66%;
}

.l15{
    position: absolute;
    width: 3%;
    margin-top: -7%;
}

.lk15{
    position: absolute;
    opacity: 0;
    width: 3%;
    margin-top: -7%;
}

.lk15:hover{
    opacity: 1;
}





.list16{
 
    margin-left: 70%;
}

.l16{
    position: absolute;
    width: 4%;
    margin-top: 2%;
}

.lk16{
    position: absolute;
    opacity: 0;
    width: 4%;
    margin-top: 2%;
}

.lk16:hover{
    opacity: 1;
}




.p1{
    margin-top: 21%;
    font-family: "Inter-regular";
    font-size: 2.67vw;
    position: absolute;
    margin-left: 43%;
    width: 20%;
   
}

.p2{
    margin-top: 68%;
    font-family: "Inter-regular";
    font-size: 2.67vw;
    position: absolute;
    margin-left: 42%;
    width: 30%;
   
}



.begimg1{
position: absolute;
width: 481.18vw;
transform: scale(2);
margin-top: 3%;
animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.door1{
    position: absolute;
    width: 22.71vw;
    margin-left: 77.29vw;
    margin-top: 13.6%;
    display: none;
}

.ruk1{
    position: absolute;
    width: 3.54vw;
    margin-top: 35.5%;
    margin-left: 96%;
    animation: rot 2s linear infinite; 
    display: none;
}

@keyframes rot {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}


.pop1, .jidsk {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}




.jid{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    margin-top: 4%;
    margin-left: 10%;
    text-align: center;
}


.popup-content {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close:hover {
  color: #000;
}


.ok1 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok1:hover {
  background-color: #3e4e68; 
}


.ruk1 {
  cursor: pointer;
}







.col{
    width: 47.53vw;
    height: 26.76vh;
    position: absolute;
    flex-direction: row;
    margin-top: 28%;
    margin-left: 28%;
}

.col1 , .col2 , .col3 , .col4{
    width: 23.18vw;
  
}

.str1{
    transform: scale(1.4);
width: 9.03vw;
position: absolute;
margin-top: 77%;
margin-left: 15%;
}

.str2{
    transform: scale(1.4);
width: 9.03vw;
position: absolute;
margin-top: 77%;
margin-left: 78%;
}

.ram{
    position: absolute;
     width: 17.78vw;
    margin-top: 55%;
    margin-left: 42.3%;
}



.ram3{
    position: absolute;
    width: 21.60vw;
    margin-top: 97.5%;
    margin-left: 40%;
}





.begimg2{
    transform: scale(2);
margin-top: 132%;
position: absolute;
width: 481.18vw;
animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

#selected-image img {
    position: absolute;
    width: 17.78vw;
    object-fit: contain; 
  }

.bukm{
    transform: scale(2.8);
position: absolute;
    margin-top: 77%;
    margin-left: 45%;
    width: 5vw;
}

.buksh{
    transform: scale(2.5);
position: absolute;
    margin-top: 77%;
    margin-left: 43%;
    width: 5vw;
}


.door2{
    position: absolute;
    margin-top: 68.1%;
    width: 23.96vw;
    display: none;
   
}

.ruk2{
position: absolute;
margin-top: 89%;
margin-left: 1%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.pop11, .jidsk11 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jidsk11ok{
    width: 29.46vw;
}

.jid11{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    margin-top: 4%;
    margin-left: 10%;
    text-align: center;
}


.popup-content11 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close11 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close11:hover {
  color: #000;
}


.ok11 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok11:hover {
  background-color: #3e4e68; 
}


.ruk2 {
  cursor: pointer;
}





.str11{
width: 9.03vw;
position: absolute;
margin-top: 204%;
margin-left: 1%;
transform: scale(1.6);
}

.str22{
width: 9.03vw;
position: absolute;
margin-top: 204%;
margin-left: 88%;
transform: scale(1.6);
}

.p11{
    margin-top: 140%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 48%;
    width: 20%;
    transform: scale(2);
}

.plitka1{
    position: absolute;
    width: 57.43vw;
    margin-top: 194%;
    margin-left: 20%;
    transform: scale(1.2);
}

.plitka2{
    position: absolute;
    width: 57.43vw;
    margin-top: 194%;
    margin-left: 20%;
    transform: scale(1.2);
}

.plitka3{
    position: absolute;
    width: 57.43vw;
    margin-top: 194%;
    margin-left: 20%;
    transform: scale(1.2);
}


.pl11, .pl22, .pl23{
     position: absolute;
    width: 57.43vw;
}


.pl1{
    width: 3.26vw;
    position: absolute;
    top: 440%;
    left: 0%;
    cursor: move;
}
.pl2{
width: 6.74vw;
position: absolute;
top: 140%;
left: -50%;
cursor: move;
}

.pl3{
    width:  5.07vw;
    position: absolute;
    top: 50%;
    left: -40%;
    cursor: move;
}
.pl4{
    width: 7.4vw;
    position: absolute;
top: 295%;
left: -25%;
    cursor: move;
}
.pl5{
width: 6.74vw;
position: absolute;
top: 300%;
left: 5%;
cursor: move;
}
.pl6{
    width:  5.07vw;
    position: absolute;
    top: 145%;
    left: 5%;
    cursor: move;
}
.pl7{
    width: 7.4vw;
    position: absolute;
top: 340%;
left: 32%;
    cursor: move;
}
.pl8{
width: 6.74vw;
position: absolute;
top: 485%;
left: 50%;
cursor: move;
}
.pl9{
    width:  5.07vw;
    position: absolute;
top: 302%;
left: 63%;
    cursor: move;
}
.pl10{
    width: 7.4vw;
    position: absolute;
top: 70%;
left: 77%;
    cursor: move;
} 
.pl11{
width: 6.74vw;
position: absolute;
top: 360%;
left: 90%;
cursor: move;
}
.pl12{
    width:  5.07vw;
    position: absolute;
top: 200%;
left: 95%;
    cursor: move;
}
.pl13{
    width: 7.4vw;
    position: absolute;
top: 434%;
left: 110%;
    cursor: move;
}
.pl14{
width: 6.74vw;
position: absolute;
top: 70%;
left: 112%;
cursor: move;
}
.pl15{
    width:  5.07vw;
    position: absolute;
    top: 435%;
    left: -50%;
    cursor: move;
}





.begimg3{
margin-top: 247.8%;
position: absolute;
width: 445.56vw;
animation: text 6s linear infinite;
z-index: 3000;
transform: scale(2);
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}


.door3{
    position: absolute;
    width: 22.71vw;
    margin-top: 121.64%;
    margin-left: 77.29%;
    display: none;
}

.ruk3{
position: absolute;
margin-top: 143.5%;
margin-left: 96%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}




.pop111, .jidsk111 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jidsk111ok{
    width: 29.46vw;
}

.jid111{
     
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 21.39vw;
    top: -30%;
    margin-left: 10%;
    text-align: center;
}


.popup-content111 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close111 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close111:hover {
  color: #000;
}


.ok111 {
  margin-top: 12.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok111:hover {
  background-color: #3e4e68; 
}


.ruk3 {
  cursor: pointer;
}










.tkan{
    transform: scale(1.98);
    position: relative;
    width: 50.83vw;
    
    margin-top: 268.34%;
    margin-left: 24.9%;
    z-index: 1;
}

#paint{
    margin-top: 219%;
    margin-left: 27.3%;
    position: absolute; 
    top: 0; left: 0;
    z-index: 2;
    
}



.skinp{
      margin-top: -69%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 43.5%;
    width: 20%;
    transform: scale(2);
}










.pro1{
    position: absolute;
    width: 100vw;
    margin-top: 41.1%;
    z-index: 1;
    transform: scale(1.4);
}

.pro2{
    position: absolute;
    width: 100vw;
    margin-top: 41.1%;
    transform: scale(1.4);
}

.but1{
    position: absolute;
    width:  10.46vw;
    height: 4vw;
    margin-top: 118.5%;
    margin-left: 42.6%;
     background-color: #FFF7E8;
    z-index: 1;
    border-radius: 32px;
    font-family: "Inter-regular";
    font-size: 1.4vw;
    transform: scale(4);
    
}





.vish1{
    position: absolute;
    width: 100vw;
    margin-top: 154.6%;
    z-index: 2;
    transform: scale(1.4);
}

.vish2{
    position: absolute;
    width: 100vw;
    margin-top: 154.6%;
    z-index: 1;
    transform: scale(1.4);
}

.but2{
    position: absolute;
    width: 10.46vw;
    height: 4vw;
    margin-top: 237%;
    margin-left: 42.6%;
    background-color: #FFF7E8;
    z-index: 1000;
     border-radius: 32px;
    font-family: "Inter-regular";
    font-size: 1.4vw;
    transform: scale(4);
}





.begimg4{
margin-top: 593.4%;
position: absolute;
width: 425.28vw;
z-index: 3;
animation: text 6s linear infinite;
transform: scale(2);
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}
}


.door4{
position: absolute;
width: 23.96vw;
margin-top: 5%;
display: none;
}

.ruk4{
position: absolute;
margin-top: 27%;
margin-left: 19%;
width: 3.40vw;
animation: rota 2s linear infinite;
display: none;
}

@keyframes rota {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}





.pop1111 {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.jid1111 {
        font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    width: 25.39vw;
    margin-top: 4%;
    margin-left: 7%;
    text-align: center;
}



.popup-content1111 {
  background-color: #D1D2D7;
  padding: 20px;
  border-radius: 16px;
  width: 29.51vw;
  height: 19.17vh;
  position: absolute;

}


.close1111 {
  position: absolute;
  top: 1.3vw;
  left: 2vw;
  font-size: 24px;
  cursor: pointer;
  color: #0d0d0d; 
}

.close1111:hover {
  color: #000;
}


.ok1111 {
  margin-top: 14.87vh;
  margin-left: 42%;
  padding: 8px 20px;
  background-color: #4A5C79;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}

.ok1111:hover {
  background-color: #3e4e68; 
}


.ruk4 {
  cursor: pointer;
}








.bukv1{
    position: absolute;
    width: 15.69vw;
    margin-top: 277%;
    margin-left: 6%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}

@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}


.bukv2{
    position: absolute;
    width: 8.40vw;
    margin-top: 274%;
    margin-left: 29%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv3{
    position: absolute;
    width: 13.89vw;
    margin-top: 279%;
    margin-left: 40%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv4{
    position: absolute;
    width:  9.24vw;
    margin-top: 276%;
    margin-left: 58%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv5{
    position: absolute;
    width:  13.47vw;
    margin-top: 278%;
    margin-left: 71%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}

.bukv6{
    position: absolute;
    width:  12.20vw;
    margin-top: 274%;
    margin-left: 87%;
    animation: blink 2s infinite both;
    transform: scale(1.4);
}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.2;}
  100% {opacity: 1;}
}


.blue{
    position: absolute;
    width: 76.04vw;
    margin-top: 320%;
    margin-left: 0%;
    transform: scale(2.68);
}

.white{
    position: absolute;
    width: 60.00vw;
    margin-top: 262%;
    margin-left: 26%;
    
}
.white-container {
    position: relative;
    width: 60vw; 
    top: 160vw;
    margin-left: 5%;
    box-sizing: border-box;
   
}
.white {
    width: 100%;
    height: auto; 
    transform: scale(1.38);
    
}

.pe{
    margin-top: 308%;
    font-family: "Inter-regular";
    font-size: 1.67vw;
    position: absolute;
    margin-left: 38%;
    width: 25%;
    color: #FFFFFF;
    transform: scale(2);
}


.bukva2{
    position: absolute;
    width: 5.63vw;
    margin-top: 350%;
    margin-left: 15%;
    filter: invert(100%);
    transform: scale(3);
}

.bukva3{
    position: absolute;
    width: 4.63vw;
    margin-top: 350%;
    margin-left: 46.4%;
    filter: invert(100%);
    transform: scale(3);
}

.bukva4{
    position: absolute;
    width: 5.23vw;
    margin-top: 350%;
    margin-left: 80%;
    filter: invert(100%);
    transform: scale(3);
}



 .bukva2, .bukva3, .bukva4 {
    cursor: pointer; 
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

 .bukva2:active, .bukva3:active, .bukva4:active {
    transform: scale(1.1); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    
}












.rec{
    position: absolute;
    width: 100vw;
    margin-top: 371%;
}

.door5{
    position: absolute;
    margin-top: 373.3%;
    margin-left: 65%;
    width: 23.96vw;
   
}

.ruk5{
position: absolute;
margin-top: 394.2%;
margin-left: 66%;
width: 3.40vw;

}

.rec2{
    position: absolute;
    width: 100vw;
    margin-top: 421%;
}

.podv{
    position: absolute;
    width: 42.36vw;
    margin-top: 379%;
    margin-left: 2%;
}

.tab{
    position: absolute;
    width: 6.74vw;
    margin-top: 394%;
    margin-left: 74.4%;
    animation: wobble-hor-top 2s ease infinite;
}

@keyframes wobble-hor-top {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-5px) rotate(6deg);}
  30% {transform: translateX(5px) rotate(-6deg);}
  45% {transform: translateX(-5px) rotate(3.6deg);}
  60% {transform: translateX(5px) rotate(-2.4deg);}
  75% {transform: translateX(-5px) rotate(1.2deg);}
}




.cubiki{
position: absolute;
width: 50vw;
height: 10vw;
margin-top: 130vw;
margin-left: 30vw;
}

.cubiki img{
position:  absolute;
width: 4vw;
}


.draggable {
  position: absolute;
  cursor: grab;
}










}