import React from 'react';

function ErrorPage() {
  return (
    <div
      style={{
        textAlign: 'center',
        alignItems: 'center',
        backgroundColor: '#f7c033',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundImage: 'linear-gradient(to bottom right, hsl(43, 92.50%, 58.40%), yellow)',
      }}
    >
      <h1
        style={{
          fontSize: '100px',
          fontWeight: 'bold',
          color: '#1b1b1b',
          position: 'relative', 
          animation: 'moveLeftRight 3s infinite ease-in-out',
        }}
      >
        404
      </h1>
      <p style={{ fontSize: '20px', color: '#1b1b1b' }}>Oops! Website not found!</p>
      <style>
        {`
          @keyframes moveLeftRight {
            0% {
              transform: translateX(-300px); /* Start from the left */
            }
            50% {
              transform: translateX(0); /* Center position */
            }
            100% {
              transform: translateX(300px); /* Move to the right */
            }
          }
        `}
      </style>
    </div>
  );
}

export default ErrorPage;