Welcome back to my Journey of Learning CSS Variables by building a City Skyline. Here are the steps I took today:

• Added sky as a second class to the .background-buildings element. I am going to make a background for the skyline.

• Gave the sky class a radial-gradient. Used #ffcf33 from 0% to 20%, #ffff66 at 21%, and #bbeeff at 100%. This added circular gradient to the background that will be the sun. P.S: Its so beautiful.

• At the top of the sky gradient color list, I added a circle closest-corner at 15% 15%. This moved the start of the gradient to 15% from the top and left. It made it end at the closest-corner and it will maintain a circle shape.

These are some keywords built into gradients to describe how it behaves.

• A media query can be used to change styles based on certain conditions, and they look like this:

 @media (condition) {

                                        }

Added an empty media query at the bottom of the stylesheet with a condition of max-width: 1000px. Styles added in here will take effect when the document size is 1000px wide or less.

• Copied and pasted the whole sky class along with all of its properties and values into the media query. I am going to make another color scheme for the skyline that changes it from day to night.

• In the sky class of the media query, changed the two #ffcf33 color values to #ccc, the #ffff66 to #445, and the #bbeeff to #223. Then you can resize your window to see the background change colors.

• Added a :root selector to the top of the media query. Then redefined all four of the --building-color variables to use the value #000 there.

• Lastly, in the :root selector of the media query, all four of the --window-color variables where redefined to use #777.

• Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. The project looks great! Click here to view my city skyline What do you think?