* {
    box-sizing: border-box;
}

:root {
    --box-color: #2a2a2a;
    --big-box-color: #272727;
    --puzzle-color: #121212;
}

@media (max-width: 480px) {
    #full-puzzle {
        width: 250px;
        height: 250px;
    }

    button {
        width: 400px;
    }
}

h1 {
    color: var(--puzzle-color);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(196, 196, 196);

}

#full-puzzle {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    place-items: center;
    width: 600px;
    height: 600px;
    border: solid 4px var(--puzzle-color);
}

.big-box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
}

.big-box:nth-child(3n -1),
.big-box:nth-child(3n - 2) {
    border-right: solid 4px var(--big-box-color);
}

.big-box:nth-child(-n + 6) {
    border-bottom: solid 4px var(--big-box-color);
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 32px;
}

.box:nth-child(3n -1),
.box:nth-child(3n - 2) {
    border-right: solid 2px var(--box-color);
}

.box:nth-child(-n + 6) {
    border-bottom: solid 2px var(--box-color);
}

button {
    width: 600px;
    height: 60px;
    margin-top: 15px;
    background-color: #a3a3a3;
}

button:hover {
    background-color: #484848;
}