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);

    grid-row: 1;
    grid-column: 1;
}

.wall-left {
    background: white;
    border: 3px solid black;

    min-width: calc(4.5vw - 5px);
    min-height: calc(4.5vw - 5px);

    transform: rotateY(90deg) translateX(2.25vw) translateZ(2.25vw);
}

.wall-right {
    background: white;
    border: 3px solid black;

    min-width: calc(4.5vw - 5px);
    min-height: calc(4.5vw - 5px);

    transform: rotateX(90deg) translateZ(-2.25vw) translateY(-2.25vw);
}

.collision{
    transform-style: preserve-3d;
}

.card {
    background: white;
    border: 3px solid black;

    min-width: calc(4.5vw - 5px);
    min-height: calc(4.5vw - 5px);

    transform-style: preserve-3d;
    transition: transform 2s, background-color 0s 0.3s;
}

.collision:hover .card {
    transition: transform 0.3s, background-color 0s 0.1s;
    transform: rotateY(-180deg);
}

.card:hover  {
    transition: transform 0.3s, background-color 0s 0.1s;
    transform: rotateY(-180deg);
}

.end {
    grid-row: 10;
}

.start {
    grid-column: 1;
}

.no-hover{
    pointer-events: none;
}

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

.collision:nth-child(10n + 1):hover .card, .card:nth-child(10n + 1):hover, .wall-left:nth-child(10n + 1) {
    background: #e6fffb;
}


.collision:nth-child(10n + 2):hover .card, .card:nth-child(10n + 2):hover, .wall-left:nth-child(10n + 2) {
    background: #b5f5ec;
}

.collision:nth-child(10n + 3):hover .card, .card:nth-child(10n + 3):hover, .wall-left:nth-child(10n + 3){
    background: #87e8de;
}

.collision:nth-child(10n + 4):hover .card, .card:nth-child(10n + 4):hover, .wall-left:nth-child(10n + 4){
    background: #5cdbd3;
}

.collision:nth-child(10n + 5):hover .card, .card:nth-child(10n + 5):hover, .wall-left:nth-child(10n + 5){
    background: #36cfc9;
}

.collision:nth-child(10n + 6):hover .card, .card:nth-child(10n + 6):hover, .wall-left:nth-child(10n + 6){
    background: #13c2c2;
}

.collision:nth-child(10n + 7):hover .card, .card:nth-child(10n + 7):hover, .wall-left:nth-child(10n + 7){
    background: #08979c;
}

.collision:nth-child(10n + 8):hover .card, .card:nth-child(10n + 8):hover, .wall-left:nth-child(10n + 8){
    background: #006d75;
}

.collision:nth-child(10n + 9):hover .card, .card:nth-child(10n + 9):hover, .wall-left:nth-child(10n + 9){
    background: #00474f;
}

.collision:nth-child(10n + 10):hover .card, .card:nth-child(10n + 10):hover, .wall-left:nth-child(10n + 10){
    background: #002329;
}

.collision:nth-child(10n + 1) .card, .wall-right:nth-child(10n + 1) {
    background: #ffffff;
}


.collision:nth-child(10n + 2) .card, .wall-right:nth-child(10n + 2) {
    background: #fafafa;
}

.collision:nth-child(10n + 3) .card, .wall-right:nth-child(10n + 3) {
    background: #f5f5f5;
}

.collision:nth-child(10n + 4) .card, .wall-right:nth-child(10n + 4) {
    background: #f0f0f0;
}

.collision:nth-child(10n + 5) .card, .wall-right:nth-child(10n + 5) {
    background: #d9d9d9;
}

.collision:nth-child(10n + 6) .card, .wall-right:nth-child(10n + 6) {
    background: #bfbfbf;
}

.collision:nth-child(10n + 7) .card, .wall-right:nth-child(10n + 7) {
    background: #8c8c8c;
}

.collision:nth-child(10n + 8) .card, .wall-right:nth-child(10n + 8) {
    background: #595959;
}

.collision:nth-child(10n + 9) .card, .wall-right:nth-child(10n + 9) {
    background: #434343;
}

.collision:nth-child(10n + 10) .card, .wall-right:nth-child(10n + 10) {
    background: #262626;
}