body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.image-container {
position: relative;
width: 100vw; 
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

#target-image {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
image-rendering: pixelate;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 50%;
height: 100%;
width: 50%;
background-image: repeating-linear-gradient(45deg, #000 0, #000 10px, transparent 10px, transparent 20px),
                  repeating-linear-gradient(-45deg, #000 0, #000 10px, transparent 10px, transparent 20px);
background-size: 20px 20px;
pointer-events: none;
animation: colorChange 10s infinite;
}

@keyframes colorChange {
0% { background-color: #ffcc00; }
25% { background-color: #ff9900; }
50% { background-color: #ff6600; }
75% { background-color: #ff3300; }
100% { background-color: #ffcc00; }
}