*{
    box-sizing: border-box;
}

body{
    margin:0;
}


.container{
    background-color: rgb(251, 184, 218);
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
h1{
    position:absolute;
    top: 20px;
    /* left:600px; */
    font-family: "digibop", sans-serif;
    font-weight: 400;
    font-style: normal;
    left: 0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: deeppink;
}


.puzzle{
    background-color: rgb(255, 255, 233);
    width: 500px;
    height: 500px;
    display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px; /* optional spacing */
  padding: 0;
  border:3px solid rgb(55, 2, 2);
}
.peace1, .peace2, .peace3, .peace4, .peace5, .peace6, .peace7, .peace8, .peace9, .peace10, .peace13, .peace14, .peace15, .peace16, .peace17, .peace18{
    width: 100%;
  height: 100%;

}
.draggable{
    cursor:grab;
}