*{
    margin: 0;
    padding: 0;

           box-sizing: border-box;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{

    background: #f5f5f5;
        color: #000;

    display: flex;
    justify-content: center;
    align-items: center;
    
        min-height:  100vh;

        padding:  40px 20px;
}

.cv-container{

         width: 100%;
      max-width: 850px;

     background: white;

     display: flex;

    min-height: 1100px;

         box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.sidebar{

    width: 35%;

      background: #111;
    color: white;

    padding: 40px 30px;

    display: flex;
    flex-direction: column;

    gap: 35px;
    }

.profile-photo-wrapper{

     width: 100%;

    aspect-ratio: 1/1;

     border-radius: 50%;

    overflow: hidden;

     background: #222;

        border: 2px solid white;
    }

    .profile-photo{

    width: 100%;
    height: 100%;

    object-fit: cover;
    }

    .sidebar-title{

       font-size: 1rem;
    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 15px;
     padding-bottom: 8px;

        border-bottom: 1px solid #333;
    }

.contact-list,
    .skills-list{
    list-style: none;
        }

    .contact-list li{

        margin-bottom: 10px;

    font-size: .85rem;

    color: #ccc;
        }

.contact-list a{

    color: #ccc;

    text-decoration: none;
        }

.skills-subtitle{

    margin: 12px 0 6px;

      font-size: .85rem;
       font-weight: 600;
        }

.skills-list li     {

    position: relative;

    padding-left: 12px;

    margin-bottom: 4px;

    color: #bbb;

    font-size: .85rem;
            }

.skills-list li::before{

    content: "—";

    position: absolute;
    left: 0;

    color: #666;
        }

.language-item{
    margin-bottom: 12px;
        }

.lang-name{

         display: block;

        margin-bottom: 5px;

     color: #ccc;

    font-size: .85rem;
}

.progress-bar{

    width: 100%;
     height: 4px;

     background: #222;

     border-radius: 2px;
        }

    .progress-fill{

      height: 100%;

    background: white;

    border-radius: 2px;
}

.fluent{
    width: 100%;
}

.advanced{
    width: 85%;
    }

        .basic{
    width: 20%;
}   

    .main-content{

    width: 65%;

    padding: 50px 40px;

    display: flex;
    flex-direction: column;

    gap: 35px;
}

    .header-section{

    padding-bottom: 20px;

    border-bottom: 2px solid black;
}

    .user-name{

               font-size: 2.5rem;
          font-weight: 800;

        line-height: 1.1;

    letter-spacing: 1px;
}

.user-role{

        margin-top: 10px;

        font-size: 1rem;

     letter-spacing: 3px;

    color: #707070;
}

.main-title{

     font-size: 1.1rem;
     font-weight: 700;

         letter-spacing: 2px;

    margin-bottom: 15px;

    padding-left: 10px;

            border-left: 3px solid black;
}

.about-section p{

        text-align: justify;

     line-height: 1.6;

    font-size: .9rem;

     color: #333;
}

.education-item,
.experience-item{

    margin-bottom: 20px;
}

.degree-title,
.job-title{

    font-size: .95rem;
    font-weight: 700;
}

.timeline{

     margin: 4px 0;

         color: #767474;

        font-size: .8rem;
}

.institution{

    color: #2e2e2e;

    font-size: .85rem;
      font-weight: 600;
}

.experience-tasks{

    list-style: none;

    margin-top: 8px;
}

.experience-tasks li            {

       position: relative;

         padding-left: 15px;

        margin-bottom: 4px;

      line-height: 1.5;

     font-size: .85rem;

    color: #444;
}

    .experience-tasks li::before{

    content: "•";

    position: absolute;
    left: 0;
        }

@media (max-width: 740px)       {

    .cv-container{
        flex-direction: column;
    }

      .sidebar  {

        width: 100%;

        padding: 30px 20px;
    }

          .main-content{

        width: 100%;

        padding: 30px 20px;
        }

         .profile-photo-wrapper{

             width: 140px;

        margin: 0 auto;
         }

    }