@ramiadi
Posted
You can reduce repetition by using more general rules. For example, instead of specifying font sizes separately for p and body, you can use e.g. font-size: 15px on body.
Your use of media queries works fine for different screen sizes. It is good that you have taken into account larger screens in addition to small screens.
You have already started using CSS variables, which is a good practice.
Instead of using lots of padding and margin adjustments for placement, you can use display flex or grid to structure the layout better. This will give you better control over how elements are placed, especially on different screen sizes.
With these adjustments, your code will be both more readable and optimized, but it is already easy to see and understand your code. Good job!