/* styles.css located in the 'css' subfolder */


body {

    margin: 0;

    font-family: Arial, sans-serif;

    color: #333;

    background-color: #f9f9f9;

}


header {

    background-color: #007acc;

    padding: 20px;

    text-align: center;

}


.logo {

    max-width: 200px;

}


.introduction, .skills, .social-media {

    padding: 40px 20px;

    text-align: center;

}


.introduction h1 {

    font-size: 2.5em;

    margin-bottom: 20px;

}


.introduction p {

    font-size: 1.2em;

    max-width: 800px;

    margin: 0 auto;

}


.skills h2, .social-media h2 {

    font-size: 2em;

    margin-bottom: 20px;

}


.skills ul {

    list-style-type: none;

    padding: 0;

}


.skills li {

    font-size: 1.2em;

    margin: 10px 0;

}


.social-media a {

    margin: 0 10px;

    display: inline-block;

}


.social-media img {

    width: 40px;

    height: 40px;

}


footer {

    background-color: #007acc;

    color: #fff;

    padding: 10px;

    text-align: center;

}


footer a {

    color: #fff;

    text-decoration: underline;

}


/* Responsive Design */

@media (max-width: 768px) {

    .introduction h1 {

        font-size: 2em;

    }


    .introduction p, .skills li {

        font-size: 1em;

    }


    .skills h2, .social-media h2 {

        font-size: 1.5em;

    }

}