:root {
  --bg: #F5EFE3;
  --card: #917963;
  --card-border: #e7b4896b;
  --text-dark: #3F2719;
  --btn: #3F2719;
  --btn-hover: #28180F;
  --btn-text: #D8C9A8;
}

body {
  background-color: var(--bg);
}

.Title {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
  text-align: center;
}

.number,
.email {
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
  text-align: center;
}

.contact,
.profile,
.education {
  background-color: var(--card);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  max-width: 700px;
  margin: 20px auto;
  text-align: center;
}

.github,
.linkedin {
  display: inline-block;
  background-color: var(--btn);
  color: var(--btn-text);
  font-family: "Open Sans", sans-serif;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.github:hover,
.linkedin:hover {
  background-color: var(--btn-hover);
}

.profileTitle {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
}

.profileText {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: var(--text-dark);
}

.skills {
  box-sizing: border-box;
  max-width: 700px;
  margin: 20px auto;
  padding: 15px;
  text-align: center;
}

.skillsTitle {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
  text-align: center;
  margin-top: 0;
}

.skillsList {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 40px;
  row-gap: 10px;
  width: fit-content;
  margin: 0 auto;
  padding: 0 0 0 20px;
  list-style: disc;
  text-align: left;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-dark);
}

.skillsList li {
  max-width: 280px;
}

@media (max-width: 600px) {
  .skillsList {
    grid-template-columns: auto;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

.education {
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
}

.educationTitle {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
  margin-top: 0;
}

.uni {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--card-border);
}

.uniName {
  margin: 0 0 6px;
  font-size: 20px;
}

.uniDetail {
  margin: 2px 0;
  font-size: 15px;
}

.years {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
}

.year {
  padding: 0 25px;
}

.year:first-child {
  padding-left: 0;
}

.year:last-child {
  padding-right: 0;
  border-left: 1px solid var(--card-border);
}

.yearTitle {
  margin: 0 0 8px;
  font-size: 16px;
}

.badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.badgeDone {
  background-color: var(--btn);
  color: var(--btn-text);
}

.badgePending {
  border: 1px solid var(--btn);
  color: var(--text-dark);
}

.moduleList {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.4;
}

.moduleList li {
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .years {
    grid-template-columns: 1fr;
  }

  .year,
  .year:first-child,
  .year:last-child {
    padding: 0;
  }

  .year:last-child {
    margin-top: 20px;
    padding-top: 20px;
    border-left: none;
    border-top: 1px solid var(--card-border);
  }
}

.experience {
  box-sizing: border-box;
  max-width: 700px;
  margin: 20px auto;
  padding: 15px;
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
}
 
.experienceTitle {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
  text-align: center;
  margin-top: 0;
}
 
.job {
  margin-bottom: 30px;
  padding-left: 18px;
  border-left: 3px solid var(--card);
}
 
.job:last-child {
  margin-bottom: 0;
}
 
.jobHeader {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: 14px;
}
 
.jobName {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
 
.jobName .badge {
  margin-bottom: 0;
}
 
.jobOrg {
  margin: 0;
  font-size: 20px;
}
 
.jobDates {
  margin: 0;
  font-size: 14px;
}
 
.role + .role {
  margin-top: 20px;
}
 
.roleHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}
 
.roleTitle {
  margin: 0;
  font-size: 16px;
}
 
.linkRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
 
.linkBtn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 8px;
  background-color: var(--btn);
  color: var(--btn-text);
  font-size: 13px;
  text-decoration: none;
}
 
.linkBtn:hover,
.linkBtn:focus-visible {
  background-color: var(--btn-hover);
}
 
.roleList {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.4;
}
 
.roleList li {
  margin-bottom: 6px;
}

.projects {
  box-sizing: border-box;
  max-width: 700px;
  margin: 40px auto 20px;
  padding: 25px 15px 15px;
  border-top: 2px solid var(--card);
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
}

.projectsTitle {
  font-family: Boldonse, sans-serif;
  color: var(--text-dark);
  text-align: center;
  margin-top: 0;
}

.project + .project {
  margin-top: 30px;
}

.projectHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.projectName {
  margin: 0;
  font-size: 20px;
}

.techList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.techList li {
  padding: 2px 10px;
  border: 1px solid var(--btn);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}

.project .linkRow {
  margin-bottom: 10px;
}

.projectList {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.4;
}

.projectList li {
  margin-bottom: 6px;
}