CSS Improvement - Convert Pixel Units to rem

[anna-dahlberg]

Description

The project currently mixes px and rem units. As noted in the todo file, we should standardize to use rem units for better accessibility and responsive design. This helps users who have adjusted their browser's font size.

Acceptance Criteria

• Convert all px units to rem units in both CSS files
• Maintain visual consistency (elements should look the same)
• Keep the existing html { font-size: 10px; } for easy rem calculations
• Test on different screen sizes to ensure responsiveness

Technical Details

With html { font-size: 10px; }, the conversion is straightforward:

• 10px = 1rem
• 16px = 1.6rem
• 32px = 3.2rem

Files to Modify

• styles.css - Convert px to rem values
• luckyNumberStyles.css - Convert px to rem values

Resources/References

• Why you should use rem units
• CSS Units Guide

Estimated Difficulty: Beginner Friendly ⭐

Additional Notes

This is perfect for beginners to learn about CSS units and accessibility. The math is simple with the 10px base font size!