body {
    clear: both;
    overflow: hidden;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    height: 100vh; /* Set the body to take up the full height of the viewport */
    text-align: center;
    overflow-y: scroll;
}

@font-face {
    font-family: publicPixel;
    src: url(font/PublicPixel.ttf);
}
button {
    width: 100px;
    height: 100px;
}
.puzzles {
    display: flex;
    gap: 10px;
    text-align: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.puzzle-container {
    box-sizing: border-box;
    position:relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    filter: grayscale(0%);
}
.puzzle-container :hover {
    filter:grayscale(100%);
}
img {
    object-fit: cover;
    width: 120%;
    height: 120%;
}

h1 {
    font-family: publicPixel;
}
p {
    font-family: publicPixel;
}

canvas {
    box-sizing: unset;
    image-rendering: pixelated;
    background-color: #ffff;
}