/* This is the CSS from the previous example, now in its own file */
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #F4F4F4;
    color: #333333;
    margin: 0;
    padding: 0;
}
#container {
    width: 90%;
    max-width: 960px;
    margin: 20px auto;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#header {
    padding: 20px 30px;
    border-bottom: 2px solid #E0E0E0;
    text-align: center;
}
#header h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    color: #000000;
    margin: 0 0 5px 0;
}
#header .subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #777777;
    margin: 0;
}
#content-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}
#bio {
    flex: 2;
    min-width: 300px;
    padding: 0 20px;
}
#projects {
    flex: 1;
    min-width: 250px;
    background-color: #F9F9F9;
    border: 1px solid #EAEAEA;
    padding: 15px 20px;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 5px;
    color: #000000;
}
a:link { color: #0000EE; text-decoration: underline; }
a:visited { color: #551A8B; }
a:hover, a:active { color: #FF0000; text-decoration: none; }
#projects ul {
    list-style-type: square;
    padding-left: 20px;
    margin: 0;
}
#projects li { padding: 5px 0; }
#footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #E0E0E0;
    font-size: 0.9em;
    color: #888888;
}