Fix Positioning Units & Animation Redundancies in CSS

[sampathvenur]

Issue Description:

The current CSS implementation has some inconsistencies affecting responsiveness and maintainability:

Issues Identified:

1. Inconsistent Positioning Units:

   • The code uses pc (pica) units for positioning, which is uncommon and may cause unexpected behavior across different screen sizes.
   • Suggestion: Replace pc units with px, vw, or vh for better responsiveness.

2. Redundant Animation Duration in @keyframes arrowMove:

   • animation-duration: 5s; is declared multiple times within keyframes, which is unnecessary.
   • Suggestion: Remove redundant animation-duration values from @keyframes arrowMove.

3. Incorrect border-radius in .ball:

   • .ball has border-radius: 200%;, which is excessive. The maximum should be 50% for a perfect circle.
   • Suggestion: Change border-radius: 50%;.

4. Unused Property in .square:

   • top: -0pc; has no effect and can be removed.
   • Suggestion: Remove this redundant property.

5. Potential UX Issue with Hidden Scrollbar:

   • ::-webkit-scrollbar { width: 0; height: 0; } completely hides the scrollbar, making navigation difficult on long pages.
   • Suggestion: Limit this rule to specific containers instead of applying it globally to body.

Proposed Fixes:

• Replace pc units with px, vw, or vh for better layout consistency.
• Remove unnecessary animation-duration from keyframes.
• Set .ball's border-radius to 50% for a proper circular shape.
• Remove the unused top: -0pc; property from .square.
• Adjust scrollbar styling to improve usability while maintaining a clean look.