body, h1, h2, p{
    margin: 0;
    padding: 0;
    list-style: none;
}
   
body {
    font-family: Arial, sans-serif;
    
    color: white;
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
   
  .container {
    display: flex;
    width: 100%;
    height: 100%;
  }
   
  /* Left Section (Sidebar) */
  .left-section {
    width: 30%;
    background-image: url('d:\cv_yurida\azna.jpg');
    background-position:left;
    background: #ffffff;
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   
  .left-section h1 {
    font-size: 1.8em;
    margin-bottom: 10px;
  }
   
  .left-section h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  
   
  .left-section a:hover {
    text-decoration: underline;
  }
  .name {
    font-size: 32px;
    color: #f987c5;
    font-weight: bold;
    margin-bottom: 10px;
  }
   
  .j_p {
      color: #f987c5;
      text-transform: uppercase;
      font-size: 14px;
  }
   
  .profile {
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      margin-top: 20px;
      border: 2px solid white;
  }
   
  .profile img {
      width: 130px;
      border-radius: 50%;
      border: 2px solid white;
      margin-bottom: 10px;
  }
   
   
   
  /* Right Section (Main Content) */
  .right-section {
    width: 70%;
    padding: 20px;
    overflow-y: auto;
  }
  
  .contact-info{
    background: #f987c5;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid white;
    margin-top: 10px;
  }
  
  .l_p{
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid white;
      margin-top: 10px;
      color: white;
      margin-bottom: 20px;
      position: relative;
  }
   
  h2, h3, h5 {
      color: #fff;
      text-transform: uppercase;
      margin: 20px 0 10px;
  }
   
  p {
      color: #fff;
      font-size: 14px;
      line-height: 1.6;
  }
   
  .circle-filled {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #fff;
      margin-right: 5px;
      border-radius: 50%;
  }
   
  .circle-empty {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1px solid #fff;
      margin-right: 5px;
      border-radius: 50%;
  }
  .skill{
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid white;
      margin-top: 10px;
      color: white;
      margin-bottom: 20px;
      position: relative;
  }
   
  .bar{
      background: #ffa6c9;
      display: block;
      height: 20px;
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
   
   
  .bar:hover{
      box-shadow: 0 14px 28px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.22);
  }
   
  .bar span{
      height: 20px;
      float: left;
      background: linear-gradient(125deg, rgba(236, 0, 140, 1)0%, rgba(252, 103, 103, 1)100%);
  }
   
  .html{
      width: 44%;
      animation: html 3%;
  }
   
  .c{
      width: 61%;
      animation: c 3%;
  }
   
  .java{
      width: 92%;
      animation: java 3%;
  }
   
  .contact{
    background: #f987c5;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid white;
    margin-top: 10px;
}

.education{
  background: #f987c5;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid white;
  margin-top: 10px;
}

  .hobbies{
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid white;
      margin-top: 10px;
      color: white;
      margin-bottom: 20px;
      position: relative;
  }
   
  
  .experience{
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid white;
      margin-top: 10px;
  }
  .portofolio{
      background: #f987c5;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid white;
      margin-top: 10px;
      color: white;
      margin-bottom: 20px;
      position: relative;
  }
   
  .box, .h_box {
      background:#f987c5;
      border-radius: 10px;
      float: left;
      width: 45%;
      margin: 10px 2.5%;
      text-align: center;
  }