body{
    background-color: #000000;
    background-image: linear-gradient(90deg, #000000 0%, #121c3f 100%);
    height: 100vh;
    color: whitesmoke;
}
.principal__container{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   flex-wrap: wrap;
   margin-top: 70px;
}

.puzzle__table{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 470px;
}
.puzzle__pieces{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 470px;
}

.puzzle__site{
    width: 150px;
    height: 150px;
    border: 1px solid lightgrey;
}
.puzzle__pieces{
    gap: 5px;
}
.pieces{
    width: 150px;
    height: 150px;
}

.dragging{
    opacity: 0.3;
}

.title{
    font-size: 40px;
    text-align: center;
}
.photo{
    background-size: 150px 150px;
}
.photo12{
    background-image: url("photos/12.jpg");
}
.photo11{
    background-image: url("photos/11.jpg");
}
.photo10{
    background-image: url("photos/10.jpg");
}
.photo9{
    background-image: url("photos/9.jpg");
}
.photo8{
    background-image: url("photos/8.jpg");
}
.photo7{
    background-image: url("photos/7.jpg");
}
.photo6{
    background-image: url("photos/6.jpg");
}
.photo5{
    background-image: url("photos/5.jpg");
}
.photo4{
    background-image: url("photos/4.jpg");
}
.photo3{
    background-image: url("photos/3.jpg");
}
.photo2{
    background-image: url("photos/2.jpg");
}
.photo1{
    background-image: url("photos/1.jpg");
}

footer{
    margin-top: 80px;
    text-align: center;
}

@media (max-width: 1000px){
    .puzzle__site{
        width: 120px;
        height: 120px;
    }
    .pieces{
        width: 120px;
        height: 120px;
    }
    .puzzle__table{
        width: 380px;
    }
    .puzzle__pieces{
        width: 380px;
    }
    .principal__container{
        gap: 10px;
    }
    .photo{
        background-size: 120px 120px;
    }
}
@media (max-width: 800px){
    .puzzle__site{
        width: 90px;
        height: 90px;
    }
    .pieces{
        width: 90px;
        height: 90px;
    }
    .puzzle__table{
        width: 300px;
    }
    .puzzle__pieces{
        width: 300px;
    }
    .photo{
        background-size: 90px 90px;
    }
}
@media (max-width: 630px){
    .puzzle__site{
        width: 60px;
        height: 60px;
    }
    .pieces{
        width: 60px;
        height: 60px;
    }
    .puzzle__table{
        width: 210px;
    }
    .puzzle__pieces{
        width: 210px;
    }
    .photo{
        background-size: 60px 60px;
    }
}
@media (max-width: 446px){
    .principal__container{
        gap: 30px;
        margin-top: 40px;
    }
    footer{
        margin-top: 40px;
    }
}