/* Reset some default styles */
body, h1, h2, p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Overall body style */
body {
    background-color: #f8f9fa; /* Light background */
    color: #333; /* Dark text color */
    line-height: 1.6;
}

/* Container for the content */
.container {
    max-width: 800px; /* Limit the max width */
    margin: 20px auto; /* Center align */
    padding: 20px; /* Add some padding */
    background: #fff; /* White background for the content */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Header styles */
header {
    text-align: center; /* Center the header text */
    margin-bottom: 30px; /* Space below the header */
}

header h1 {
    color: #6a1b9a; /* Purple color for the title */
    font-size: 2.5em; /* Increase font size */
}

header p {
    font-size: 1.2em; /* Slightly larger font size for the subtitle */
    color: #555; /* Gray color for subtitle */
}

/* Navigation styles */
nav {
    margin-top: 20px; /* Space above the navigation */
}

nav h2 {
    color: #6a1b9a; /* Same purple color for the subtitle */
    margin-bottom: 15px; /* Space below the subtitle */
}

/* Unordered list styles */
ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

/* List item styles */
li {
    margin-bottom: 10px; /* Space between items */
}

/* Button styles */
.button {
    display: inline-block; /* Make links behave like buttons */
    padding: 10px 20px; /* Padding inside buttons */
    background: #6a1b9a; /* Button background color */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners for buttons */
    transition: background 0.3s ease; /* Smooth background transition */
}

.button:hover {
    background: #9c27b0; /* Slightly lighter purple on hover */
}