body {
    margin: 0;
}

body {
    display: grid;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.object {
    transform-style: preserve-3d;
    place-self: center;
    transform: rotateX(60deg) rotateZ(-45deg);
}

.grid {
    display: grid;
    grid-template-columns: repeat(10, 4.5vw);;
    grid-template-rows: repeat(10, 4.5vw);
}

.ball {
    background: white;
    border: 3px solid black;
    border-radius: 50%;

    min-width: 4vw;
    min-height: 4.5vw;

    transform-style: preserve-3d;
    transform: rotateX(90deg)  rotateY(45deg) scale(95%);

    transition: 3s ease-in-out;
}

.ball:nth-child(10n + 1):hover {
    background: #e6fffb;
}


.ball:nth-child(10n + 2):hover {
    background: #b5f5ec;
}

.ball:nth-child(10n + 3):hover {
    background: #87e8de;
}

.ball:nth-child(10n + 4):hover {
    background: #5cdbd3;
}

.ball:nth-child(10n + 5):hover {
    background: #36cfc9;
}

.ball:nth-child(10n + 6):hover {
    background: #13c2c2;
}

.ball:nth-child(10n + 7):hover {
    background: #08979c;
}

.ball:nth-child(10n + 8):hover {
    background: #006d75;
}

.ball:nth-child(10n + 9):hover {
    background: #00474f;
}

.ball:nth-child(10n + 10):hover {
    background: #002329;
}

.ball:nth-child(10n + 1) {
    background: #ffffff;
}


.ball:nth-child(10n + 2) {
    background: #fafafa;
}

.ball:nth-child(10n + 3) {
    background: #f5f5f5;
}

.ball:nth-child(10n + 4) {
    background: #f0f0f0;
}

.ball:nth-child(10n + 5) {
    background: #d9d9d9;
}

.ball:nth-child(10n + 6) {
    background: #bfbfbf;
}

.ball:nth-child(10n + 7) {
    background: #8c8c8c;
}

.ball:nth-child(10n + 8) {
    background: #595959;
}

.ball:nth-child(10n + 9) {
    background: #434343;
}

.ball:nth-child(10n + 10) {
    background: #262626;
}


.ball:hover {
    transition: 0.3s;
    transform: rotateX(90deg) rotateY(45deg) scale(120%) translateZ(10px);
}