:root {
    --sushi-table-background: url("./images/natural-wooden-background.jpg");
    --sushi-table-size: 600px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #fff;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sushi-table {
    width: var(--sushi-table-size);
    height: var(--sushi-table-size);
    border: 8px solid black;
    background-image: var(--sushi-table-background);
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    position: relative;
    transform-style: preserve-3d;
}
.sushi-dish {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    position: relative;
    /* border: 3px solid black; */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 5px #ddd;
    box-shadow: 0px 8px 0px rgba(0, 0, 0, 0.1);
}

/* DINNER GRID DISH*/
.sushi-avocado {
    border-top: solid 6px #ccc;
    border-bottom: solid 3px #ccc;
    background: url("./images/sushi.svg") no-repeat center;
    background-size: cover;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

/*DINNERS GRID ITEMS*/

.one {
    grid-column: 4 / span 3;
    grid-row: 4 / span 3;
    position: relative;
}

.two {
    grid-row: 2 / span 2;
    grid-column: 4 / span 3;
    position: relative;
}

.three {
    grid-column: 2 / span 2;
    grid-row: 4 / span 3;
    position: relative;
}

.four {
    grid-column: 7 / span 2;
    grid-row: 4 / span 3;
    position: relative;
}

.five {
    grid-column: 4 / span 3;
    grid-row: 7 / span 2;
    position: relative;
}

.six {
    grid-column: 2 / span 3;
    grid-row: 2 / span 3;
    position: relative;
}

.seven {
    grid-column: 6 / span 3;
    grid-row: 2 / span 3;
    position: relative;
}
.eight {
    grid-column: 2 / span 3;
    grid-row: 6 / span 3;
    position: relative;
}
.nine {
    grid-column: 6 / span 3;
    grid-row: 6 / span 3;
    position: relative;
}

/* Sushi Stickys */

.stick {
    background-color: #851400;
    background-image: url("./images/wood-pattern.png");
    border: 1px solid black;
    position: absolute;
    width: 20px;
    height: 600px;
    top: -40px;
    border-radius: 0 0 70% 70%;
}

.stick-one {
    left: -0px;
    transform: rotate(-15deg);
}

.stick-two {
    transform: rotate(5deg);
    left: -15px;
}

/* Animations CSS */

.strobe {
    -webkit-animation: strobe 1s infinite;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    animation: strobe 1s infinite;
}

@-webkit-keyframes strobe {
    0% {
        -webkit-transform: skew(4deg, 0deg) scaleX(1);
    }
    10% {
        -webkit-transform: skew(1deg, 0deg) scaleY(0.9);
    }
    50% {
        -webkit-transform: skew(-4deg, 0deg) scaleX(1);
    }
    60% {
        -webkit-transform: skew(-1deg, 0deg) scaleY(0.9);
    }
    100% {
        -webkit-transform: skew(4deg, 0deg) scaleX(1);
    }
}

@keyframes strobe {
    0% {
        transform: skew(4deg, 0deg) scaleX(1);
    }
    10% {
        transform: skew(1deg, 0deg) scaleY(0.9);
    }
    50% {
        transform: skew(-4deg, 0deg) scaleX(1);
    }
    60% {
        transform: skew(-1deg, 0deg) scaleY(0.9);
    }
    100% {
        transform: skew(4deg, 0deg) scaleX(1);
    }
}