styles.css

/* you may have already noticed that comments look different in CSS */

/* 
but they are still always multi-line 
now its time to make your website look nice 

you can collect fonts and icons to add to your site using google fonts

go here --> https://fonts.google.com/

once you find fonts you like, you can get an embed code and add it to 
the head of your HTML file.
*/

/* you can change the style of any elemenet like this */

body {
    background-color: #f0f0f0; /* changes the background color of the page */
    font-family: Arial, sans-serif; /* changes the font of all text on the page */
    margin: 20px; /* adds space around the content of the page */
}

/* it applies to any element of that type, AND anything inside it. */


/* CSS has things called classes and IDs to help you style specific elements. for example, */

.cool-button {
    background-color: #4CAF50; /* green background */
    color: white; /* white text */
    padding: 10px 20px; /* space inside the button */
    border: none; /* no border */
    border-radius: 5px; /* rounded corners */
    cursor: pointer; /* changes cursor on hover */
}

/* an ID is unique to one element */

#main-header {
    font-size: 36px; /* larger text */
    color: #333; /* dark gray color */
    text-align: center; /* center the text */
    margin-bottom: 20px; /* space below the header */
}

/* try adding a class and an ID to elements in your HTML file and see how it changes their appearance! */

/* you can also style elements based on their state, like when a user hovers over a button */

.cool-button:hover {
    background-color: #45a049; /* darker green on hover */
}

/* there are many more CSS properties you can use to style your website.
   try reading the docs to find more! */