/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#f5f7fa;

    color:#222;

    line-height:1.6;

}

/* ===========================
   LAYOUT
=========================== */

.container{

    max-width:1200px;

    margin:auto;

    padding:30px;

}

/* ===========================
   HEADER
=========================== */

.header{

    display:flex;

    align-items:center;

    gap:30px;

    background:#fff;

    padding:30px;

    border-radius:16px;

    margin-bottom:25px;

    box-shadow:0 5px 18px rgba(0,0,0,.06);

}

.header-photo img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

}

.header h1{

    font-size:2.3rem;

    margin-bottom:5px;

}

.header h2{

    color:#1E3A8A;

    font-size:1.2rem;

    font-weight:500;

}

.contacts{

    margin-top:15px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.contacts a{

    text-decoration:none;

    color:#1E3A8A;

}

/* ===========================
   CONTENT
=========================== */

.content{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:25px;

}

/* ===========================
   CARDS
=========================== */

.card{

    background:white;

    padding:25px;

    border-radius:16px;

    margin-bottom:20px;

    box-shadow:0 5px 18px rgba(0,0,0,.06);

}

.card h3{

    margin-bottom:15px;

    color:#1E3A8A;

}

/* ===========================
   LISTS
=========================== */

ul{

    list-style:none;

}

li{

    margin-bottom:10px;

}

/* ===========================
   JOBS
=========================== */

.job{

    margin-bottom:25px;

}

.job span{

    color:#777;

    font-size:.9rem;

}

/* ===========================
   SKILLS
=========================== */

.skills{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.skills span{

    background:#eef4ff;

    color:#1E3A8A;

    padding:8px 14px;

    border-radius:999px;

    font-size:.9rem;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:900px){

    .header{

        flex-direction:column;

        text-align:center;

    }

    .contacts{

        justify-content:center;

    }

    .content{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .container{

        padding:15px;

    }

    .header{

        padding:20px;

    }

    .card{

        padding:20px;

    }

    .header h1{

        font-size:1.8rem;

    }

}