*{
box-sizing:border-box;
}


body{

margin:0;

background:#fff;

color:#202122;

font-family:Arial,Helvetica,sans-serif;

}



header{

height:70px;

border-bottom:1px solid #ddd;

display:flex;

align-items:center;

padding:0 7vw;

}



.logo{

font-weight:bold;

font-size:20px;

}



main{

max-width:1250px;

margin:auto;

padding:40px;

}



.article-header{

max-width:900px;

}



.tag{

font-size:12px;

letter-spacing:4px;

color:#72777d;

}



h1{

font-family:Georgia,serif;

font-size:64px;

font-weight:normal;

border-bottom:1px solid #a2a9b1;

margin:20px 0;

}



.article-header p{

font-size:24px;

color:#54595d;

}



.page{

display:grid;

grid-template-columns:1fr 330px;

gap:50px;

margin-top:40px;

}



article{

font-size:18px;

}



.notice{

background:#f8f9fa;

border:1px solid #a2a9b1;

padding:15px;

}



h2{

font-family:Georgia,serif;

font-size:34px;

font-weight:normal;

border-bottom:1px solid #a2a9b1;

margin-top:45px;

}



p{

line-height:1.8;

}



.box{

background:#f8f9fa;

border:1px solid #a2a9b1;

padding:20px;

}



.box img{

width:100%;

}



.box h2{

font-size:26px;

border:none;

margin:15px 0;

}



.timeline div{

border-left:3px solid #999;

padding-left:25px;

margin:25px 0;

}



.timeline span{

font-size:14px;

color:#54595d;

}



.skills{

width:100%;

border-collapse:collapse;

}



.skills td,
.skills th{

border:1px solid #a2a9b1;

padding:12px;

}



.skills th{

background:#eaecf0;

}



.projects{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}



.projects div{

border:1px solid #ddd;

padding:25px;

}



.projects h3{

margin-top:0;

}



.project-meta{

font-size:14px;

color:#54595d;

}



h3{

font-family:Georgia,serif;

}



a{

color:#0645ad;

}



.contact{

background:#f8f9fa;

border:1px solid #a2a9b1;

padding:20px;

}



.contact-links{

display:flex;

flex-direction:column;

gap:10px;

}



.contact-links a{

padding:10px;

border:1px solid #a2a9b1;

background:#fff;

text-decoration:none;

}



.contact-links a:hover{

background:#eaecf0;

}



.external-links{

display:flex;

flex-direction:column;

gap:10px;

}



.profile-info b{

display:block;

margin-top:15px;

}



.profile-info p{

font-size:15px;

}



footer{

border-top:1px solid #ddd;

margin-top:70px;

padding:30px;

text-align:center;

color:#54595d;

}



@media(max-width:900px){

.page{

grid-template-columns:1fr;

}


.projects{

grid-template-columns:1fr;

}


h1{

font-size:45px;

}

}