/* Reset default margin and padding for all elements */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

p {
    margin-bottom: 16px;
}

.container { 
  width: 90%;
  max-width: 750px; /* Adjust this value as needed */
  margin: 0 auto;   /* Center align the container */
}

section {
    margin: 30px 0;
}

/* Set a black-and-white color scheme */
body {
    background-color: #fff;
    color: #000;
    font-family: 'Arial', sans-serif;
    line-height: 1.6; /* Generous line height for easier reading */
}

/* Horizontal header with center-aligned content */
header {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    font-size: 32px;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

nav a:hover {
    text-decoration: underline;
}

/* Style the About section */
#about {
    text-align: center;
    padding: 20px 0;
    background-color: #ededed;
}

.about-content {
    margin-top: 30px; /* Add visual space between header and content */
}

.about-content img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px; /* Add visual space below the picture */
}

/* Style the Skills section */
.skill {
    margin-bottom: 20px;
}

/* Create the progress bar */
.progress-bar {
    background-color: #ddd;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    background-color: #000;
    height: 100%;
    color: #fff;
    line-height: 20px;
    text-align: center;
}

/* Style the footer */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.social-icons a {
    color: #fff;
    font-size: 24px;
    margin-right: 10px;
}

/* Media Query for Responsive Layout */
@media (max-width: 768px) {
    header {
        padding: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    nav li {
        display: block;
        margin: 10px 0;
    }

    .about-content img {
        width: 100px;
        height: 100px;
    }
}