.about{

    width:min(1200px,90%);
    margin:80px auto;

    display:flex;
    align-items:center;
    gap:80px;

}

.portrait{

    flex:1;

    display:flex;
    justify-content:center;

}

.portrait img{

    width:320px;
    height:320px;

    border-radius:20px;

    object-fit:cover;

    border:2px solid #30363d;

}

.about-text{

    flex:2;

}

.about-text h1{

    font-size:3rem;

    margin-bottom:30px;

}

.about-text p{

    color:#c9d1d9;

    line-height:1.8;

    margin-bottom:20px;

}

.about-text h2{

    margin-top:40px;
    margin-bottom:20px;

}

.about-text ul{

    padding-left:20px;

    line-height:2;

    color:#c9d1d9;

}

.nav{
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 22px 40px;

    background: #111;

    border-bottom: 1px solid #30363d;
}

.logo{
    position: absolute;
    left: 40px;
}

.logo a{
    color: #f0f6fc;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-links{
    display: flex;
    gap: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a{
    color: #c9d1d9;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: color .2s ease;
}

.nav-links a:hover{
    color: #3fb950;
}

@media(max-width:900px){

    .about{

        flex-direction:column;

        text-align:center;

    }

    .about-text ul{

        list-style-position:inside;

        padding:0;

    }

}