import React from 'react';
import { styled, keyframes } from '@mui/system';

const fluidAnimation = keyframes`
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
`;

const Fluid = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #00c9ff, #92fe9d);
  animation: ${fluidAnimation} 10s ease infinite;
  z-index: -1;
`;

const FluidBackground = ({ children }) => {
  return <Fluid>{children}</Fluid>;
};

export default FluidBackground;