* {
    box-sizing: border-box;
}

body {
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    /* Make it 150% of the screen to cover corners during rotation */
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    z-index: -1; /* Keep it behind your content */

    background-image: url("tile.png");
    background-size: 200px 200px;
    background-repeat: repeat;

    /* Apply the animation here */
    animation: animatedBackground 30s linear infinite;
}

#body {
    padding: 10px;
    height: 100vh;
    text-align: center;
    align-items: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

@keyframes animatedBackground {
    from {
        /* Start at 0 rotation and 0 position */
        transform: rotate(0deg);
        background-position: 0 0;
    }
    to {
        /* Rotate a full 360 and shift background-position */
        /* Note: Using 200px (matching your background-size) ensures a seamless loop */
        transform: rotate(360deg);
        background-position: 200px 200px;
    }
}

table {
    background-color: lightcyan;
    text-align: center;

    position: absolute;
    width: fit-content;
}

#title {
    width: 800px;
    margin-bottom: 5px;
}

@font-face {
    font-family: "CS";
    src: url("comicz.ttf");
}

.join {
    font-size: 30px;
    font-family: "CS";
    text-decoration: underline;
    margin-bottom: 10px;
    color: hsl(0, 100%, 50%);
    background-color: lightcyan;
    padding-left: 5px;
    padding-right: 5px;
    animation: hue-rotate 1s linear infinite;
}

@keyframes hue-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
    gap: 10px;
}

.table {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@keyframes bounce1 {
    0% {
        top: 0;
    }
    48% {
    }
    50% {
        top: calc(100% - 350px);
    }
    52% {
    }
    100% {
        top: 0;
    }
}

@keyframes toRight1 {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 320px);
    }
}

@keyframes bounce2 {
    0% {
        top: 0;
    }
    48% {
    }
    50% {
        top: calc(100% - 220px);
    }
    52% {
    }
    100% {
        top: 0;
    }
}

@keyframes toRight2 {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 200px);
    }
}

#table1 {
    animation:
        toRight1 linear 7s infinite alternate,
        bounce1 linear 10s infinite alternate;
    animation-delay: -6s;
}

#table2 {
    animation:
        toRight2 linear 7s infinite alternate,
        bounce2 linear 10s infinite alternate;
    animation-delay: -2s;
}

#falling {
    position: absolute;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}