:root {
  --font-size-default: 17px;
  --font-size-default-hover: calc(var(--font-size-default) + 1px);
  --font-size-nav: 18px;
  --font-size-subtitle: 20px;
  --font-size-title: calc(var(--font-size-subtitle) + 5px);
  --font-size-big-title: calc(var(--font-size-subtitle) + 12px);
  --font-size-icon: 24px;
  --font-size-icon-download: 20px;
  --font-size-icons-skills: 45px;
  --font-size-icons-workexperience: 24px;
  --font-size-icons-timeline: 24px;
  --font-size-icons-controls: 20px;
  --dimensions-div-icons-skills: 50%;
  --dimensions-div-icons-workexperience: calc(var(--font-size-icons-workexperience) * 2);
  --dimensions-div-icons-timeline: calc(var(--font-size-icons-timeline) * 2);
  --dimensions-div-icons-controls: 55px;
  --photo-principal: 160px;
  --photo-height-portfolio: 300px;
  --line-height-default: 26px;
  --width-controls: 100%;
  --height-controls: 80px;
  --padding-bottom-container-default: 34px;
  --margin-bottom-container-default: 34px;
  --gap-portfolio-list: 20px;
  --color-primary: #202948;
  --color-secondary: #273dae;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-1: #ffffff;
  --color-icon: #ffffff;
  --color-timeline: #999999;
  --color-item-title: #ffffff;
  --color-item-subtitle: #cccccc;
  --color-portfolio-item-bg: #888888;
  --color-portfolio-item: #fff;
  --color-portfolio-item-disable: #dddddd;
  --br-small: 10px;
  --br-circle: 50%;
  --box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  --transition-1: all 0.4s ease-in-out;
}

.light-mode {
  --color-primary: #ffffff;
  --color-secondary: #273dae;
  --color-timeline: #273dae;
  --color-text-1: #000000;
  --color-item-title: #000000;
  --color-item-subtitle: #5e5e5e;
  --color-portfolio-item-bg: #cccccc;
  --color-portfolio-item: #000;
  --color-portfolio-item-disable: #525252;
}

@media (max-width: 310px) {
  :root {
    --dimensions-div-icons-skills: 100%;
  }
}
@media (min-width: 320px) {
  :root {
    --photo-principal: 60vw;
  }
}
@media (min-width: 650px) {
  :root {
    --photo-principal: 40vw;
  }
}
@media (min-width: 800px) {
  :root {
    --font-size-default: 25px;
    --font-size-default-hover: 27px;
    --font-size-subtitle: 26px;
    --font-size-title: 35px;
    --font-size-big-title: 40px;
    --font-size-icon-download: 30px;
    --font-size-icons-skills: 55px;
    --font-size-icons-timeline: 28px;
    --font-size-icons-workexperience: 28px;
    --dimensions-div-icons-skills: 33%;
    --width-controls: 50px;
    --photo-principal: 35vw;
    --line-height-default: 32px;
  }
}
@media (min-width: 950px) {
  :root {
    --dimensions-div-icons-skills: 20%;
  }
}

/*About*/
.about-stats {
  padding-bottom: var(--padding-bottom-container-default);
}

.text-about span {
  display: block;
  margin: auto;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-title);
  color: var(--color-secondary);
}
.text-about p {
  line-height: var(--line-height-default);
  padding: 17px 40px;
  margin-bottom: 17px;
}

.skill-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 0 20px;
}

.skill-category h3 {
  text-align: center;
  font-size: var(--font-size-title);
  color: var(--color-text-1);
  margin-bottom: 1rem;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: auto;
  text-align: center;
}
.skill-item i {
  font-size: var(--font-size-icons-skills);
  color: var(--color-text-1);
}
.skill-item .custom-icon {
  width: var(--font-size-icons-skills);
  height: var(--font-size-icons-skills);
}
.skill-item span {
  margin-top: 8px;
  font-size: var(--font-size-default);
  color: var(--color-text-1);
}

.custom-icon-light {
  display: none;
}

.custom-icon-dark {
  display: inline-block;
}

.light-mode .custom-icon-light {
  display: inline-block;
}
.light-mode .custom-icon-dark {
  display: none;
}

.timeline-container {
  margin-bottom: var(--margin-bottom-container-default);
}

.timeline-item {
  position: relative;
  margin: 17px 0px 25px 34px;
  border-left: 1px solid var(--color-timeline);
}
.timeline-item h5 {
  display: block;
  padding: 16px;
  text-transform: uppercase;
  font-size: var(--font-size-subtitle);
  font-weight: normal;
  text-align: center;
}
.timeline-item h5 span {
  display: block;
  color: var(--color-item-subtitle);
  font-weight: 500;
  font-size: var(--font-size-default);
  text-transform: none;
}
.timeline-item p {
  white-space: pre-line;
}

.tl-icon {
  display: block;
  width: var(--dimensions-div-icons-timeline);
  height: var(--dimensions-div-icons-timeline);
  position: absolute;
  margin: auto;
  left: calc(-1 * var(--font-size-icons-timeline));
  top: -9px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  text-align: center;
}
.tl-icon i {
  display: inline-block;
  font-size: var(--font-size-icons-timeline);
  line-height: var(--dimensions-div-icons-timeline);
  margin: auto;
  color: var(--color-white);
}

.tl-duration {
  display: inline-block;
  padding: 3px 9.6px;
  margin-left: var(--dimensions-div-icons-timeline);
  font-weight: 500;
  border-radius: 15px;
  font-size: var(--font-size-default);
  text-transform: capitalize;
  background-color: var(--color-timeline);
  color: #ffffff;
}

.tl-text {
  font-size: var(--font-size-default);
  text-align: left;
  padding: 0px 30px;
  margin-right: 16px;
}

.workexperience-container {
  margin-bottom: var(--margin-bottom-container-default);
}

.workexperience-item {
  position: relative;
  margin: 17px 0px 25px 34px;
  border-left: 1px solid var(--color-timeline);
}
.workexperience-item h5 {
  display: block;
  padding: 16px;
  text-transform: uppercase;
  font-size: var(--font-size-subtitle);
  font-weight: normal;
  text-align: center;
}
.workexperience-item h5 span {
  display: block;
  color: var(--color-item-subtitle);
  font-weight: 500;
  font-size: var(--font-size-default);
  text-transform: none;
}
.workexperience-item p {
  white-space: pre-line;
}

.we-icon {
  display: block;
  width: var(--dimensions-div-icons-workexperience);
  height: var(--dimensions-div-icons-workexperience);
  position: absolute;
  margin: auto;
  left: calc(-1 * var(--font-size-icons-workexperience));
  top: -9px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  text-align: center;
}
.we-icon i {
  display: inline-block;
  font-size: var(--font-size-icons-workexperience);
  line-height: var(--dimensions-div-icons-workexperience);
  margin: auto;
  color: var(--color-icon);
}

.we-duration {
  display: inline-block;
  padding: 3px 9.6px;
  margin-left: var(--dimensions-div-icons-workexperience);
  font-weight: 500;
  border-radius: 15px;
  font-size: var(--font-size-default);
  text-transform: capitalize;
  background-color: var(--color-timeline);
  color: #ffffff;
}

.we-text {
  font-size: var(--font-size-default);
  text-align: left;
  padding: 0px 30px;
  margin-right: 16px;
}

.timeline-container {
  margin-bottom: calc(var(--height-controls) - 30px);
}

#item-experience {
  text-align: center;
}

.light-mode .tl-duration {
  background-color: var(--color-timeline);
}
.light-mode .we-icon i, .light-mode .tl-icon i {
  color: var(--color-icon);
}

@media (max-width: 400px) {
  .text-about p {
    padding: 17px;
  }
}
@media (max-width: 310px) {
  .skill-container {
    justify-content: center;
  }
}
@media (min-width: 800px) {
  .timeline-item {
    margin-left: 20px;
  }
  .workexperience-item {
    margin-left: 20px;
  }
  .text-about p {
    padding-right: 5px;
  }
  .skill-item {
    flex-basis: calc(var(--dimensions-div-icons-skills) - 7px);
  }
}/*# sourceMappingURL=about-me-section.css.map */