all.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.name h1 {
    font-size: 80px;
    line-height: 90px;
    margin-bottom: 24px;

}

.name {
    border-bottom: black 2px solid;
    padding-top: 48px;
    margin-bottom: 48px;
}

.photo {
    margin-bottom: 48px;
}

.photo img {
    width: 324px;
    height: 324px;
    border-radius: 50%;
    display: block;
}


.container {
    width: 1200px;
    margin: 0 auto;
}


.title, .title_work {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
}
.title h2, .title_work h2{
    font-size: 32px;
    line-height: 45px;
    margin-right: 16px;
}

.title h2.subtitle, .title_work h2.subtitle {
    font-size: 24px;
    line-height: 32px;
    color: #A00404;
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #96A9C4;
    top: 0;
    bottom: 0;
    left:24px;
    margin-top: 25px;
    margin-bottom: 34px;
    margin-left: -1px;
}
.profile {
    margin-bottom: 48px;
}

/* Container around content */
.content {
    padding: 16px 48px;
    position: relative;
}


/* The circles on the timeline */
.circle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #96A9C4;
    top: 25px;
    left: 16px;
    border-radius: 50%;
    z-index: 1;
}

.content li {
    font-size:24px;
    line-height:36px;
    margin-bottom: 24px;
}
.content p {
    font-size:24px;
    line-height:36px;
}

.education {
    margin-bottom: 56px;
}

.relative {
    position: relative;
    margin-bottom: 72px;
}

.skills_background {
    position: absolute;
    width: 100%;
    background-color: #96A9C4;
    top: 70px;
    bottom: 70px;
    z-index: -1;
}

.skills {
    background: #415165;
    padding: 24px 0px 40px
}

.skills_title {
    width: 996px;
    margin: 0 auto 40px;
}

.title_center {
    display: flex;
    justify-content: center;
    border-bottom: 1px #FFFFFF solid;
    padding-bottom: 8px;
    align-items: center;
}

.skills_title h2, .footer_title h2 {
    font-size: 32px;
    line-height: 45px;
    color: #fff;
    margin-right: 16px;
}

.skills_title h2.subtitle, .footer_title h2.subtitle{
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

.skills_content {
    width: 216px;
    margin: 0 auto;
    padding-left: 24px;
    border-left: 1px #96A9C4 solid;
}

.skills_content li {
    color: #fff;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 36px;
}

.title_work {
    margin-bottom: 22px;
}
.content_work {
    width: 642px;
    margin-left: 24px;
    border-left: 1px solid #96A9C4;
    padding-left: 24px;
    margin-bottom: 72px;
}

.content_work h4 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 8px;
}

.content_work img {
    margin-bottom: 8px;
}

.content_work p {
    font-size: 20px;
    line-height: 30px;
}

.content_work li {
    margin-bottom: 32px;
}

.footer {
    background: #415165;
    padding-top: 24px;
    padding-bottom: 48px;
}

.footer_title {
    width: 1200px;
    margin: 0 auto 32px;
}

.footer_content {
    width: 1200px;
    margin: 0 auto;
}

.footer_content li {
    align-content: center;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 16px;
    text-align: center;
    color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

.contact {
    display: flex;
    justify-content: center;
}
.contact a {
    display: block;
    margin-right: 24px;
}

.name {
    font-family: "Andale Mono", sans-serif;
}

.title h2, .content_work h4 , .skills_title h2, .footer_title h2, .title_work h2 {
    font-family: "PingFangTC-Medium", sans-serif;
}

.title h2.subtitle, .skills_title h2.subtitle, .footer_title h2.subtitle, .title_work h2.subtitle {
    font-family: "Roboto Medium", sans-serif;
}

.skills_content li {
    font-family: "Roboto Light", sans-serif;
}

.content p, .content_work p, .footer_content li, .skills_content li.pingfang_light {
    font-family: "PingFangTC-Light", sans-serif;
}