CSS Refactor - Fix Inconsistent Class and Variable Naming

[anna-dahlberg]

Description

The CSS files currently use inconsistent naming conventions. Some classes use camelCase (like theCard, theCardFront) while others use kebab-case (like advice-section, advice-button). We should standardize to use kebab-case throughout for better CSS practices.

Acceptance Criteria

• Convert all camelCase class names to kebab-case
• Update corresponding HTML class references
• Ensure all functionality remains intact
• Maintain consistent naming pattern across all CSS files

Technical Details

CSS best practice is to use kebab-case for class names. Examples:

• theCard → the-card
• theCardFront → the-card-front
• theCardBack → the-card-back
• mainContainer → main-container

Files to Modify

• styles.css - Update class names and selectors
• luckyNumberStyles.css - Update class names and selectors
• index.html - Update class attributes
• luckyNumber.html - Update class attributes

Resources/References

• CSS Naming Conventions Guide

Estimated Difficulty: Beginner Friendly ⭐

Additional Notes

This is a great first issue because it involves finding and replacing text across multiple files while learning CSS best practices. Test thoroughly to ensure the card flip animation still works!