body  {
    margin: 2rem 3rem;
    background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.puzzle {
    width: 100%;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-bottom: 3rem;
}

.puzzle:hover {
    transform: scale(1.05);
}

@media (min-width: 750px ) and (max-width: 900px) { 
    .puzzle {
        width: 20rem;
        height: 15rem;
    }
}

@media (min-width: 900px) and (max-width: 1300px) { 
    .puzzle {
        width: 25rem;
        height: 20rem;
    }
}

@media (min-width: 1300px) { 
    body {
         margin: 5rem 10rem;
    }
    .puzzle {
        width: 30rem;
        height: 20rem;
    }
}