*{
    padding: 0vh;
    margin: 0vh;
    font-family: "Roboto", sans-serif;
}
html{
    background-color: #1c1e1f;
    scroll-behavior: smooth;
}

/* Container */
.container{
    width: 60%;
    margin-left: 40%;
}
.container_box{
    width: 90%;
    margin: auto;
    padding: 5vh 0vh;
    border-bottom: 0.1vh solid #8d8e8f;
}

/* section title */
.section_title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 5vh;
}
.section_title i{
    color: #d62222;
    font-size: 4vh;
    padding-right: 1vh;
}
.section_title span{
    font-size: 5vh;
    font-weight: 700;
    color: white;
}

/* title */
.title{
    font-size: 3.5vh;
    display: block;
    color: white;
    font-weight: 600;
    padding-bottom: 1.5vh;
}

/* info */
.info{
    color: #8d8e8f;
    display: block;
    font-size: 2.5vh;
    padding-bottom: 1.5vh;
}

/* skill info */
.skill_info{
    color: #d62222;
    font-size: 2.8vh;
    font-weight: 500;
}
.skill_info i{
    color: white;
    padding-right: 2vh;
}

/* nav */
nav{
    width: 5%;
    height: 100%;
    position: fixed;
}
.nav_box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.nav_box>span{
    color: #d62222;
    font-size: 4.5vh;
    font-weight: 800;
    padding-top: 5vh;
}
.nav_box>a{  
    padding-bottom: 5vh;
}
.nav_box a{
    text-decoration: none;
    color: #8d8e8f;
    transition-duration: 0.5s;
    display: block;
    font-size: 4vh;
    padding-top: 3vh;
}
.nav_box a:hover{
    color: #d62222;
}

/* photo section */
.photo{
    background: linear-gradient(to top, #1c1e1fe6, #0000 56%), linear-gradient(#1c1e1f1a, #1c1e1f1a), url(../images/person.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 35%;
    margin-left: 5%;
    position: fixed;
}
.photo_info{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}
.photo_info h1{
    font-size: 7vh;
    font-weight: 800;
    color: white;
}
.photo_info h2{
    font-size: 3vh;
    font-weight: 400;
    color: #d62222;
    padding: 2vh 0vh 3vh 0vh;
}
.photo_info>div{
    display: block;
        padding-bottom: 5vh;
}
.photo_info>div a{
    text-decoration: none;
    color: white;
    transition-duration: 0.5s;
    font-size: 3vh;
    padding-right: 2vh;
}
.photo_info>div a:hover{
    color: #d62222;
}

/* About Me */
.about_me_name{
    font-size: 7vh;
    font-weight: 800;
    color: white;
}
.about_me_info{
    font-size: 2.5vh;
    font-weight: 400;
    color: #d62222;
    padding: 2vh 0vh 3vh 0vh;
}
.about_me_text{
    font-size: 2.3vh;
    color: #8d8e8f;
}

/* skills */
.skill_item_title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.skill_item_title h3{
    font-size: 2.5vh;
    font-weight: 400;
    color: white;
}
.skill_item_title span{
    font-size: 2.5vh;
    font-weight: 600;
    color: #d62222;
}
.all_skill{
    width: 100%;
    border-bottom: 0.5vh solid #8d8e8f;
    position: relative;
    margin: 2vh 0vh 4vh 0vh;
}
.some_skill{
    position: absolute;
    border-bottom: 0.5vh solid #d62222;
}

/* project */
.project_item h3 a{
    text-decoration: none;
    font-size: 3.5vh;
    color: white;
    transition-duration: 0.5s;
    font-weight: 600;
    padding-bottom: 1.5vh;
    display: block;
}
.project_item h3 a:hover{
    color: #d62222;
}
.project_item>span{
    color: white;
    font-size: 2.2vh;
    font-weight: 400;
    padding-bottom: 1.5vh;
    display: block;
}
.project_item>p{
    color: #8d8e8f;
    font-size: 2.5vh;
    padding-bottom: 1.5vh;
}

/* education */
.education_year{
    color: #d62222;
    font-size: 2vh;
    display: block;
    font-weight: 400;
    padding-bottom: 1.5vh;
}