*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html{
   font-size: 16px;
   line-height: 1.5;
   letter-spacing: 1px;
}

a{
   color:rgb(7, 107, 107);
   text-decoration: none;
}

.info-container{
   display: flex;
}

.info-container .iconfont{
   font-size: 20px;
   color: #888;
   margin-right: 20px;
}

.info-container img{
   width:120px;
   height:160px;
   border-radius: 20%;
   object-fit: cover;
   margin-left: 20px;
}

.info{
   flex-grow: 1;
   display: grid;
   grid-template-columns: 40px 350px 100px 1fr;
}

.info .name{
   grid-area: 1 / 1  / 2 /4;
   font-size: 2em;
   font-weight: bold;
}

.download-btn{
   grid-area: 1 / 4  / 2 /5;
   text-align: right;
   margin-right: 10px;
   cursor: pointer;
   text-decoration: none;
   color: inherit;
}

.download-btn:hover .iconfont{
   color: rgb(7, 107, 107);
}

.info .name span{
   font-size: 0.5em;
   color: #666;
   letter-spacing: 3px;
}

.label {
   color: #888;
   text-align: right;
   margin-right: 10px;
}

.block{
   margin: 30px 0;
}

.block-title{
   border-bottom: 1px solid #ccc;
   padding-bottom: 10px;
}

.block-content{
   padding: 10px 0;
}

.time-line{
   position: relative;
   padding-left: 10px;
}

.time-line::before{
   position: absolute;
   content: '';
   width: 2px;
   height: 90%;
   background-color: rgb(73, 177, 245);
   left: 9px;
   top: 10px;
}

.time-line .item{
   padding-left: 20px;
   margin: 10px 0;
   position: relative;
}

.time-line .item::before{
   content: '';
   position: absolute;
   width: 10px;
   height: 10px;
   background-color: rgb(73, 177, 245);
   border-radius: 50%;
   left: -5px;
   top: 7px;
}

.time-line .gray{
   color: #888;
   font-size: 0.8em;
}

.detail{
   margin-top: 10px;
   font-size: 13px;
   color: #666;
   margin: 10px 0;
   line-height: 2;
}

.projects {
   margin-bottom: 30px;
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 10px;
}

.projects h3 {
   grid-area: 1 / 1  / 1 /3;
}

.projects p{
   margin-bottom: 1em;
}