Refactor CSS for Enhanced Structure, Maintainability, and Consistency (#1335)

[panderonak]

…design patterns.

Pull Requests Requirements

• The PR title includes a brief description of the work done, including the
  Issue number if applicable.
• The PR includes a video showing the changes for the work done.
• The PR title follows conventional commit label standards.
• The changes confirm to the OpenElis Global x3 Styleguide and design
  documentation.
• The changes include tests or are validated by existing tests.
• I have read and agree to the Contributing Guidelines of this project.

Summary

This PR focuses on refactoring Style.css to enhance maintainability, readability, and adherence to project design standards. The main improvements include:

• Consolidation of repetitive styles for better efficiency.
• Introduction and application of CSS variables for consistent theming.
• Simplification and organisation of class definitions to improve clarity.

Screenshots

[Add relevant screenshots here if applicable]

Related Issue

Fixes #1335
#1335

Additional Notes

• This refactoring primarily focuses on improving the codebase without altering existing functionality.
• Includes updates to ensure compatibility with all supported browsers.