@page {
  page-orientation: upright;
  size: A4;
  margin: 0;

  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
  }

} 

@font-face {
  font-family: 'Nunito';
  src:
    local('Nunito Light'),
    url(./assets/fonts/Nunito-Light.ttf);
  font-weight: 100;
}

@font-face {
  font-family: 'Ubuntu';
  src:
    local('Ubuntu Regular'),
    url(./assets/fonts/Ubuntu-Regular.ttf);
  font-weight: 100;
}

@font-face {
  font-family: 'Norwester';
  src:
    local('Norwester'),
    url(./assets/fonts/Norwester.ttf);
  font-weight: 100;
}

:root {
  /* --clr-base: hsl(0, 0%, 100%); */
  --clr-base: hsl(0, 0%, 88%);
  --clr-content: hsl(210, 100%, 18%);
  --clr-subtitles: hsl(205, 100%, 91%);
  --clr-title: hsl(205, 100%, 98%);
  --clr-shadow: hsl(0, 0%, 67%);

  --ff-title: 'Nunito', sans-serif;
  --ff-subtitles: 'Norwester', sans-serif;
  --ff-body: 'Ubuntu', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: var(--ff-body);
  color: var(--clr-base);
  background-color: #002e5c;
}

a, a:hover,
a:visited {
  color: var(--clr-base);
  text-decoration: none;
}

h1, h2, h3 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.content {
  width: 100%;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  display: grid;
  grid-template-areas:
    "titulo"
    "profile"
    "profile-list"
    "career"
    "career-list"
    "education"
    "education-list"
    "skills"
    "skills-list"
    "experience"
    "experience-list";
  grid-template-columns: auto;
  grid-template-rows: repeat(11, auto);
}

.header {
  grid-area: titulo;
  place-content: center;
  height: 9rem;
  margin: 0;
  text-align: center;
  margin-left: 1rem;
}

.header h1 {
  font-family: var(--ff-title);
  font-size: 16pt;
  letter-spacing: 0.4em;
}

.header h3 {
  font-family: var(--ff-body);
  font-size: 12pt;
  letter-spacing: 0.8em;
}

.profile,
.career,
.education,
.skills,
.experience {
  font-family: var(--ff-subtitles);
  color: var(--clr-subtitles);
  font-size: 10pt;
  letter-spacing: 0.2em;
  border-top: 3px solid var(--clr-base);
  border-bottom: 3px solid var(--clr-base);
  text-align: center;
  height: 4rem;
  align-content: center;
  width: 100%;
}

.profile-list dl *,
.career-list,
.education-list,
.skills-list,
.experience-list {
  font-size: 12pt;
}

dt {
  color: var(--clr-subtitles);
}

dl,
dt,
dd {
  margin: 0;
}

.profile-list {
  grid-area: profile-list;
  display: grid;
  width: 100%;
  height: 15rem;
  margin: 0;
  align-content: center;
  text-align: center;
}

.profile-list {
  margin: 0;
  text-align: center;
}

.profile-list dd {
  margin-bottom: 1rem;
}

.profile-list dd:last-child {
  margin-bottom: 0;
}

.career-list {
  grid-area: career-list;
  display: grid;
  height: 34rem;
  margin: 0;
  padding: 0 1rem;
  align-content: center;
}

.career-list p {
  text-align: center;
  padding-bottom: 0.01rem;
}

.career-list p:last-child {
  padding-bottom: 0;
}

.education-list {
  height: 16rem;
  padding: 0 1rem;
  align-content: center;
  text-align: center;
}

.education-list dd {
  margin-bottom: 1.5rem;
}

.education-list dl dd:last-child {
  margin-bottom: 0;
}

.skills {
  grid-area: skills;
}

.skills-list {
  grid-area: skills-list;
  display: grid;
  margin: 0;
  padding: 0;
  height: 64rem;
  align-content: center;
  text-align: center;
}

.skills-list ul {
  list-style-position: inside;
  margin: 0;
  padding: 0 0.2rem;
}

.experience {
  grid-area: experience;
  margin: 0;
  padding: 0;
}

.experience-list {
  grid-area: experience-list;
  display: grid;
  margin: 0;
  padding: 0 1rem;
  width: 100%;
  height: 60rem;
  line-height: normal;
  align-content: center;
  text-align: center;

}

.experience-list dl * {
  padding: 0 5rem;
  text-align: center;
}

.experience-list dt {
  padding-bottom: 1rem;
} 

.experience-list dd {
  padding-bottom: 2rem;
}

.experience-list p {
  margin: 0;
  padding-bottom: 2rem;
}

.experience-list p:nth-child(2) {
  text-indent: 2rem;
}
 
.experience-list p:last-child {
  padding-bottom: 0;
}

@media screen and (min-width: 376px) and (max-width: 425px) {
  .header h1 {
    font-size: 20pt;
    letter-spacing: 0.3em;
  }

  .header h3 {
    font-size: 13pt;
    letter-spacing: 0.9em;
  }

  .profile, .career,
  .education, .skills,
  .experience {
    font-size: 12pt;
    height: 3rem;
  }

  .profile-list dl *,
  .career-list, .education-list,
  .skills-list, .experience-list {
    font-size: 12pt;
  }

  .career-list {
    height: 30rem;
  }

  .education-list {
    height: 15rem;
  }

  .skills-list {
    height: 58rem;
  }

  .experience-list {
    height: 49rem;
  } 

  .experience-list dl * {
    padding: 0 
  }

  .experience-list dt:first-child,
  .experience-list dd {
    padding-bottom: 1rem;
  }

}

@media screen and (min-width: 426px) and (max-width: 768px) {
  .header h1 {
    font-size: 24pt;
    letter-spacing: 0.3em;
  }

  .header h3 {
    font-size: 13pt;
    letter-spacing: 0.9em;
  }

  .profile, .career,
  .education, .skills,
  .experience {
    font-size: 14pt;
    height: 3rem;
  }

  .profile-list dl *,
  .career-list, .education-list,
  .skills-list, .experience-list {
    font-size: 14pt;
  }

  .profile-list {
    height: 16rem;
  }

  .career-list {
    height: 35rem;
  }

  .education-list {
    height: 15rem;
  }

  .skills-list {
    height: 65rem;
  }

  .experience-list {
    height: 57rem;
  } 
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .header h1 {
    font-size: 28pt;
    letter-spacing: 0.3em;
  }

  .header h3 {
    font-size: 16pt;
    letter-spacing: 0.9em;
  }

  .profile, .career,
  .education, .skills,
  .experience {
    font-size: 14pt;
    height: 3rem;
  }

  .profile-list dl *,
  .career-list, .education-list,
  .skills-list, .experience-list {
    font-size: 14pt;
  }

  .profile-list {
    height: 16rem;
  }

  .career-list {
    height: 18rem;
  }

  .education-list {
    height: 14rem;
  }

  .skills-list {
    height: 48rem;
  }

  .experience-list {
    height: 32rem;
  } 

  .experience-list dl {
    padding: 0 1.5rem;
  }

}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .header h1 {
    font-size: 36pt;
    letter-spacing: 0.3em;
  }

  .header h3 {
    font-size: 20pt;
    letter-spacing: 0.9em;
  }

  .profile, .career,
  .education, .skills,
  .experience {
    font-size: 16pt;
    height: 4rem;
  }

  .profile-list dl *,
  .career-list, .education-list,
  .skills-list, .experience-list {
    font-size: 16pt;
  }

  .profile-list {
    height: 18rem;
  }

  .career-list {
    height: 20rem;
  }

  .education-list {
    height: 16rem;
  }

  .skills-list {
    height: 56rem;
  }

  .experience-list {
    height: 32rem;
  } 

  .experience-list dl {
    padding: 0 1.5rem;
  }

}
@media screen and (min-width: 1441px) {
  body {
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%;
    font-family: var(--ff-body);
    color: var(--clr-base);
    background-color: var(--clr-base);
    justify-content: center;
  }

  .content {
    margin: 2rem;
    padding: 0;
    width: 1376px;
    height: 2700px;
    background-color: var(--clr-content);
    box-shadow: -10px 20px 5px var(--clr-shadow);
    border-radius: 2rem;
    display: grid;
    grid-template-areas:
      "titulo"
      "cmenor cmaior"
      "experiences";
    grid-template-columns: 413px 963px;
    grid-template-rows: 296px 1640px 764px;
  }

  .header {
    margin: 0;
    padding: 0;
    grid-area: titulo;
    grid-column: 1 / -1;
    text-align: center;
    height: 296px;
  }

  .header h1 {
    font-size: 64pt;
    letter-spacing: 30px;
  }

  .header h3 {
    font-size: 32pt;
    letter-spacing: 60px;
  }

  .cmenor,
  .cmaior {
    margin: 0;
    padding: 0;
    height: 1640px;
  }

  .cmenor {
    display: grid;
    grid-template-areas:
      "profile"
      "profile-list"
      "career"
      "career-list";
    grid-template-columns: 413px;
    grid-template-rows: 66px 342px 66px 1166px;
    border-right: 3px solid var(--clr-base);
  }

  .cmaior {
    display: grid;
    grid-template-areas:
      "education"
      "education-list"
      "skills"
      "skills-list";
    grid-template-columns: 963px;
    grid-template-rows: 66px 342px 66px 1166px;
  }

  .profile,
  .career,
  .education,
  .skills,
  .experience {
    font-size: 16pt;
    height: 66px;
    align-content: center;
    margin: 0;
    padding: 0;
  }

  .profile-list dl *,
  .career-list,
  .education-list,
  .skills-list,
  .experience-list {
    font-size: 20pt;
  }

  .profile-list {
    text-align: center;
    height: 342px;
  }

  .career-list {
    margin: 0;
    padding: 0;
    height: 1166px;
    align-content: center;
    padding: 0 1rem;
  }

  .education-list {
    justify-items: left;
  }

  .education-list {
    height: 342px;
    align-content: center;
    text-align: left;
    margin-left: 4rem;
  }

  .skills-list {
    height: 1166px;
  }

  .skills-list ul {
    text-align: left;
    padding: 0 1rem;
  }

  .skills-list ul ul {
    list-style-type: "- ";
    margin-left: 0;
    padding-left: 2rem;
  }

  .experiences {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas:
      "experience"
      "experience-list";
    grid-template-columns: 1376px;
    grid-template-rows: 66px 698px;
    justify-content: end;
    align-items: center;
  }

  .experience {
    grid-area: experience;
  }

  .experience-list {
    grid-area: experience-list;
    display: grid;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .experience-list, 
  .experience-list dl * {
    text-align: left;
  }

  .experience-list dt,
  .experience-list dd {
    padding-bottom: 1rem;
    padding-left: 6rem;
  }

  .experience-list dd {
    padding-bottom: 2rem;
  }

  .experience-list p {
    margin: 0;
    padding: 0 6rem;
    padding-bottom: 1rem;
  }

}

@media only print and (min-width: 320px) {

  .header {
    height: 9rem;
  }

  .header h1 {
    font-size: 24pt;
    letter-spacing: 0.3em;
  }

  .header h3 {
    font-size: 16pt;
    letter-spacing: 0.9em;
  }

  .profile, .career,
  .education, .skills,
  .experience {
    font-size: 11pt;
    height: 3rem;
  }

  .profile-list dl *,
  .career-list, .education-list,
  .skills-list, .experience-list {
    font-size: 12pt;
  }

  .profile-list {
    height: 16rem;
  }

  .career {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .career-list {
    margin-top: 0;
    padding-top: 0;
    height: 23rem;
  }

  .education-list {
    height: 13rem;
  }

  .skills-list {
    height: 30rem;
    text-align: left;
  }

  .skills-list ul:first-child {
    column-count: 2;
    padding: 0 1rem;
      
  }

  .skills-list ul ul {
    list-style-type: "- ";
    margin-left: 0;
    padding-left: 2rem;
  }

  .skills-list ul li:nth-child(4) ul li:nth-child(4)::after {
    content: "";
    display: block;
    margin-top: 1.5rem;
    clear: both;
  }

  .experience-list {
    padding: 0;
    margin: 0;
    height: 28rem;
  } 

  .experience-list, 
  .experience-list dl * {
    text-align: left;
    padding-left: 2rem;
  }

  .experience-list dt,
  .experience-list dd {
    padding-bottom: 1rem;
  }

  .experience-list dd {
    padding-bottom: 1rem;
  }

  .experience-list p {
    margin: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1rem;
    text-align: justify;
  }

}