I tried to use the DRY Principle with the Buttons but the text color was different.
Would there be a way to inherit the background color as the font color?
I tried to use the DRY Principle with the Buttons but the text color was different.
Would there be a way to inherit the background color as the font color?
I see what you mean with your question. However I think sometimes it's better to not to take things to the limit. It is good that you try to not to repeat the same color multiple times, but this is precisely why you made it a variable, to be able to reuse the actual value in multiple places. And if you change the value, you have to change it only in one place.
background-color can be inherited if you add in the children background-color: inherit. But you can't use the inherited value to assign it to a color property, as far as I can tell.
Hi there! nice job, I've been checking your code and I wanted to give you a few comments where I think the solution could be improved
body { background-color: var(--secondary-color); display: flex; height: 100vh; width: 100%; justify-content: center; align-items: center; flex-flow: column; }
This approach uses flexbox, you tell the container parent (body, in this case) to act as a flexbox, and tell him to render children in a column, and to align them vertically (justify-content) and horizontally (align-items). But in order for it to work properly, you need to fix the parent's height, we choose 100vh in this case since it's the whole height of the viewport. Otherwise vertical alignment does not work.
Then, you can remove your margins.
This will indent your whole document and fix any formatting errors.