:root {
  --background: hsl(246, 6.0%, 9.0%);
  --element: hsl(241, 5.0%, 14.3%);
  --element-hover: hsl(242, 4.9%, 16.5%);
  --element-hover-border: hsl(247, 4.8%, 32.5%);
  --low-contrast: hsl(253, 4.0%, 63.7%);
  --high-contrast: hsl(256, 6.0%, 93.2%);
  --brand-solid: hsl(292, 45.0%, 51.0%);
  --brand-high-contrast: hsl(296, 74.0%, 95.7%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(300, 20.0%, 99.0%);
    --element: hsl(294, 5.5%, 95.3%);
    --element-hover: hsl(289, 4.7%, 93.3%);
    --element-hover-border: hsl(255, 3.7%, 78.8%);
    --low-contrast: hsl(252, 4.0%, 44.8%);
    --high-contrast: hsl(260, 25.0%, 11.0%);
    --brand-solid: hsl(292, 45.0%, 51.0%);
    --brand-high-contrast: hsl(291, 66.0%, 14.0%);
  }
}
html {
  background-color: var(--background);
  color: var(--high-contrast);
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Merriweather Sans", sans-serif;
  scroll-behavior: smooth;
}

/* Metrics */
.profile-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.profile-card > .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 128px;
  border: 4px solid var(--brand-solid);
}
.profile-card > .image-container > img {
  width: 94%;
  height: 94%;
  object-fit: cover;
  border-radius: inherit;
  user-select: none;
  pointer-events: none;
}
.profile-card > strong {
  margin-top: 20px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
}
.profile-card > span {
  margin-top: 5px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: var(--low-contrast);
}

.info-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.info-card > .info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 40px;
  color: var(--high-contrast);
  stroke: var(--low-contrast);
}
.info-card > .info-item > svg {
  width: 24px;
  height: 24px;
}
.info-card > .info-item:is(a) {
  text-decoration: none;
  outline: 2px solid transparent;
  transition: background-color 150ms ease-out, outline-color 150ms ease-out;
}
.info-card > .info-item:is(a):hover, .info-card > .info-item:is(a):focus {
  background-color: var(--element-hover);
}
.info-card > .info-item:is(a):focus-visible {
  outline-color: var(--element-hover-border);
}

.techs-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 20px;
}
.techs-card > header {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
.techs-card > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  padding: 0 10px;
}
.techs-card > ul > li {
  list-style: none;
  padding: 0 10px;
  border-radius: 24px;
  background-color: var(--brand-solid);
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  font-weight: 700;
  color: var(--brand-high-contrast);
}

.xp-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 20px;
}
.xp-card > header {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
.xp-card > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  padding: 0 20px;
}
.xp-card > ul > li {
  margin-left: 10px;
  color: var(--low-contrast);
}
.xp-card > ul > li > strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.xp-card > ul > li > span {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
}
.xp-card > ul > li > p {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}

.education-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 20px;
}
.education-card > header {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
.education-card > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  padding: 0 20px;
}
.education-card > ul > li {
  margin-left: 10px;
  color: var(--low-contrast);
}
.education-card > ul > li > strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.education-card > ul > li > span {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
}
.education-card > ul > li > p {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}

.projects-header-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
.projects-header-card > strong {
  font-size: 20px;
  line-height: 32px;
}
.projects-header-card > a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 0 20px;
  margin-right: -2.5px;
  height: 32px;
  font-size: 14px;
  line-height: 24px;
  color: var(--low-contrast);
  text-decoration: none;
  outline: 2px solid transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
}
.projects-header-card > a:hover, .projects-header-card > a:focus {
  background-color: var(--element-hover);
  color: var(--high-contrast);
}
.projects-header-card > a:focus-visible {
  outline-color: var(--element-hover-border);
}

.projects-grid-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media screen and (max-width: 1172px) {
  .projects-grid-card {
    grid-template-columns: 1fr;
  }
}
.projects-grid-card > a {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  text-decoration: none;
  padding: 0;
  text-align: start;
  outline: 2px solid transparent;
  transition: outline-color 150ms ease-out;
}
.projects-grid-card > a:hover > div, .projects-grid-card > a:focus > div {
  background-color: var(--element-hover);
}
.projects-grid-card > a:focus-visible {
  outline-color: var(--element-hover-border);
}
.projects-grid-card > a > div {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 20px;
  padding: 30px;
  color: var(--high-contrast);
  stroke: var(--high-contrast);
  border-radius: inherit;
  transition: background-color 150ms ease-out;
}
.projects-grid-card > a > div > header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.projects-grid-card > a > div > header > strong {
  font-size: 16px;
  line-height: 24px;
}
.projects-grid-card > a > div > p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--low-contrast);
}
.projects-grid-card > a > div > footer {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--low-contrast);
  stroke: var(--low-contrast);
}
.projects-grid-card > a > div > footer > .info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.projects-grid-card > a > div > footer > .info > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.projects-grid-card > a > div > footer > .info > div > span {
  font: 14px;
  line-height: 20px;
  font-weight: 400;
}
.projects-grid-card > a > div > footer > .lang {
  display: flex;
  align-items: center;
  gap: 10px;
}
.projects-grid-card > a > div > footer > .lang > .dot {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 2px solid var(--low-contrast);
}
.projects-grid-card > a > div > footer > .lang > .dot.typescript {
  background-color: #2b7489;
}
.projects-grid-card > a > div > footer > .lang > .dot.javascript {
  background-color: #d6d304;
}
.projects-grid-card > a > div > footer > .lang > .dot.html {
  background-color: #e34c26;
}
.projects-grid-card > a > div > footer > .lang > .dot.scss {
  background-color: #c6538c;
}
.projects-grid-card > a > div > footer > .lang > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.posts-header-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
.posts-header-card > strong {
  font-size: 20px;
  line-height: 32px;
}

.posts-card {
  background-color: var(--element);
  padding: 20px;
  box-shadow: 2px 2px 2px 1px hsla(0deg, 0%, 0%, 0.09);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

body {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
}
@media screen and (max-width: 1366px) {
  body {
    max-width: 1172px;
  }
}
@media screen and (max-width: 1172px) {
  body {
    max-width: 970px;
  }
}
@media screen and (max-width: 970px) {
  body {
    max-width: 767px;
  }
}
body > main {
  display: flex;
  gap: 40px;
  padding: 20px;
}
@media screen and (max-width: 970px) {
  body > main {
    flex-direction: column;
    gap: 20px;
  }
}
body > main > aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 348px;
}
@media screen and (max-width: 970px) {
  body > main > aside {
    width: unset;
    gap: 20px;
  }
}
body > main > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media screen and (max-width: 970px) {
  body > main > section {
    gap: 20px;
  }
}
body > footer {
  align-self: center;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: var(--low-contrast);
  padding: 20px 0;
}
body > footer > a {
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--low-contrast);
  font-weight: 500;
  outline: 2px solid transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
}
body > footer > a:hover, body > footer > a:focus {
  background-color: var(--element-hover);
  color: var(--high-contrast);
}
body > footer > a:focus-visible {
  outline-color: var(--element-hover-border);
}

/*# sourceMappingURL=main.css.map */