body {
        padding: 50px;
        margin: 0;
    }

    .container {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        height: 300px;
        width: 300px;
    }

    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0px 2px rgb(0 0 0 / 7%), 0 5px 6px rgb(0 0 0 / 16%);
        background-color: #ffe186;
        width: 100px;
        height: 100px;
        border: 2px solid #333;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        user-select: none;
        color: #333;
        transition: all 0.3s ease-in-out;
    }

    .box:hover {
        background-color: #eee;
    }

    .box:active {
        transform: scale(0.95);
    }