.content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    gap: 1em;
}

.grid-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pizza-img {
    max-width: 100%;
    animation: rotationY 7s linear infinite;
}

.cool-img {
    max-width: 100%;
    animation: rotationZ 20s linear infinite;
}

.table {
    width: 100%;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #101010;
}

.main {
    width: 100%;
    height: 100%;
}

* {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    animation: rainbow 10s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbow {

    100%,
    0% {
        color: rgb(255, 0, 0);
    }

    8% {
        color: rgb(255, 127, 0);
    }

    16% {
        color: rgb(255, 255, 0);
    }

    25% {
        color: rgb(127, 255, 0);
    }

    33% {
        color: rgb(0, 255, 0);
    }

    41% {
        color: rgb(0, 255, 127);
    }

    50% {
        color: rgb(0, 255, 255);
    }

    58% {
        color: rgb(0, 127, 255);
    }

    66% {
        color: rgb(0, 0, 255);
    }

    75% {
        color: rgb(127, 0, 255);
    }

    83% {
        color: rgb(255, 0, 255);
    }

    91% {
        color: rgb(255, 0, 127);
    }
}

@keyframes rotationY {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes rotationZ {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}