body{
margin:0;
}

#pared1,#pared2,#pared3,#pared4,#pared5,#pared6{

border:solid;
width:min(100vw,100vh);
aspect-ratio:1/1;
margin:auto;
background-size:cover;
position:relative;

}

#pared1{background-image:url("img/fons 1.jpg");}
#pared2{background-image:url("img/fons 2.jpg"); display:none;}
#pared3{background-image:url("img/fons 3.jpg"); display:none;}
#pared4{background-image:url("img/fons 4.jpg"); display:none;}
#pared5{background-image:url("img/fons 5.jpg"); display:none;}
#pared6{background-image:url("img/fons 6.jpg"); display:none;}

.bt_right{
background-image:url(img/right.svg);
background-size:cover;
top:45%;
right:1%;
width:5%;
height:5%;
position:absolute;
}

.bt_left{
background-image:url(img/left.svg);
background-size:cover;
top:45%;
left:1%;
width:5%;
height:5%;
position:absolute;
}

.bt_up{
background-image:url(img/up.svg);
background-size:cover;
top:1%;
left:47%;
width:5%;
height:5%;
position:absolute;
}

.bt_down{
background-image:url(img/down.svg);
background-size:cover;
bottom:1%;
left:47%;
width:5%;
height:5%;
position:absolute;
}

.puzzle-grid{

display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);

width:300px;
height:300px;

position:absolute;
top:32%;
left:30%;

}

.puzzle-grid img{
width:100px;
height:100px;
cursor:pointer;
}

.puerta{

position:absolute;
width:30%;
left:35%;
top:35%;

}