* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}
    body {background: #f4f4f4; color: #333; line-height: 1.6;}
    /*header {background: linear-gradient(135deg, #b0bab8, #dadada); color: rgb(108, 69, 198); padding: 0px 0px; text-align: center;}*/
    header img {width: 200px; height: 200px; border-radius: 100%; border: 5px solid white; margin-bottom: 40px;}
    h1 {font-size: 2.5rem;}
    main {max-width: 900px; margin: auto; padding: 20px;}
    section {margin-bottom: 40px;}
    h2 {border-left: 5px solid #2575fc; padding-left: 10px; margin-bottom: 15px; font-size: 1.5rem;}
    .info, .skills, .contact {background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
    .skill-bar {margin-bottom: 15px;}
    .skill-bar span {font-weight: bold;}
    .bar {height: 10px; background: #ddd; border-radius: 5px; margin-top: 5px;}
    .bar-fill {height: 10px; background: #2575fc; border-radius: 5px;}
    .contact a {display: inline-block; margin-right: 15px; color: #2575fc; text-decoration: none;}
    footer {text-align: center; padding: 20px; color: #666;}

    .hobbies {
        background: white;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 40px;
    }

    .hobbies h2 {
        border-left: 5px solid #2575fc;
        padding-left: 10px;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }

    .hobbies ul {
        list-style: none;
        padding-left: 0;
    }

    .hobbies li {
        margin-bottom: 10px;
        padding-left: 1em;
        position: relative;
    }

    .hobbies li::before {
        content: "";
        position: absolute;
        left: 0;
    }


body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: #f0f2f5;
}

.cover-img {
  height: 200px;
  padding-bottom: 40px;
  background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') no-repeat center/cover;
}

.card {
  max-width: 1000px;
  background: white;
  margin: -70px auto 0;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  padding: 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.left {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid white;
  object-fit: cover;
  margin-right: 20px;
}

.name-role h2 {
  margin: 0;
  font-size: 24px;
}

.name-role p {
  margin: 5px 0;
  color: #666;
}

.social-icons i {
  font-size: 18px;
  color: #333;
  margin-right: 10px;
  cursor: pointer;
}

.right {
  display: grid;
  gap: 10px;
  align-content: center;
  font-size: 14px;
  min-width: 240px;
}

.info-line {
  color: #555;
}