@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&family=Raleway:wght@200;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&family=Quicksand&family=Raleway:wght@200;600&display=swap');

:root {
  --main-color: /*#ada49c*/ #d4beba;
  --secondary-color: ;
  --header-font:'Raleway';
  --section-title-font: 'Kanit';
  --role-title-font: 'Raleway';
  --job-period: 'Quicksand';
}
body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f9f9f9;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .header {
      display: flex;
      align-items: flex-start;
      padding: 20px;
      background-color: var(--main-color);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 0px;
    }
    .header-picture {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

    }
    .header-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .header-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    /*Name*/
    .header-info h1 {
      margin-top: 10px;
      margin-left: 25px;
      margin-bottom: 0;
      font-size: 36px;
      font-family: var(--header-font);
      color: #222;
    }
    /*Role*/
    .header-info h2 {
      margin-top: 4px;
      margin-left: 30px;
      font-size: 24px;
      font-family: var(--header-font);
      color: #5c4a32;
    }
    .contact {
      padding-left: 10px;
      padding-bottom: 4px;
      font-size: 14px;
      color: #555;
      margin-bottom: 9px;
      background-color: var(--main-color);
    }
    .contact ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: auto;
    }
    .contact li {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    .contact li i {
      margin-right: 5px;
      font-size: 12px;
    }

    /*** SUMMARY, EXPERIENCES ETC. ***/

    .main {
      display: flex;
      flex-wrap: wrap;
    }
    .main .left {
      flex: 2;
      padding: 20px;
      margin-right: 20px;
      background-color: #fff;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .left .fa {
      padding-right: 5px;
    }
    .left p {
      margin-bottom: 25px;
      font-size: 15px;
      color: #555;
    }

    /* EXPERIENCE N */
    .job-position {
      font-family: var(--role-title-font);
      margin-top: 2px;
      margin-bottom: 4px;
    }
    .entity-name {
      font-family: var(--role-title-font);
      margin: 0;
    }
    .job-location {
      float: right;
      font-size: 12px;
      padding-right: 15px;
    }
    .job-time{
      font-family: var(--job-period);
      font-size: 14px;
      letter-spacing: 0px;
      text-transform: uppercase;
      margin-top: 0px;
      margin-bottom: 8px;
      border-bottom: 1px solid #ccc;
    }

    /*** SIDE SECTION ***/

    .main .right {
      flex: 1;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .right ul li {
      list-style: none;
    }
    h1 {
      font-size: 36px;
    }
    h2 {
      margin: 0 0 15px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
      font-size: 21px;
      font-family: var(--section-title-font);
      text-transform: uppercase;
      color: #333;
    }
    ul {
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
    }
    ul li {
      margin-bottom: 5px;
      font-size: 16px;
      color: #444;
    }