html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width:  2000%;
    height: 2000%;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='200%' height='200%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(8) rotate(45)'><rect x='0' y='0' width='200%' height='200%' fill='hsla(197, 88%, 90%, 1)'/><path d='M0 0h10v10H0z'  stroke-width='1' stroke='none' fill='hsla(197, 87%, 85%, 1)'/><path d='M10 10h10v10H10z'  stroke-width='1' stroke='none' fill='hsla(349, 64%, 90%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(-168,-240)' fill='url(%23a)'/></svg>");
    animation: slideBg 4000s linear infinite;
    opacity: 0.9;

}

@keyframes slideBg {
    0% {
        transform: translate(0, 0); /* Start position */
    }
    50% {
        transform: translate(-50%, -50%); /* End position */
    }
}

.canvas_container {
    position: relative; /* Position relative to the container */
    z-index: 1; /* Ensure canvas appears above background */
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
}

canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 15px;
}