/* 设置整体部分 */
html{
    /* background: linear-gradient(to right top,#995D7F ,#420b2f); */
    background-image: linear-gradient(45deg, #2af598 0%, #009efd 100%);
}
body{
    margin-block: 100px;
    display: flex;
    justify-content:center;
    align-items:start;
    gap: 2px;
    position: relative;
}
.container{
    width: 90%;
    margin: 0 auto;
}
.btn{
    color: var(--white);
    background: var(--blue);
    border-radius: 5px;
}
.btn:hover{
    color: var(--white);
    background: var(--black);
}
/* 设置aside */
.aside{
    position: sticky;
    top: 20px;
    background: var(--white);
    width: 300px;
    box-shadow: var(--box-shadow);
}
.aside .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 15px;
}
.aside .container .aside-image{
    width: 150px;
    margin-bottom: 15px;
    border: 2px solid var(--black);
    border-radius: 50%;
}
.aside .container h1{
    font-size: 20px;
    padding-bottom: 5px;
}
.aside .container p{
    color: var(--blue);
    font-size: 16px;
}
.aside .container .aside-contacts{
    display: flex;
    justify-content: center;
    gap: 5px;
    margin:10px;
}
.aside .container .aside-contacts .contact-way a{
    display: inline-block;
    text-align: center;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--light-bg);
    margin-block: 10px;
    color: var(--black);
    font-size: 20px;
}
.aside .container .aside-contacts .contact-way a:hover{
    color: var(--white);
    background: var(--blue);
}
.aside .container .aside-btn{
    width: 90px;
    height: 40px;
    font-size: 16px;
}
/* 设置main内样式 */
.main{
    width: 60%;
    background: var(--white);
    box-shadow: var(--box-shadow);
}
.main section{
    padding-block: 15px;
}
.main h1{
    font-size: 24px;
    color: var(--blue);
    padding-bottom: 20px;
}

/* 设置section1 */
.main .section1 .container .section1-text{
    color: var(--light-color);
    font-size: 16px;
    padding-bottom: 20px;
}
.main .section1 .container .section1-information{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.main .section1 .container .section1-information li{
    display: flex;
    padding-block: 5px;
}
.main .section1 .container .section1-information li h2{
    font-size: 16PX;
}
.main .section1 .container .section1-information li .head{
    color: var(--light-color);
}

/* 设置section2 */
.main .section2 .section2-skills{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.main .section2 .section2-skills .skill{
    flex: 1 1 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 5px;
    border-radius: 5px;
    background-color: var(--light-bg);
}
.main .section2 .section2-skills .skill img{
    width: 230px;
}
.main .section2 .section2-skills .skill h2{
    font-size: 16px;
    color: var(--light-color);
    padding-top: 10px;
}

/* 设置section3 */
.main .section3 .section3-skills{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.main .section3 .section3-skills .skill{
    /* position: relative; */
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.main .section3 .section3-skills .skill h2{
    font-size: 16px;
    padding-block: 5px;
}
.main .section3 .section3-skills .skill .skill-progress{
    text-align: right;
    color: var(--light-color);
}
.main .section3 .section3-skills .skill .box-all{
    grid-column-start: 1;
    grid-column-end: 3;
    border-radius: 3px;
    background: var(--light-bg);
    height:6px;
}
.main .section3 .section3-skills .skill .box-progress{
    background: var(--blue);
    height: inherit;
}
/* 设置section4 */
.main .section4 .container .section4-undergo{
    background: var(--light-bg);
    padding: 25px 20px;
    border-radius: 5px;
}
.main .section4 .container .section4-undergo .undergo-time{
    color: var(--blue)
}
.main .section4 .container .section4-undergo h2{
    font-size: 18px;
    margin-block: 10px;
}
.main .section4 .container .section4-undergo .undergo-text{
    color: var(--light-color);
    line-height: 1.8;
}

/* 设置section5 */
.main .section5 .container .section5-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.main .section5 .container .section5-links .link{
    display: flex;
    justify-content: left;
    gap: 10px;
    width: 200px;
}
.main .section5 .container .section5-links .link .link-img{
    width: 40px;
    height: 40px;
    background: var(--blue);
    border-radius: 50%;
    color: var(--white);
    text-align: center;
    line-height: 40px;
}
.main .section5 .container .section5-links .link h2{
    font-size: 18px;
}
.main .section5 .container .section5-links .link p{
    font-size: 10px;
    color: var(--light-color);
    margin-block: 10px;
}

/* 设置媒体查询 */
@media screen and (max-width:1200px) {
    body{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-block: 10px;
    }
    .aside{
        position: static;
        border-radius: 10px;
        margin-block: 10px;
        width: 250px;
    }
    .main{

        width: 90%;
    }
}
@media screen and (max-width:600px) {
    .aside{
        width: 90%;
    }
    .aside .container .aside-btn{
        width: 200px;
    }
    .main .section1 .container .section1-information{
        grid-template-columns: 1fr;
    }
    .main .section3 .section3-skills{
        grid-template-columns: 1fr;
    }
}