import { Link } from 'react-router-dom';

export default function NotFound() {
  return (
    <div className="container page center" style={{ paddingTop: 72 }}>
      <div
        style={{
          fontSize: 'clamp(4.5rem, 3rem + 8vw, 8rem)',
          fontWeight: 900,
          lineHeight: 1,
          letterSpacing: '-0.04em',
          background: 'var(--grad-brand)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent',
        }}
      >
        404
      </div>
      <h2 className="mt-2">This page wandered off</h2>
      <p className="muted" style={{ maxWidth: 420, margin: '0 auto 8px' }}>
        The page you're looking for doesn't exist or may have been moved.
      </p>
      <div className="row mt-3 wrap" style={{ justifyContent: 'center' }}>
        <Link to="/" className="btn btn-lg">Back home</Link>
        <Link to="/vendors" className="btn btn-lg btn-ghost">Browse exams</Link>
      </div>
    </div>
  );
}
