*{
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 10px;
    padding-top: 0px;
    padding-right: 10px;
    display:flex; 
    flex-direction: row;
    justify-content: center;
    margin: 0;
}
  
.container{
    width: 600px;
}
  
.information{
    width: 300px; 
}
  
  header{
      color:white;
      border-bottom:1px solid #d5d8e1;
      text-transform: uppercase;
  }
  header span{
      background-color:#243c84;
      width: 50%;
      padding:10px;
      display: inline-block;
  }
  
  h1{
      text-transform: uppercase;
  }
  
  h4{
      text-transform: capitalize;
      color:#494c4d;
  }
  
  .contact_data{
      border-top: 1px solid #d5d8e1;
      border-bottom: 1px solid #d5d8e1;
      display:flex; 
      flex-direction: row;
      justify-content: space-between;
      padding-top: 10px;
      padding-bottom:  10px;
      padding-left: 0;
      padding-right: 10px;
      gap: 20px;
  }
  
  .contact_data > a{
      display: flex;
      flex-direction: row;
      align-items :center;
      text-decoration: none;
  }
  
  .material-symbols-outlined{
      width: 27px;
      height: 27px;
  }
  .exp h2{
      margin-top: 50px;
      margin-bottom: 25px;
      text-transform: uppercase;
  }
  
  .exp_one h5{
      text-transform: uppercase;
      font-weight: 1000;
      margin-bottom: 5px;
  }
  
  .exp_one_one{
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .toto{
      margin-top: 5px;
  }
  
  hr{
      margin-top: 50px;
      margin-bottom: 50px;
      border: 1px solid #d5d8e1;
      border-bottom: 0px; 
  }
  
  .skills h2{
      text-transform: uppercase;
      font-weight: 600;
  }
  
  .skill{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      width: 40%;
      gap: 30px;
      text-transform: uppercase;
      align-items: center;
  }
  
  .skill_list{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10%;
  }
  
  .skill_level{
      width: 200px;
  
  }
  
  .monInformation{
      background-color: #dfe2eb;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 30px;
  }
  
  
  .eduUne{
      margin-top: 0px;
      margin-bottom: 5px;
  }
  
  .tutu{
      text-transform: uppercase;
  }
  
  .fofo{
      text-transform: uppercase;
      font-weight: 600;
  }
  
  .separation{
      padding-right: 30px;
  }
  
  img{
      width: 100%;
  }
  
  .skill_level{
      height: 10px;
      border: 1px solid black;
      position: relative;
  }
  
  .level{
      border-radius: 50%;
      width: 10px;
      height: 100%;
      background-color: black;
      position: absolute;
      left: 40%;
  }
  
  .css_level{
      left: 35%;
  }
  
  .mobile{
      display:none;
  }
  
  @media (max-width: 640px) {
      .information{
          display: none;
      }
      .mobile{
          display: block;
      }
      .container{
          width: 100%;
      }
      body{
          padding-left: 5px;
          padding-right: 5px;
      }
      .contact_data{
  
          flex-direction: column;
      }
      .separation{
          padding-right: 5px;
      }
  }