<script>
function createFloatingSquares() {
const container = document.getElementById('floatingSquares');
for (let i = 0; i < 5; i++) {
const square = document.createElement('div');
square.className = 'floating-square';
const size = Math.random() * 40 + 20;
square.style.width = `${size}px`;
square.style.height = `${size}px`;
square.style.left = `${Math.random() * 100}%`;
square.style.top = `${Math.random() * 100}%`;
square.style.animationDelay = `${Math.random() * 5}s`;
square.style.animationDuration = `${Math.random() * 5 + 5}s`;
container.appendChild(square);
}
}
document.addEventListener('DOMContentLoaded', createFloatingSquares);
</script>