/* 1. Global Styles (Element Selector: body) */
body {
    background-color: #ffe0f0; /* Soft pink background for the whole page */
    color: #333333; /* Dark gray text color */
    font-family: 'Courier New', monospace; /* Fun, retro font */
    padding: 20px; /* Space around the edge of the content */
}

/* 2. Styling Headings (Element Selector: h1) */
h1 {
    color: #a3004d; /* Deep magenta color */
    border-bottom: 2px dashed #a3004d; /* Dashed line under the main heading */
    padding-bottom: 10px;
}

/* 3. A Specific Container (ID Selector: #main-content) */
/* IDs are used for unique, major sections */
#main-content {
    max-width: 800px; /* Limits the width of the content area */
    margin: 40px auto; /* Centers the content block horizontally */
    background-color: white; /* White box for the content */
    padding: 30px;
    border: 5px solid #ff99cc; /* Pink border */
}

/* 4. A Reusable Text Style (Class Selector: .highlight) */
/* Classes can be applied to many different elements */
.highlight {
    font-weight: bold;
    color: #0077b6; /* Bright blue color */
    background-color: #e0faff; /* Very light blue background for emphasis */
    padding: 2px 5px;
}

/* 5. Styling the Links (Element Selector: a) */
a {
    color: #0077b6;
    text-decoration: none; /* Removes the default underline */
}

a:hover {
    text-decoration: underline; /* Adds underline back when mouse hovers */
    color: #ff99cc;
}