:root {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  --grid-container-bg-color: pink;
  --heropic-border-color: red;
  --heroimage-bg-color: pink;
  --profilename-bg-color: #F3E6E8;
  --summary-bg-color: white;
  --compentencies-bg-color: white;
  --experience-bg-color: white;
  --education-bg-color: #F3E6E8;
  --expertise-bg-color: white;
  --skills-bg-color: white;
  --licenses-bg-color: #F3E6E8;
  --languages-bg-color: white;
  --contact-bg-color: #F3E6E8;
  --accomplishments-bg-color: white;
  --qualifications-bg-color: white;
}

.grid-container {
    display: grid;
    width: 90%;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "heroimage profilename"
      "jobtitle jobtitle"
      "summary summary"
      "contact experience"
      "education experience"
      "licenses experience";
  
    /* "skills experience" */
    /* "accomplishments experience" */
    /* "qualifications experience" */
    /* "languages experience" */
  
    grid-gap: 20px;
    /* background-color: #2196f3; */
    padding: 10px;
  }
  
  .grid-container > div {
    /* background-color: rgba(255, 255, 255, 0.8); */
    text-align: center;
    padding: 20px 0;
    /* font-size: 30px; */
  }
  
#heropic {
  width: 100px;
  border: 3px solid var(--heropic-border-color);
}
.heroimage {
  grid-area: heroimage;
}
.profilename {
  grid-area: profilename;
  background-color: var(--profilename-bg-color);
  font-size: 4rem;
  align-content: center;
  border-radius: 10px;
}
.jobtitle {
  grid-area: jobtitle;
  background-color: var(--profilename-bg-color);
  font-size: 3rem;
}
.summary {
  grid-area: summary;
  background-color: var(--summary-bg-color);
}
/* .compentencies {
  grid-area: compentencies;
    background-color: var(--compentencies-bg-color);
} */
.experience {
  grid-area: experience;
  background-color: var(--experience-bg-color);
}
.education {
  grid-area: education;
  font-size: 0.85rem;
  background-color: var(--education-bg-color);
  border-radius: 10px;
}
/* .expertise {
  grid-area: expertise;
      background-color: var(--expertise-bg-color);
} */
/* .skills {
  grid-area: skills;
      background-color: var(--skills-bg-color);
} */
.licenses {
  grid-area: licenses;
  background-color: var(--licenses-bg-color);
  border-radius: 10px;
}
.contact {
  grid-area: contact;
  background-color: var(--contact-bg-color);
  border-radius: 10px;
}
/* .languages {
  grid-area: languages;
      background-color: var(--languages-bg-color);
} */
/* .accomplishments {
  grid-area: accomplishments;
      background-color: var(--accomplishments-bg-color);
} */
/* .qualifications {
  grid-area: qualifications;
      background-color: var(--qualifications-bg-color);
} */


footer {
  font-size: 0.8rem;
  text-align: center;
}