@import url(./style.css);

#resume{}
#resume article h5{
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--color-main);
    margin: 0 0 1.2rem;
}
#resume .container{
    padding: 0 15px;
    max-width: 100%;
    width: 1140px;
}
#resume article{}
#resume article:not(:first-child){
    margin-top: 6rem;
}


#resume article h4{
    margin: 0 0 1.5rem;
}
#resume article h4 small{
    display: inline-block;
    font-size: 90%;
    font-weight: 400;
    color: var(--color-main);
    margin-left: 1rem;
}
#resume article .content{}
#resume article .content + .content{
    margin-top: 3rem;
}

.table-resume{
    width: 100%;
}
.table-resume tr th,
.table-resume tr td{
    font-size: var(--font-size-16);
    padding: 0 1.4rem 0.8rem;
}
.table-resume tr th{
    text-align: left;
    width: 180px;
    font-weight: 600;
    padding-left: 0;
}
.table-resume tr td{}
.table-resume tr td.date{
    padding-left: 0;
    font-weight: 700;
    width: 180px;
    color: var(--color-main-hover);
}
.table-resume tr td.date .working{
    color: var(--color-main);
}
.table-resume tr td button{}

.summary{
    padding: 3rem 3rem;
    margin: 2rem 0 0;
    border: 1px solid #ddd;
}
.summary p{
    font-size: var(--font-size-16);
    margin: 0 0 1rem;
    line-height: 1.4;
}
.summary p:last-child{margin-bottom: 0;}
.summary p b{color: var(--color-main)}

#resume .tech{
    grid-template-columns: var(--grid-template-3);
    gap: 9rem;
}
#resume .tech .col{}
#resume .tech .skill{
    display: block;
    padding: 0;
    background: none;
}
#resume .tech .skill li{}
#resume .tech .skill li:not(:first-child){margin-top: 1rem;}
#resume .cover_letter{}
#resume .cover_letter .col{}
#resume .cover_letter .col h5{}
#resume .cover_letter .col p{}
#project-list{
    grid-template-columns: var(--grid-template-4);
    gap: 1.5rem;
    padding: 3rem;
    border: 1px solid #ddd;
}
#project-list .col{}
#project-list .col.core{
    grid-column: 1 / 4;
}
#project-list .des{}

#resume .li-career{
    margin: 0 0 1rem;
}
#resume .li-career.common{
    margin: 0 0 1.5rem;
}
#resume .li-career > li{
    position: relative;
    font-size: var(--font-size-16);
    padding-left: 1.2rem;
}
#resume .li-career > li:not(:first-child){margin-top: 1rem;}
#resume .li-career > li::before{
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    background: var(--color-main-hover);
}
#resume #project-list h6{
    font-size: var(--font-size-18);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.11em;
    font-weight: 500;
}
#project-list h6 a{
    font-size: var(--font-size-16);
    color: var(--color-main);
}
#project-list h6 a .material-symbols-outlined{font-size: var(--font-size-18);}
#project-list h6 a:hover{
    color: var(--color-main-hover);
}

#project-list ul{
    font-size: 1.4rem;
    line-height: 1.2;
    /* display: flex; */
    /* gap: 2rem; */
    color: #313131;
}
#project-list ul li{
    position: relative;
    padding-left: 1.2rem;
}
#project-list ul li::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    width: 0.5rem;
    height: 0.1rem;
    background: #999;
}

#project-list .des p{
    font-size: var(--font-size-16);
    font-weight: 300;
}

#return-btn{
    position: fixed;
    bottom: 130px;
    right: 30px;
    display: block;
    padding: 1rem;
    color: #fff;
    background: var(--color-main);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.23);
    z-index: 99999;
    transition: 0.3s ease-in-out;
}
#return-btn .material-symbols-outlined{
    font-size: 4rem;
}
#return-btn:hover{
    box-shadow: 0 5px 15px -8px rgba(0,0,0,0.23);
    background: var(--color-main-hover);
}
#return-btn:hover .material-symbols-outlined{}

@media screen and (max-width: 1500px) {

}
@media screen and (max-width: 800px) {

}
@media screen and (max-width: 500px) {
    .cover_letter {}
    .cover_letter .col {}
    .cover_letter .material-symbols-outlined{}

    #resume .tech {
        grid-template-columns: var(--grid-template-1);
        gap: 3rem;
    }
    #resume .tech .skill{
        display: flex;
        gap: 0rem 2rem;
        flex-wrap: wrap;
    }
    #resume .tech .skill li{
        width: calc((100% / 2) - 1rem);
    }
    #resume .tech .skill li:not(:first-child){margin: 0;}

    #project-list {
        grid-template-columns: var(--grid-template-2);
    }
}