.loading-icon-programmer {
  position: relative;
}
.loading-icon-programmer svg {
  position: relative;
  z-index: 1;
}

.loading-icon-programmer-thought-bubbles,
.loading-icon-programmer-idea-bubble,
.loading-icon-programmer-gears,
.loading-icon-programmer-success {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
}
.loading-icon-programmer-thought-bubbles path,
.loading-icon-programmer-idea-bubble path,
.loading-icon-programmer-gears path,
.loading-icon-programmer-success path {
  transform: scale(1);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.loading-icon-programmer-success {
  opacity: 0;
  transform: scale(0);
}

.loading-icon-programmer-text-dots {
  transform-box: fill-box;
}
.loading-icon-programmer-text-dots circle {
  transform-origin: center;
}

.loading-icon-regular-circle-spinner {
  animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
.loading-icon-regular-circle-spinner .path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}

#eIH7cNo3Qf54_to {
  animation: eIH7cNo3Qf54_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf54_to__to {
  0% {
    transform: translate(201.770002px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  22.5% {
    transform: translate(78.490002px, 55.830002px);
    animation-timing-function: step-end;
  }
  22.727273% {
    transform: translate(201.770002px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  45.227273% {
    transform: translate(78.490002px, 55.830002px);
    animation-timing-function: step-end;
  }
  45.454545% {
    transform: translate(201.770002px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  67.954545% {
    transform: translate(78.490002px, 55.830002px);
    animation-timing-function: step-end;
  }
  68.181818% {
    transform: translate(201.770002px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  90.681818% {
    transform: translate(78.490002px, 55.830002px);
  }
  100% {
    transform: translate(78.490002px, 55.830002px);
  }
}
#eIH7cNo3Qf54_tr {
  animation: eIH7cNo3Qf54_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf54_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf54 {
  animation: eIH7cNo3Qf54_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf54_c_o {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  11.363636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  22.5% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  22.727273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  34.090909% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  45.227273% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  45.454545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  56.818182% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  67.954545% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  68.181818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  79.545455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  90.681818% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf55_to {
  animation: eIH7cNo3Qf55_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf55_to__to {
  0% {
    transform: translate(201.769999px, 163.930001px);
  }
  2.272727% {
    transform: translate(201.769999px, 163.930001px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  24.772727% {
    transform: translate(81.939999px, 103.77px);
    animation-timing-function: step-end;
  }
  25% {
    transform: translate(201.769999px, 163.930001px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  47.5% {
    transform: translate(81.939999px, 103.77px);
    animation-timing-function: step-end;
  }
  47.727273% {
    transform: translate(201.769999px, 163.930001px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  70.227273% {
    transform: translate(81.939999px, 103.77px);
    animation-timing-function: step-end;
  }
  70.454545% {
    transform: translate(201.769999px, 163.930001px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  92.954545% {
    transform: translate(81.939999px, 103.77px);
  }
  100% {
    transform: translate(81.939999px, 103.77px);
  }
}
#eIH7cNo3Qf55_tr {
  animation: eIH7cNo3Qf55_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf55_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf55 {
  animation: eIH7cNo3Qf55_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf55_c_o {
  0% {
    opacity: 1;
  }
  2.272727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  13.636364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  24.772727% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  25% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  36.363636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  47.5% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  47.727273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  59.090909% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  70.227273% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  70.454545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  81.818182% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  92.954545% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf56_to {
  animation: eIH7cNo3Qf56_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf56_to__to {
  0% {
    transform: translate(201.77px, 163.93px);
  }
  5.681818% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  28.181818% {
    transform: translate(109px, 77px);
    animation-timing-function: step-end;
  }
  28.409091% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  50.909091% {
    transform: translate(109px, 77px);
    animation-timing-function: step-end;
  }
  51.136364% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  73.636364% {
    transform: translate(109px, 77px);
    animation-timing-function: step-end;
  }
  73.863636% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  96.363636% {
    transform: translate(109px, 77px);
  }
  100% {
    transform: translate(109px, 77px);
  }
}
#eIH7cNo3Qf56_tr {
  animation: eIH7cNo3Qf56_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf56_tr__tr {
  0% {
    transform: rotate(2880deg);
  }
  4.545455% {
    transform: rotate(2880deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf56 {
  animation: eIH7cNo3Qf56_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf56_c_o {
  0% {
    opacity: 1;
  }
  5.681818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  17.045455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  28.181818% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  28.409091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  39.772727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  50.909091% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  51.136364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  62.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  73.636364% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  73.863636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  85.227273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  96.363636% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf57_to {
  animation: eIH7cNo3Qf57_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf57_to__to {
  0% {
    transform: translate(201.77px, 163.93px);
  }
  11.363636% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  33.863636% {
    transform: translate(137.340004px, 50.330002px);
    animation-timing-function: step-end;
  }
  34.090909% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  56.590909% {
    transform: translate(137.340004px, 50.330002px);
    animation-timing-function: step-end;
  }
  56.818182% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  79.318182% {
    transform: translate(137.340004px, 50.330002px);
    animation-timing-function: step-end;
  }
  79.545455% {
    transform: translate(201.77px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  100% {
    transform: translate(143.197276px, 60.657275px);
  }
}
#eIH7cNo3Qf57_tr {
  animation: eIH7cNo3Qf57_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf57_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf57 {
  animation: eIH7cNo3Qf57_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf57_c_o {
  0% {
    opacity: 1;
  }
  11.363636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  22.727273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  33.863636% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  34.090909% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  45.454545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  56.590909% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  56.818182% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  68.181818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  79.318182% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  79.545455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  90.909091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  99.772727% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf512_to {
  animation: eIH7cNo3Qf512_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf512_to__to {
  0% {
    transform: translate(201.769988px, 163.930002px);
  }
  7.954545% {
    transform: translate(201.769988px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  30.454545% {
    transform: translate(294.549988px, 55.830002px);
    animation-timing-function: step-end;
  }
  30.681818% {
    transform: translate(201.769988px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  53.181818% {
    transform: translate(294.549988px, 55.830002px);
    animation-timing-function: step-end;
  }
  53.409091% {
    transform: translate(201.769988px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  75.909091% {
    transform: translate(294.549988px, 55.830002px);
    animation-timing-function: step-end;
  }
  76.136364% {
    transform: translate(201.769988px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  98.636364% {
    transform: translate(294.549988px, 55.830002px);
  }
  100% {
    transform: translate(294.549988px, 55.830002px);
  }
}
#eIH7cNo3Qf512_tr {
  animation: eIH7cNo3Qf512_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf512_tr__tr {
  0% {
    transform: rotate(2880deg);
  }
  4.545455% {
    transform: rotate(2880deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf512 {
  animation: eIH7cNo3Qf512_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf512_c_o {
  0% {
    opacity: 1;
  }
  7.954545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  19.318182% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  30.454545% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  30.681818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  42.045455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  53.181818% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  53.409091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  64.772727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  75.909091% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  76.136364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  87.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  98.636364% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf513_to {
  animation: eIH7cNo3Qf513_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf513_to__to {
  0% {
    transform: translate(201.770003px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  22.5% {
    transform: translate(340.925003px, 214.07px);
    animation-timing-function: step-end;
  }
  22.727273% {
    transform: translate(201.770003px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  45.227273% {
    transform: translate(340.925003px, 214.07px);
    animation-timing-function: step-end;
  }
  45.454545% {
    transform: translate(201.770003px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  67.954545% {
    transform: translate(340.925003px, 214.07px);
    animation-timing-function: step-end;
  }
  68.181818% {
    transform: translate(201.770003px, 163.93px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  90.681818% {
    transform: translate(340.925003px, 214.07px);
  }
  100% {
    transform: translate(340.925003px, 214.07px);
  }
}
#eIH7cNo3Qf513_tr {
  animation: eIH7cNo3Qf513_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf513_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf513 {
  animation: eIH7cNo3Qf513_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf513_c_o {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  11.363636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  22.5% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  22.727273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  34.090909% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  45.227273% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  45.454545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  56.818182% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  67.954545% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  68.181818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  79.545455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  90.681818% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf514_to {
  animation: eIH7cNo3Qf514_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf514_to__to {
  0% {
    transform: translate(201.769987px, 163.929997px);
  }
  5.681818% {
    transform: translate(201.769987px, 163.929997px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  28.181818% {
    transform: translate(301.189987px, 171.589996px);
    animation-timing-function: step-end;
  }
  28.409091% {
    transform: translate(201.769987px, 163.929997px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  50.909091% {
    transform: translate(301.189987px, 171.589996px);
    animation-timing-function: step-end;
  }
  51.136364% {
    transform: translate(201.769987px, 163.929997px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  73.636364% {
    transform: translate(301.189987px, 171.589996px);
    animation-timing-function: step-end;
  }
  73.863636% {
    transform: translate(201.769987px, 163.929997px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  96.363636% {
    transform: translate(301.189987px, 171.589996px);
  }
  100% {
    transform: translate(301.189987px, 171.589996px);
  }
}
#eIH7cNo3Qf514_tr {
  animation: eIH7cNo3Qf514_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf514_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf514 {
  animation: eIH7cNo3Qf514_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf514_c_o {
  0% {
    opacity: 1;
  }
  5.681818% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  17.045455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  28.181818% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  28.409091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  39.772727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  50.909091% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  51.136364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  62.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  73.636364% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  73.863636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  85.227273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  96.363636% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf515_to {
  animation: eIH7cNo3Qf515_to__to 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf515_to__to {
  0% {
    transform: translate(201.77px, 163.930002px);
  }
  9.090909% {
    transform: translate(201.77px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  31.477273% {
    transform: translate(283px, 248.720001px);
    animation-timing-function: step-end;
  }
  31.590909% {
    transform: translate(201.77px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  54.318182% {
    transform: translate(283px, 248.720001px);
    animation-timing-function: step-end;
  }
  54.545455% {
    transform: translate(201.77px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  77.272727% {
    transform: translate(201.77px, 163.930002px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  100% {
    transform: translate(283px, 248.720001px);
  }
}
#eIH7cNo3Qf515_tr {
  animation: eIH7cNo3Qf515_tr__tr 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf515_tr__tr {
  0% {
    transform: rotate(0deg);
  }
  4.545455% {
    transform: rotate(0deg);
  }
  95.454545% {
    transform: rotate(2880deg);
  }
  100% {
    transform: rotate(2880deg);
  }
}
#eIH7cNo3Qf515 {
  animation: eIH7cNo3Qf515_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf515_c_o {
  0% {
    opacity: 1;
  }
  20.454545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  31.477273% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  31.590909% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  42.954545% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  54.318182% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  54.545455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  65.909091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  77.272727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  88.636364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf516_tr {
  animation: eIH7cNo3Qf516_tr__tr 2300ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf516_tr__tr {
  0% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}
#eIH7cNo3Qf517_ts {
  animation: eIH7cNo3Qf517_ts__ts 2300ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf517_ts__ts {
  0% {
    transform: translate(199.999992px, 161.999992px) scale(0.7);
    animation-timing-function: linear;
  }
  50% {
    transform: translate(199.999992px, 161.999992px) scale(1.153668, 1.153668);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(199.999992px, 161.999992px) scale(0.7);
    animation-timing-function: linear;
  }
}
#eIH7cNo3Qf518 {
  animation: eIH7cNo3Qf518_c_o 8800ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf518_c_o {
  0% {
    opacity: 1;
  }
  17.045455% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  23.863636% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  28.409091% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  35.227273% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  39.772727% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  46.590909% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  51.136364% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  57.954545% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  62.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  69.318182% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  73.863636% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  80.681818% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  85.227273% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  }
  92.045455% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#eIH7cNo3Qf562_tr {
  animation: eIH7cNo3Qf562_tr__tr 24000ms linear infinite normal forwards;
}

@keyframes eIH7cNo3Qf562_tr__tr {
  0% {
    transform: translate(200px, 162.16px) rotate(-90deg);
  }
  100% {
    transform: translate(200px, 162.16px) rotate(2790deg);
  }
}
.coming-soon-banner-coming-soon-banner-container {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
}

.coming-soon-banner-coming-soon-banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.coming-soon-banner-coming-soon-banner-bg svg {
  width: 100%;
  max-height: 100%;
  min-height: 100%;
}

.coming-soon-banner-coming-soon-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 100%;
  padding: 0 10%;
  z-index: 1;
}
.coming-soon-banner-coming-soon-banner h3 {
  margin: 0;
  font-weight: 500;
  padding: 0;
}
.coming-soon-banner-coming-soon-banner h6 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.coming-soon-banner-coming-soon-banner-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fallback-inner-wrapper .loading-icon-programmer {
  width: 40%;
}

.home-pg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.home-pg-container > * {
  flex-grow: 1;
  width: 100%;
  max-width: 1500px;
}

@media (min-width: 1200px) {
  #navbar {
    box-sizing: border-box;
    padding: 1.125rem;
    max-width: 1500px;
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  #navbar #navbar-links {
    color: #afafaf;
  }
  #navbar #navbar-links svg {
    stroke: #afafaf;
  }
  #navbar #navbar-linkedIn {
    color: #afafaf;
  }
  #navbar-logo {
    display: flex;
    height: 100%;
    align-items: center;
    text-decoration: none;
  }
  #navbar-logo > span {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
  }
  #navbar-links {
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  #navbar-links > button, #navbar-links > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    margin-right: 2.5em;
  }
  #navbar-links > button:first-child, #navbar-links > a:first-child {
    margin-left: 1.25em;
  }
  #navbar-links > button:last-child, #navbar-links > a:last-child {
    margin-right: 0;
  }
  #navbar-linkedIn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1/1;
  }
  #navbar-linkedIn a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    align-items: center;
    display: flex;
    height: 70%;
    width: 70%;
  }
  #navbar-linkedIn a svg {
    width: 100%;
    height: 100%;
  }
  #navbar-open-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
  }
  #navbar.color #navbar-links {
    color: #f2f2f2;
  }
  #navbar.color #navbar-links svg {
    stroke: #f2f2f2;
  }
  #navbar.color #navbar-linkedIn {
    color: #f2f2f2;
  }
  #navbar.color #navbar-open-drawer-button {
    color: #f2f2f2;
  }
  #navbar-close-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
    height: 2.2em;
    width: 2.2em;
  }
  #navbar-drawer .MuiPaper-root {
    align-items: end;
    align-items: flex-end;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
  }
  #navbar-drawer #navbar-links {
    flex-direction: column;
    justify-content: unset;
    align-items: center;
    flex-grow: unset;
    height: auto;
    box-sizing: border-box;
    min-width: 200px;
    color: #f2f2f2;
  }
  #navbar-drawer #navbar-links a,
  #navbar-drawer #navbar-links button {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.3em;
  }
  #navbar-links {
    font-size: 1.625rem;
  }
  #navbar-links svg {
    right: -0.5em;
    position: absolute;
    vertical-align: top;
    display: inline;
    line-height: 1;
    width: 0.8em;
    height: 1.5em;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: 46;
    transition: stroke-dashoffset 0.15s linear 0s;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.5rem;
  }
  #footer-inner > * {
    margin-bottom: 1.5rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.5rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 1.125rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.5rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  #home-pg-intro-banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  #home-pg-intro-banner > * {
    box-sizing: border-box;
    padding-top: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 2.25rem;
    padding-left: 2.25rem;
  }
  .home-pg-intro-banner-img-container {
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper {
    display: block;
    box-sizing: border-box;
    width: 21.875rem;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #d24040;
    overflow: hidden;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    background-size: cover;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    background-position: top;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    box-sizing: border-box;
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 13%;
    width: 100%;
    height: 100%;
    background-size: 74%;
    background-repeat: no-repeat;
    background-position-y: -21%;
    background-position-x: 50%;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-position: top;
  }
  .home-pg-intro-banner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    color: #f2f2f2;
    overflow: hidden;
  }
  .home-pg-intro-banner-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .home-pg-intro-banner-title h2 {
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.35em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h2 > * {
    padding-right: 0.4em;
  }
  .home-pg-intro-banner-title h2 > *:last-child {
    padding-right: 0;
  }
  .home-pg-intro-banner-title h3 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h3 > * {
    padding-right: 0.3em;
  }
  .home-pg-intro-banner-title h3 > :nth-child(2) {
    margin-bottom: 0;
    color: #ffc83a;
  }
  .home-pg-intro-banner-title > * {
    padding-bottom: 1.5rem;
  }
  .home-pg-intro-banner-sub-content {
    animation: 2s ease-in-out 0s fade-up;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  .home-pg-intro-banner-sub-content p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.93em;
    color: #f2f2f2;
    margin: 0;
    width: 100%;
    padding-bottom: 2.25rem;
  }
  .home-pg-intro-banner-sub-content button {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.5rem;
  }
  .home-pg-intro-banner-sub-content button::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ff5d5d;
    z-index: 0;
  }
  .home-pg-intro-banner-sub-content button > .action-btn-content {
    border: 0.083em solid #ff5d5d;
    color: #ff5d5d;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  #project-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
  }
  .project-banner-text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: #f2f2f2;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 4.5rem;
    box-sizing: border-box;
    width: 100%;
  }
  .project-banner-text-content > h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-text-content > h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-text-content > h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-text-content > p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2em;
    margin: 0;
    padding-top: 2.25rem;
  }
  @keyframes element-appear {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .project-banner-text-content > p.visible {
    opacity: 1;
    animation: 3s ease-in-out 0s element-appear;
  }
  .project-banner-text-content > p .project-banner-ani-container {
    vertical-align: middle;
    position: relative;
    margin-top: -0.2em;
    min-width: 5em;
    min-height: 2em;
  }
  .project-banner-text-content > p .project-banner-ani-container::after {
    content: "";
    position: absolute;
    top: 0.25em;
    height: 1.5em;
    width: 1px;
    background: #f2f2f2;
  }
  .project-banner-featured {
    display: flex;
    justify-content: start;
    position: relative;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .project-banner-featured > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .project-banner-featured > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .project-banner-featured-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .project-banner-featured-container > * {
    margin-bottom: 9rem;
  }
  .project-banner-featured-container > :last-child {
    margin-bottom: 0;
  }
  .project-banner-featured-container .project-item {
    display: flex;
    width: 100%;
    min-height: 25rem;
    flex-direction: row;
  }
  .project-banner-featured-container .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 3rem;
    width: 35%;
  }
  .project-banner-featured-container .project-item-content.project-item-right-orientation {
    padding-left: 3rem;
    padding-right: 0;
  }
  .project-banner-featured-container .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-featured-container .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-featured-container .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-featured-container .project-item-title:after {
    height: 0.25em;
  }
  .project-banner-featured-container .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  .project-banner-featured-container .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  .project-banner-featured-container .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .project-banner-featured-container .project-item-labels > *:last-child {
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  .project-banner-featured-container .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  .project-banner-featured-container .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  .project-banner-featured-container .project-item-content-slim .project-item-description {
    padding-top: 1.75rem;
  }
  .project-banner-featured-container .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  .project-banner-featured-container .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.375rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  .project-banner-featured-container .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  .project-banner-featured-container .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  .project-banner-featured-container .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  .project-banner-featured-container .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 65%;
  }
  .project-banner-view-all-banner {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .project-banner-view-all-banner > p {
    font-size: 1.5rem;
    color: #f2f2f2;
    font-weight: 400;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 1.75rem;
    margin: 0;
  }
  .project-banner-view-all-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .project-banner-view-all-btn > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .project-banner-view-all-btn > a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .project-banner-view-all-btn > a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  #skills-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
  }
  #skills-banner-inner {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    width: 100%;
  }
  .skills-banner-media-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    padding-right: 2.25rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    width: 21.875rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container > svg {
    width: 100%;
    height: 100%;
  }
  .skills-banner-text-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-text-content h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .skills-banner-text-content h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .skills-banner-text-content h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .skills-banner-text-content p {
    padding-top: 2.25rem;
    color: #f2f2f2;
    line-height: 2em;
    margin: 0;
    width: 100%;
    font-size: 1.5rem;
    flex-grow: 1;
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    width: auto;
    display: block;
    justify-content: unset;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    padding-top: 2rem;
  }
  .skills-banner-text-content button > :first-child,
  .skills-banner-text-content a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .skills-banner-text-content button > :last-child,
  .skills-banner-text-content a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .skills-banner-skills-list {
    padding-top: 3.75rem;
    padding-bottom: 0rem;
    display: flex;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.5rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #about-me-pg {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
  #about-me-pg-inner-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .about-me-pg-text-header {
    width: 100%;
    color: #f2f2f2;
    display: flex;
    line-height: 1.625em;
    justify-content: center;
    font-size: 6rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 4.5rem;
  }
  .about-me-pg-text-header .about-me-pg-letters {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  .about-me-pg-text-header .about-me-pg-letters > * {
    padding-right: 0.5em;
  }
  .about-me-pg-text-header .about-me-pg-letters > *:last-child {
    padding-right: 0;
  }
  .about-me-pg-text-header .about-me-pg-letter {
    transform: rotateY(-90deg);
  }
  .about-me-pg-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-left: 3.75rem;
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(-80%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes fade-in {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  .about-me-pg-text-content > p {
    flex-grow: 1;
    opacity: 0;
    position: relative;
    margin: 0;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2.485em;
  }
  .about-me-pg-text-content > p.visible {
    opacity: 1;
    animation: 1s ease-in-out 0s fade-in;
    animation-delay: 0ms;
  }
  .about-me-pg-text-content > p span {
    line-height: 1em;
    font-size: 4rem;
    color: #ff5d5d;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .about-me-pg-action-btns {
    display: flex;
    flex-direction: column;
    margin-top: 4.5rem;
  }
  .about-me-pg-action-btns > a:first-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    margin-bottom: 0.35em;
  }
  .about-me-pg-action-btns > a:first-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:first-child > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-action-btns > a:last-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .about-me-pg-action-btns > a:last-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:last-child > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-media-content {
    position: relative;
    display: flex;
    align-items: start;
    width: 21.875rem;
    min-width: 21.875rem;
  }
  .about-me-pg-media-content > svg {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .about-me-pg-media-content > svg image {
    position: relative;
  }
  .about-me-pg-media-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
  #project-pg {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 4.5rem;
  }
  #project-pg-wave-bg {
    height: 52.125rem;
  }
  #project-pg-wave-bg #wave-bg-rotate-wave-project-wave {
    background: #d93a3a;
  }
  #project-pg-inner {
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    align-items: start;
    max-width: 1500px;
  }
  #project-pg-inner h2 {
    padding: 0.525em 0;
    justify-content: center;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6.75rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #project-pg-inner h2 > * {
    padding-right: 0.3em;
  }
  #project-pg-inner .full-pg-loading-icon {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 4.5rem;
  }
  #project-pg-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 40rem;
  }
  #project-pg-carousel .project-pg-carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #project-pg-carousel .project-pg-carousel-inner-wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 7.125rem;
  }
  #project-pg-carousel .swiper-wrapper {
    padding: 0;
    margin: 0;
  }
  #project-pg-carousel .swiper-slide {
    border: none;
    margin: 0;
    padding: 0;
    height: 40rem;
  }
  #project-pg-carousel .swiper-pagination {
    bottom: 0;
    height: auto;
  }
  #project-pg-carousel .swiper-pagination-bullet {
    border-color: #afafaf;
    border-style: solid;
    border-width: 0.21rem;
    width: 2.625rem;
    height: 2.625rem;
    margin: 0 1rem;
    aspect-ratio: 1/1;
    opacity: 1;
    background: transparent;
  }
  #project-pg-carousel .swiper-pagination-bullet-active {
    background-color: #afafaf;
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next-next {
    transform: scale(0.78);
  }
  .project-pg-slide {
    position: relative;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .project-pg-slide-inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .project-pg-slide-img-container {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .project-pg-slide-img-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.5%;
    width: 99%;
    height: 100%;
    background-color: #2e2e2e;
    z-index: 0;
  }
  .project-pg-slide-text-content {
    box-sizing: border-box;
    position: relative;
    padding: 2% 3%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 35%, rgb(30, 30, 30) 100%);
  }
  .project-pg-slide-first-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.02em;
    box-sizing: border-box;
  }
  .project-pg-slide-first-row h4 {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-first-row h4 > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-project-urls {
    display: flex;
    width: auto;
    margin-left: 3%;
    box-sizing: border-box;
    align-items: flex-end;
    align-items: end;
  }
  .project-pg-project-url {
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 1.625em;
    width: 1.625em;
    background-color: #3b3b3b;
    aspect-ratio: 1/1;
    color: #c5c5c5;
  }
  .project-pg-project-url:last-child {
    background-color: #d93a3a;
    color: #f2f2f2;
    margin-left: 0.3em;
  }
  .project-pg-project-url:last-child > svg {
    fill: #f2f2f2;
  }
  .project-pg-project-url > svg {
    position: relative;
    z-index: 1;
    height: 60%;
    width: auto;
  }
  .project-pg-slide-dates {
    padding-top: 0.875rem;
    text-decoration: none;
    justify-content: space-between;
    color: #afafaf;
    text-align: center;
    flex-wrap: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.625rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-dates > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-date {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .project-pg-slide-date:last-child {
    justify-content: flex-end;
  }
  .project-pg-explore-more-header {
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-explore-more-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-pg-explore-more-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-pg-explore-more-header {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  #project-pg-explore-more {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #project-pg-explore-more .project-item {
    display: flex;
    width: 100%;
    min-height: 25rem;
    flex-direction: row;
  }
  #project-pg-explore-more .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 3rem;
    width: 35%;
  }
  #project-pg-explore-more .project-item-content.project-item-right-orientation {
    padding-left: 3rem;
    padding-right: 0;
  }
  #project-pg-explore-more .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #project-pg-explore-more .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  #project-pg-explore-more .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  #project-pg-explore-more .project-item-title:after {
    height: 0.25em;
  }
  #project-pg-explore-more .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  #project-pg-explore-more .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  #project-pg-explore-more .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  #project-pg-explore-more .project-item-labels > *:last-child {
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  #project-pg-explore-more .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  #project-pg-explore-more .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  #project-pg-explore-more .project-item-content-slim .project-item-description {
    padding-top: 1.75rem;
  }
  #project-pg-explore-more .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  #project-pg-explore-more .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.375rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  #project-pg-explore-more .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  #project-pg-explore-more .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  #project-pg-explore-more .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  #project-pg-explore-more .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 65%;
  }
  #project-pg-explore-more > * {
    margin-bottom: 6.25rem;
  }
  #project-pg-explore-more > *:last-child {
    margin-bottom: 0;
  }
  #about-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-wave-bg {
    height: 48rem;
  }
  #about-pg-wave-bg #wave-bg-rotate-wave-intro-wave {
    background: linear-gradient(138.2deg, #ff5d5d 49.26%, #ffc83a 93.61%);
  }
  #about-pg-intro {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
  }
  #about-pg-intro-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-intro-inner > h2 {
    justify-content: center;
    padding: 0.525em 0;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6.75rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #about-pg-intro-inner > h2 > * {
    padding-right: 0.3em;
  }
  #about-pg-intro-inner::after {
    margin-top: 4.5rem;
    margin-bottom: 2.953125rem;
    content: "";
    width: 50%;
    height: 0.8em;
    background-color: #6b6b6b;
  }
  #about-pg-image-collage {
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }
  #about-pg-image-collage svg {
    width: 100%;
    margin: auto;
  }
  #about-pg-intro-text-content {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.375rem;
    line-height: 2.2em;
  }
  #about-pg-intro-text-content p {
    margin-bottom: 1em;
    margin-top: 0;
  }
  #about-pg-intro-text-content p:last-child {
    margin-bottom: 0;
  }
  #about-pg-intro-text-content a {
    text-decoration: none;
    color: #ffc83a;
  }
  #about-pg-intro-text-content .about-pg-text-first-letter {
    font-size: 3.3rem;
    line-height: 1em;
    color: #ffc83a;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #about-pg-education {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-top: 4.5rem;
    max-width: 1500px;
  }
  #about-pg-education-header {
    align-self: center;
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #about-pg-education-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  #about-pg-education-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  h2#about-pg-education-header {
    margin-bottom: 4.5rem;
  }
  #about-pg-education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-container-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #about-pg-education-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.5rem;
    width: 100%;
    align-self: center;
  }
  #about-pg-education-display .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  #about-pg-education-display .lazy-img-wrapper {
    background-size: cover;
  }
  #about-pg-education-display img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-display a {
    box-sizing: border-box;
    padding: 0;
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 12%;
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
  }
  #about-pg-education-display img {
    border-radius: 12%;
    object-fit: contain;
    object-position: center;
  }
  #about-pg-education-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #f2f2f2;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  #about-pg-education-action a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
    margin-top: 2.25rem;
  }
  #about-pg-education-action a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  #about-pg-education-action a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #contact-pg-inner {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-top: 3rem;
    padding-bottom: 4.5rem;
    flex-direction: row;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    color: #a6a6a6;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #contact-pg-inner > * {
    width: 100%;
  }
  #contact-pg-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .contact-pg-content-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-pg-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
  }
  .contact-pg-content-col:first-child {
    padding-right: 0.5em;
  }
  .contact-pg-content-col:last-child {
    padding-left: 0.5em;
  }
  .contact-pg-content-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  .contact-pg-content-col h4 > * {
    padding-right: 0.3em;
  }
  .contact-pg-content-col a {
    text-decoration: none;
  }
  .contact-pg-content-img {
    width: 100%;
    padding-top: 3rem;
  }
  .contact-pg-content-email-link {
    font-size: 1.125rem;
    color: #a6a6a6;
    line-height: 1.725em;
  }
  .contact-pg-content-resume-link {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .contact-pg-content-resume-link > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .contact-pg-content-resume-link > :last-child {
    font-size: 1.125rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg-form {
    box-sizing: border-box;
    margin-left: 1.5rem;
    border-radius: 1.5%;
    background-color: #232323;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-input {
    color: #a6a6a6;
  }
  #contact-pg-form .MuiInputLabel-root:focus,
  #contact-pg-form .MuiInputBase-input:focus {
    color: #ffc83a;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-root,
  #contact-pg-form .MuiInputBase-input {
    line-height: 2em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputLabel-root {
    font-weight: 600;
  }
  #contact-pg-form .MuiInputBase-input {
    height: 2em;
  }
  #contact-pg-form textarea.MuiInputBase-input {
    line-height: 1.675em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputBase-root::before {
    border-bottom-color: #a6a6a6;
  }
  #contact-pg-form .MuiInputBase-root::before.Mui-active, #contact-pg-form .MuiInputBase-root::before.Mui-focused, #contact-pg-form .MuiInputBase-root::before:focus {
    border-bottom-color: #ffc83a;
  }
  #contact-pg-form .Mui-focused,
  #contact-pg-form .Mui-active {
    color: #ffc83a;
  }
  #contact-pg-form .MuiFormHelperText-root.Mui-error {
    color: rgb(211, 47, 47);
  }
  #contact-pg-form > * {
    margin-top: 1.25rem;
  }
  #contact-pg-form > :first-child {
    margin-top: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.5rem;
    align-self: end;
    align-self: flex-end;
    margin: 0;
    margin-top: 2.875rem;
    margin-bottom: 0.26em;
    margin-right: 0.24em;
  }
  #contact-pg-form .contact-pg-contact-form-btn::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ffc83a;
    z-index: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn > .action-btn-content {
    border: 0.083em solid #ffc83a;
    color: #ffc83a;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  .contact-pg-contact-form-header {
    display: flex;
    width: 100%;
  }
  .contact-pg-contact-form-header h3 {
    align-self: end;
    color: #ffc83a;
    width: auto;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .contact-pg-contact-form-header h3 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .contact-pg-contact-form-header h3::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .contact-pg-contact-form-header p {
    margin: 0;
    padding: 0;
    padding-left: 4rem;
    font-size: 1.25rem;
    line-height: 1.625em;
    color: #ffc83a;
    flex-grow: 1;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .contact-pg-contact-form-row {
    display: flex;
    box-sizing: border-box;
  }
  .contact-pg-contact-form-row > :first-child {
    margin-right: 1rem;
  }
  .contact-pg-contact-form-row > :last-child {
    margin-left: 1rem;
  }
  .skills-pg-container {
    display: flex;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list {
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    width: 100%;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.5rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-pg-container .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #inner-page-wrapper {
    min-height: calc(100vh - 6rem);
    width: 100%;
  }
}
@media (max-width: 1200px) {
  #navbar {
    box-sizing: border-box;
    padding: 1.125rem;
    max-width: 1500px;
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  #navbar #navbar-links {
    color: #afafaf;
  }
  #navbar #navbar-links svg {
    stroke: #afafaf;
  }
  #navbar #navbar-linkedIn {
    color: #afafaf;
  }
  #navbar-logo {
    display: flex;
    height: 100%;
    align-items: center;
    text-decoration: none;
  }
  #navbar-logo > span {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
  }
  #navbar-links {
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  #navbar-links > button, #navbar-links > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    margin-right: 2.5em;
  }
  #navbar-links > button:first-child, #navbar-links > a:first-child {
    margin-left: 1.25em;
  }
  #navbar-links > button:last-child, #navbar-links > a:last-child {
    margin-right: 0;
  }
  #navbar-linkedIn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1/1;
  }
  #navbar-linkedIn a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    align-items: center;
    display: flex;
    height: 70%;
    width: 70%;
  }
  #navbar-linkedIn a svg {
    width: 100%;
    height: 100%;
  }
  #navbar-open-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
  }
  #navbar.color #navbar-links {
    color: #f2f2f2;
  }
  #navbar.color #navbar-links svg {
    stroke: #f2f2f2;
  }
  #navbar.color #navbar-linkedIn {
    color: #f2f2f2;
  }
  #navbar.color #navbar-open-drawer-button {
    color: #f2f2f2;
  }
  #navbar-close-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
    height: 2.2em;
    width: 2.2em;
  }
  #navbar-drawer .MuiPaper-root {
    align-items: end;
    align-items: flex-end;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
  }
  #navbar-drawer #navbar-links {
    flex-direction: column;
    justify-content: unset;
    align-items: center;
    flex-grow: unset;
    height: auto;
    box-sizing: border-box;
    min-width: 200px;
    color: #f2f2f2;
  }
  #navbar-drawer #navbar-links a,
  #navbar-drawer #navbar-links button {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.3em;
  }
  #navbar-links {
    font-size: 1.625rem;
  }
  #navbar-links svg {
    right: -0.5em;
    position: absolute;
    vertical-align: top;
    display: inline;
    line-height: 1;
    width: 0.8em;
    height: 1.5em;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: 46;
    transition: stroke-dashoffset 0.15s linear 0s;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.5rem;
  }
  #footer-inner > * {
    margin-bottom: 1.5rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.5rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 1.125rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.75rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.5rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  .fallback-inner-wrapper .loading-icon-programmer {
    width: 40%;
  }
  #home-pg-intro-banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  #home-pg-intro-banner > * {
    box-sizing: border-box;
    padding-top: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 2.25rem;
    padding-left: 2.25rem;
  }
  .home-pg-intro-banner-img-container {
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper {
    display: block;
    box-sizing: border-box;
    width: 18.23rem;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #d24040;
    overflow: hidden;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    background-size: cover;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    background-position: top;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    box-sizing: border-box;
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 13%;
    width: 100%;
    height: 100%;
    background-size: 74%;
    background-repeat: no-repeat;
    background-position-y: -21%;
    background-position-x: 50%;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-position: top;
  }
  .home-pg-intro-banner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    color: #f2f2f2;
    overflow: hidden;
  }
  .home-pg-intro-banner-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .home-pg-intro-banner-title h2 {
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.35em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h2 > * {
    padding-right: 0.4em;
  }
  .home-pg-intro-banner-title h2 > *:last-child {
    padding-right: 0;
  }
  .home-pg-intro-banner-title h3 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.875rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h3 > * {
    padding-right: 0.3em;
  }
  .home-pg-intro-banner-title h3 > :nth-child(2) {
    margin-bottom: 0;
    color: #ffc83a;
  }
  .home-pg-intro-banner-title > * {
    padding-bottom: 1.25rem;
  }
  .home-pg-intro-banner-sub-content {
    animation: 2s ease-in-out 0s fade-up;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  .home-pg-intro-banner-sub-content p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.93em;
    color: #f2f2f2;
    margin: 0;
    width: 100%;
    padding-bottom: 1.875rem;
  }
  .home-pg-intro-banner-sub-content button {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.25rem;
  }
  .home-pg-intro-banner-sub-content button::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ff5d5d;
    z-index: 0;
  }
  .home-pg-intro-banner-sub-content button > .action-btn-content {
    border: 0.083em solid #ff5d5d;
    color: #ff5d5d;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  #project-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
  }
  .project-banner-text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: #f2f2f2;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 4.5rem;
    box-sizing: border-box;
    width: 100%;
  }
  .project-banner-text-content > h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-text-content > h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-text-content > h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-text-content > p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2em;
    margin: 0;
    padding-top: 2.25rem;
  }
  @keyframes element-appear {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .project-banner-text-content > p.visible {
    opacity: 1;
    animation: 3s ease-in-out 0s element-appear;
  }
  .project-banner-text-content > p .project-banner-ani-container {
    vertical-align: middle;
    position: relative;
    margin-top: -0.2em;
    min-width: 5em;
    min-height: 2em;
  }
  .project-banner-text-content > p .project-banner-ani-container::after {
    content: "";
    position: absolute;
    top: 0.25em;
    height: 1.5em;
    width: 1px;
    background: #f2f2f2;
  }
  .project-banner-featured {
    display: flex;
    justify-content: start;
    position: relative;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .project-banner-featured > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .project-banner-featured > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .project-banner-featured-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .project-banner-featured-container > * {
    margin-bottom: 9rem;
  }
  .project-banner-featured-container > :last-child {
    margin-bottom: 0;
  }
  .project-banner-featured-container .project-item {
    display: flex;
    width: 100%;
    min-height: 25rem;
    flex-direction: row;
  }
  .project-banner-featured-container .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2.5rem;
    width: 45%;
  }
  .project-banner-featured-container .project-item-content.project-item-right-orientation {
    padding-left: 2.5rem;
    padding-right: 0;
  }
  .project-banner-featured-container .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-featured-container .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-featured-container .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-featured-container .project-item-title:after {
    height: 0.25em;
  }
  .project-banner-featured-container .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  .project-banner-featured-container .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  .project-banner-featured-container .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .project-banner-featured-container .project-item-labels > *:last-child {
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  .project-banner-featured-container .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  .project-banner-featured-container .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  .project-banner-featured-container .project-item-content-slim .project-item-description {
    padding-top: 1.75rem;
  }
  .project-banner-featured-container .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  .project-banner-featured-container .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.375rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  .project-banner-featured-container .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  .project-banner-featured-container .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  .project-banner-featured-container .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  .project-banner-featured-container .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  .project-banner-view-all-banner {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .project-banner-view-all-banner > p {
    font-size: 1.5rem;
    color: #f2f2f2;
    font-weight: 400;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 1.75rem;
    margin: 0;
  }
  .project-banner-view-all-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .project-banner-view-all-btn > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .project-banner-view-all-btn > a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .project-banner-view-all-btn > a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  #skills-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
  }
  #skills-banner-inner {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    width: 100%;
  }
  .skills-banner-media-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    padding-right: 2.25rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    width: 18.23rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container > svg {
    width: 100%;
    height: 100%;
  }
  .skills-banner-text-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-text-content h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .skills-banner-text-content h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .skills-banner-text-content h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .skills-banner-text-content p {
    padding-top: 2.25rem;
    color: #f2f2f2;
    line-height: 2em;
    margin: 0;
    width: 100%;
    font-size: 1.5rem;
    flex-grow: 1;
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    width: auto;
    display: block;
    justify-content: unset;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    padding-top: 2rem;
  }
  .skills-banner-text-content button > :first-child,
  .skills-banner-text-content a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .skills-banner-text-content button > :last-child,
  .skills-banner-text-content a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .skills-banner-skills-list {
    padding-top: 3.75rem;
    padding-bottom: 0rem;
    display: flex;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.5rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #about-me-pg {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 3.75rem;
    padding-bottom: 4.5rem;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
  #about-me-pg-inner-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .about-me-pg-text-header {
    width: 100%;
    color: #f2f2f2;
    display: flex;
    line-height: 1.625em;
    justify-content: center;
    font-size: 4.8rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 4.5rem;
  }
  .about-me-pg-text-header .about-me-pg-letters {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  .about-me-pg-text-header .about-me-pg-letters > * {
    padding-right: 0.5em;
  }
  .about-me-pg-text-header .about-me-pg-letters > *:last-child {
    padding-right: 0;
  }
  .about-me-pg-text-header .about-me-pg-letter {
    transform: rotateY(-90deg);
  }
  .about-me-pg-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-left: 3.75rem;
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(-80%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes fade-in {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  .about-me-pg-text-content > p {
    flex-grow: 1;
    opacity: 0;
    position: relative;
    margin: 0;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2.485em;
  }
  .about-me-pg-text-content > p.visible {
    opacity: 1;
    animation: 1s ease-in-out 0s fade-in;
    animation-delay: 0ms;
  }
  .about-me-pg-text-content > p span {
    line-height: 1em;
    font-size: 4rem;
    color: #ff5d5d;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .about-me-pg-action-btns {
    display: flex;
    flex-direction: column;
    margin-top: 4.5rem;
  }
  .about-me-pg-action-btns > a:first-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    margin-bottom: 0.35em;
  }
  .about-me-pg-action-btns > a:first-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:first-child > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-action-btns > a:last-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .about-me-pg-action-btns > a:last-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:last-child > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-media-content {
    position: relative;
    display: flex;
    align-items: start;
    width: 18.23rem;
    min-width: 18.23rem;
  }
  .about-me-pg-media-content > svg {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .about-me-pg-media-content > svg image {
    position: relative;
  }
  .about-me-pg-media-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
  #project-pg {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-bottom: 4.5rem;
  }
  #project-pg-wave-bg {
    height: 52.125rem;
  }
  #project-pg-wave-bg #wave-bg-rotate-wave-project-wave {
    background: #d93a3a;
  }
  #project-pg-inner {
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    align-items: start;
    max-width: 1500px;
  }
  #project-pg-inner h2 {
    padding: 0.525em 0;
    justify-content: center;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6.75rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #project-pg-inner h2 > * {
    padding-right: 0.3em;
  }
  #project-pg-inner .full-pg-loading-icon {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 4.5rem;
  }
  #project-pg-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 40rem;
  }
  #project-pg-carousel .project-pg-carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #project-pg-carousel .project-pg-carousel-inner-wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 7.125rem;
  }
  #project-pg-carousel .swiper-wrapper {
    padding: 0;
    margin: 0;
  }
  #project-pg-carousel .swiper-slide {
    border: none;
    margin: 0;
    padding: 0;
    height: 40rem;
  }
  #project-pg-carousel .swiper-pagination {
    bottom: 0;
    height: auto;
  }
  #project-pg-carousel .swiper-pagination-bullet {
    border-color: #afafaf;
    border-style: solid;
    border-width: 0.21rem;
    width: 2.625rem;
    height: 2.625rem;
    margin: 0 1rem;
    aspect-ratio: 1/1;
    opacity: 1;
    background: transparent;
  }
  #project-pg-carousel .swiper-pagination-bullet-active {
    background-color: #afafaf;
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next-next {
    transform: scale(0.78);
  }
  .project-pg-slide {
    position: relative;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .project-pg-slide-inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .project-pg-slide-img-container {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .project-pg-slide-img-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.5%;
    width: 99%;
    height: 100%;
    background-color: #2e2e2e;
    z-index: 0;
  }
  .project-pg-slide-text-content {
    box-sizing: border-box;
    position: relative;
    padding: 2% 3%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 35%, rgb(30, 30, 30) 100%);
  }
  .project-pg-slide-first-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.02em;
    box-sizing: border-box;
  }
  .project-pg-slide-first-row h4 {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-first-row h4 > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-project-urls {
    display: flex;
    width: auto;
    margin-left: 3%;
    box-sizing: border-box;
    align-items: flex-end;
    align-items: end;
  }
  .project-pg-project-url {
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 2.25rem;
    height: 1.625em;
    width: 1.625em;
    background-color: #3b3b3b;
    aspect-ratio: 1/1;
    color: #c5c5c5;
  }
  .project-pg-project-url:last-child {
    background-color: #d93a3a;
    color: #f2f2f2;
    margin-left: 0.3em;
  }
  .project-pg-project-url:last-child > svg {
    fill: #f2f2f2;
  }
  .project-pg-project-url > svg {
    position: relative;
    z-index: 1;
    height: 60%;
    width: auto;
  }
  .project-pg-slide-dates {
    padding-top: 0.875rem;
    text-decoration: none;
    justify-content: space-between;
    color: #afafaf;
    text-align: center;
    flex-wrap: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.625rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-dates > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-date {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .project-pg-slide-date:last-child {
    justify-content: flex-end;
  }
  .project-pg-explore-more-header {
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-explore-more-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-pg-explore-more-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-pg-explore-more-header {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  #project-pg-explore-more {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #project-pg-explore-more .project-item {
    display: flex;
    width: 100%;
    min-height: 25rem;
    flex-direction: row;
  }
  #project-pg-explore-more .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2.5rem;
    width: 45%;
  }
  #project-pg-explore-more .project-item-content.project-item-right-orientation {
    padding-left: 2.5rem;
    padding-right: 0;
  }
  #project-pg-explore-more .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #project-pg-explore-more .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  #project-pg-explore-more .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  #project-pg-explore-more .project-item-title:after {
    height: 0.25em;
  }
  #project-pg-explore-more .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  #project-pg-explore-more .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  #project-pg-explore-more .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  #project-pg-explore-more .project-item-labels > *:last-child {
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  #project-pg-explore-more .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  #project-pg-explore-more .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  #project-pg-explore-more .project-item-content-slim .project-item-description {
    padding-top: 1.75rem;
  }
  #project-pg-explore-more .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  #project-pg-explore-more .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.375rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  #project-pg-explore-more .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  #project-pg-explore-more .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  #project-pg-explore-more .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  #project-pg-explore-more .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  #project-pg-explore-more > * {
    margin-bottom: 6.25rem;
  }
  #project-pg-explore-more > *:last-child {
    margin-bottom: 0;
  }
  #about-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-wave-bg {
    height: 48rem;
  }
  #about-pg-wave-bg #wave-bg-rotate-wave-intro-wave {
    background: linear-gradient(138.2deg, #ff5d5d 49.26%, #ffc83a 93.61%);
  }
  #about-pg-intro {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
  }
  #about-pg-intro-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-intro-inner > h2 {
    justify-content: center;
    padding: 0.525em 0;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 6.75rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #about-pg-intro-inner > h2 > * {
    padding-right: 0.3em;
  }
  #about-pg-intro-inner::after {
    margin-top: 4.5rem;
    margin-bottom: 2.953125rem;
    content: "";
    width: 50%;
    height: 0.8em;
    background-color: #6b6b6b;
  }
  #about-pg-image-collage {
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }
  #about-pg-image-collage svg {
    width: 100%;
    margin: auto;
  }
  #about-pg-intro-text-content {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.375rem;
    line-height: 2.2em;
  }
  #about-pg-intro-text-content p {
    margin-bottom: 1em;
    margin-top: 0;
  }
  #about-pg-intro-text-content p:last-child {
    margin-bottom: 0;
  }
  #about-pg-intro-text-content a {
    text-decoration: none;
    color: #ffc83a;
  }
  #about-pg-intro-text-content .about-pg-text-first-letter {
    font-size: 3.3rem;
    line-height: 1em;
    color: #ffc83a;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #about-pg-education {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-top: 4.5rem;
    max-width: 1500px;
  }
  #about-pg-education-header {
    align-self: center;
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #about-pg-education-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  #about-pg-education-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  h2#about-pg-education-header {
    margin-bottom: 4.5rem;
  }
  #about-pg-education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-container-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #about-pg-education-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.5rem;
    width: 100%;
    align-self: center;
  }
  #about-pg-education-display .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  #about-pg-education-display .lazy-img-wrapper {
    background-size: cover;
  }
  #about-pg-education-display img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-display a {
    box-sizing: border-box;
    padding: 0;
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 12%;
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
  }
  #about-pg-education-display img {
    border-radius: 12%;
    object-fit: contain;
    object-position: center;
  }
  #about-pg-education-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #f2f2f2;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  #about-pg-education-action a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
    margin-top: 2.25rem;
  }
  #about-pg-education-action a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  #about-pg-education-action a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #contact-pg-inner {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-top: 3rem;
    padding-bottom: 4.5rem;
    flex-direction: row;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    color: #a6a6a6;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #contact-pg-inner > * {
    width: 100%;
  }
  #contact-pg-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .contact-pg-content-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-pg-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
  }
  .contact-pg-content-col:first-child {
    padding-right: 0.5em;
  }
  .contact-pg-content-col:last-child {
    padding-left: 0.5em;
  }
  .contact-pg-content-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  .contact-pg-content-col h4 > * {
    padding-right: 0.3em;
  }
  .contact-pg-content-col a {
    text-decoration: none;
  }
  .contact-pg-content-img {
    width: 100%;
    padding-top: 3rem;
  }
  .contact-pg-content-email-link {
    font-size: 1.125rem;
    color: #a6a6a6;
    line-height: 1.725em;
  }
  .contact-pg-content-resume-link {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .contact-pg-content-resume-link > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .contact-pg-content-resume-link > :last-child {
    font-size: 1.125rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg-form {
    box-sizing: border-box;
    margin-left: 1.5rem;
    border-radius: 1.5%;
    background-color: #232323;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-input {
    color: #a6a6a6;
  }
  #contact-pg-form .MuiInputLabel-root:focus,
  #contact-pg-form .MuiInputBase-input:focus {
    color: #ffc83a;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-root,
  #contact-pg-form .MuiInputBase-input {
    line-height: 2em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputLabel-root {
    font-weight: 600;
  }
  #contact-pg-form .MuiInputBase-input {
    height: 2em;
  }
  #contact-pg-form textarea.MuiInputBase-input {
    line-height: 1.675em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputBase-root::before {
    border-bottom-color: #a6a6a6;
  }
  #contact-pg-form .MuiInputBase-root::before.Mui-active, #contact-pg-form .MuiInputBase-root::before.Mui-focused, #contact-pg-form .MuiInputBase-root::before:focus {
    border-bottom-color: #ffc83a;
  }
  #contact-pg-form .Mui-focused,
  #contact-pg-form .Mui-active {
    color: #ffc83a;
  }
  #contact-pg-form .MuiFormHelperText-root.Mui-error {
    color: rgb(211, 47, 47);
  }
  #contact-pg-form > * {
    margin-top: 1.25rem;
  }
  #contact-pg-form > :first-child {
    margin-top: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.2rem;
    align-self: end;
    align-self: flex-end;
    margin: 0;
    margin-top: 2.875rem;
    margin-bottom: 0.26em;
    margin-right: 0.24em;
  }
  #contact-pg-form .contact-pg-contact-form-btn::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ffc83a;
    z-index: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn > .action-btn-content {
    border: 0.083em solid #ffc83a;
    color: #ffc83a;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  .contact-pg-contact-form-header {
    display: flex;
    width: 100%;
  }
  .contact-pg-contact-form-header h3 {
    align-self: end;
    color: #ffc83a;
    width: auto;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .contact-pg-contact-form-header h3 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .contact-pg-contact-form-header h3::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .contact-pg-contact-form-header p {
    margin: 0;
    padding: 0;
    padding-left: 4rem;
    font-size: 1rem;
    line-height: 1.625em;
    color: #ffc83a;
    flex-grow: 1;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .contact-pg-contact-form-row {
    display: flex;
    box-sizing: border-box;
  }
  .contact-pg-contact-form-row > :first-child {
    margin-right: 1rem;
  }
  .contact-pg-contact-form-row > :last-child {
    margin-left: 1rem;
  }
  .skills-pg-container {
    display: flex;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list {
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    width: 100%;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.5rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-pg-container .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #inner-page-wrapper {
    min-height: calc(100vh - 6rem);
    width: 100%;
  }
}
@media (max-width: 992px) {
  #navbar {
    box-sizing: border-box;
    padding: 1rem;
    max-width: 1500px;
    width: 100%;
    height: 4.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  #navbar #navbar-links {
    color: #afafaf;
  }
  #navbar #navbar-links svg {
    stroke: #afafaf;
  }
  #navbar #navbar-linkedIn {
    color: #afafaf;
  }
  #navbar-logo {
    display: flex;
    height: 100%;
    align-items: center;
    text-decoration: none;
  }
  #navbar-logo > span {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
  }
  #navbar-links {
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  #navbar-links > button, #navbar-links > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    margin-right: 2.5em;
  }
  #navbar-links > button:first-child, #navbar-links > a:first-child {
    margin-left: 1.25em;
  }
  #navbar-links > button:last-child, #navbar-links > a:last-child {
    margin-right: 0;
  }
  #navbar-linkedIn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1/1;
  }
  #navbar-linkedIn a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    align-items: center;
    display: flex;
    height: 70%;
    width: 70%;
  }
  #navbar-linkedIn a svg {
    width: 100%;
    height: 100%;
  }
  #navbar-open-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
  }
  #navbar.color #navbar-links {
    color: #f2f2f2;
  }
  #navbar.color #navbar-links svg {
    stroke: #f2f2f2;
  }
  #navbar.color #navbar-linkedIn {
    color: #f2f2f2;
  }
  #navbar.color #navbar-open-drawer-button {
    color: #f2f2f2;
  }
  #navbar-close-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
    height: 2.2em;
    width: 2.2em;
  }
  #navbar-drawer .MuiPaper-root {
    align-items: end;
    align-items: flex-end;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
  }
  #navbar-drawer #navbar-links {
    flex-direction: column;
    justify-content: unset;
    align-items: center;
    flex-grow: unset;
    height: auto;
    box-sizing: border-box;
    min-width: 200px;
    color: #f2f2f2;
  }
  #navbar-drawer #navbar-links a,
  #navbar-drawer #navbar-links button {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.3em;
  }
  #navbar-links {
    font-size: 1.3rem;
  }
  #navbar-links svg {
    right: -0.5em;
    position: absolute;
    vertical-align: top;
    display: inline;
    line-height: 1;
    width: 0.8em;
    height: 1.5em;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: 46;
    transition: stroke-dashoffset 0.15s linear 0s;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.2rem;
  }
  #footer-inner > * {
    margin-bottom: 1.2rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.2rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 0.9rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.2rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  #home-pg-intro-banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  #home-pg-intro-banner > * {
    box-sizing: border-box;
    padding-top: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 1.8rem;
    padding-left: 1.8rem;
  }
  .home-pg-intro-banner-img-container {
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper {
    display: block;
    box-sizing: border-box;
    width: 14.58rem;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #d24040;
    overflow: hidden;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    background-size: cover;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    background-position: top;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    box-sizing: border-box;
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 13%;
    width: 100%;
    height: 100%;
    background-size: 74%;
    background-repeat: no-repeat;
    background-position-y: -21%;
    background-position-x: 50%;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-position: top;
  }
  .home-pg-intro-banner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    color: #f2f2f2;
    overflow: hidden;
  }
  .home-pg-intro-banner-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .home-pg-intro-banner-title h2 {
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.35em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h2 > * {
    padding-right: 0.4em;
  }
  .home-pg-intro-banner-title h2 > *:last-child {
    padding-right: 0;
  }
  .home-pg-intro-banner-title h3 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h3 > * {
    padding-right: 0.3em;
  }
  .home-pg-intro-banner-title h3 > :nth-child(2) {
    margin-bottom: 0;
    color: #ffc83a;
  }
  .home-pg-intro-banner-title > * {
    padding-bottom: 1rem;
  }
  .home-pg-intro-banner-sub-content {
    animation: 2s ease-in-out 0s fade-up;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  .home-pg-intro-banner-sub-content p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.93em;
    color: #f2f2f2;
    margin: 0;
    width: 100%;
    padding-bottom: 1.5rem;
  }
  .home-pg-intro-banner-sub-content button {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1rem;
  }
  .home-pg-intro-banner-sub-content button::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ff5d5d;
    z-index: 0;
  }
  .home-pg-intro-banner-sub-content button > .action-btn-content {
    border: 0.083em solid #ff5d5d;
    color: #ff5d5d;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  #project-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 3.6rem;
  }
  .project-banner-text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: #f2f2f2;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 3.6rem;
    box-sizing: border-box;
    width: 100%;
  }
  .project-banner-text-content > h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-text-content > h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-text-content > h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-text-content > p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    width: 100%;
    font-size: 1.2rem;
    line-height: 2em;
    margin: 0;
    padding-top: 1.8rem;
  }
  @keyframes element-appear {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .project-banner-text-content > p.visible {
    opacity: 1;
    animation: 3s ease-in-out 0s element-appear;
  }
  .project-banner-text-content > p .project-banner-ani-container {
    vertical-align: middle;
    position: relative;
    margin-top: -0.2em;
    min-width: 5em;
    min-height: 2em;
  }
  .project-banner-text-content > p .project-banner-ani-container::after {
    content: "";
    position: absolute;
    top: 0.25em;
    height: 1.5em;
    width: 1px;
    background: #f2f2f2;
  }
  .project-banner-featured {
    display: flex;
    justify-content: start;
    position: relative;
    width: 100%;
    padding-left: 0.6rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .project-banner-featured > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3.2rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .project-banner-featured > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .project-banner-featured-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .project-banner-featured-container > * {
    margin-bottom: 7.2rem;
  }
  .project-banner-featured-container > :last-child {
    margin-bottom: 0;
  }
  .project-banner-featured-container .project-item {
    display: flex;
    width: 100%;
    min-height: 20rem;
    flex-direction: row;
  }
  .project-banner-featured-container .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    width: 45%;
  }
  .project-banner-featured-container .project-item-content.project-item-right-orientation {
    padding-left: 2rem;
    padding-right: 0;
  }
  .project-banner-featured-container .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-featured-container .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-featured-container .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-featured-container .project-item-title:after {
    height: 0.25em;
  }
  .project-banner-featured-container .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  .project-banner-featured-container .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  .project-banner-featured-container .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .project-banner-featured-container .project-item-labels > *:last-child {
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  .project-banner-featured-container .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  .project-banner-featured-container .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  .project-banner-featured-container .project-item-content-slim .project-item-description {
    padding-top: 1.4rem;
  }
  .project-banner-featured-container .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  .project-banner-featured-container .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.175rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  .project-banner-featured-container .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  .project-banner-featured-container .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  .project-banner-featured-container .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  .project-banner-featured-container .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  .project-banner-view-all-banner {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .project-banner-view-all-banner > p {
    font-size: 1.2rem;
    color: #f2f2f2;
    font-weight: 400;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 1.4rem;
    margin: 0;
  }
  .project-banner-view-all-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .project-banner-view-all-btn > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .project-banner-view-all-btn > a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .project-banner-view-all-btn > a > :last-child {
    font-size: 1.8rem;
    width: 1.3em;
    height: 1.3em;
  }
  #skills-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 3rem;
    padding-bottom: 3.6rem;
  }
  #skills-banner-inner {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    width: 100%;
  }
  .skills-banner-media-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    padding-right: 1.8rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    width: 14.58rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container > svg {
    width: 100%;
    height: 100%;
  }
  .skills-banner-text-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-text-content h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .skills-banner-text-content h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .skills-banner-text-content h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .skills-banner-text-content p {
    padding-top: 1.8rem;
    color: #f2f2f2;
    line-height: 2em;
    margin: 0;
    width: 100%;
    font-size: 1.2rem;
    flex-grow: 1;
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    width: auto;
    display: block;
    justify-content: unset;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    padding-top: 1.6rem;
  }
  .skills-banner-text-content button > :first-child,
  .skills-banner-text-content a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .skills-banner-text-content button > :last-child,
  .skills-banner-text-content a > :last-child {
    font-size: 1.8rem;
    width: 1.3em;
    height: 1.3em;
  }
  .skills-banner-skills-list {
    padding-top: 3rem;
    padding-bottom: 0rem;
    display: flex;
    width: 100%;
    padding-left: 0.6rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3.2rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.2rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #about-me-pg {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 3rem;
    padding-bottom: 3.6rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
  #about-me-pg-inner-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .about-me-pg-text-header {
    width: 100%;
    color: #f2f2f2;
    display: flex;
    line-height: 1.625em;
    justify-content: center;
    font-size: 4rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 3.6rem;
  }
  .about-me-pg-text-header .about-me-pg-letters {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  .about-me-pg-text-header .about-me-pg-letters > * {
    padding-right: 0.5em;
  }
  .about-me-pg-text-header .about-me-pg-letters > *:last-child {
    padding-right: 0;
  }
  .about-me-pg-text-header .about-me-pg-letter {
    transform: rotateY(-90deg);
  }
  .about-me-pg-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-left: 3rem;
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(-80%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes fade-in {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  .about-me-pg-text-content > p {
    flex-grow: 1;
    opacity: 0;
    position: relative;
    margin: 0;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2.485em;
  }
  .about-me-pg-text-content > p.visible {
    opacity: 1;
    animation: 1s ease-in-out 0s fade-in;
    animation-delay: 0ms;
  }
  .about-me-pg-text-content > p span {
    line-height: 1em;
    font-size: 3.2rem;
    color: #ff5d5d;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .about-me-pg-action-btns {
    display: flex;
    flex-direction: column;
    margin-top: 3.6rem;
  }
  .about-me-pg-action-btns > a:first-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    margin-bottom: 0.35em;
  }
  .about-me-pg-action-btns > a:first-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:first-child > :last-child {
    font-size: 1.8rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-action-btns > a:last-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .about-me-pg-action-btns > a:last-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:last-child > :last-child {
    font-size: 1.8rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-media-content {
    position: relative;
    display: flex;
    align-items: start;
    width: 14.58rem;
    min-width: 14.58rem;
  }
  .about-me-pg-media-content > svg {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .about-me-pg-media-content > svg image {
    position: relative;
  }
  .about-me-pg-media-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
  #about-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-wave-bg {
    height: 35rem;
  }
  #about-pg-wave-bg #wave-bg-rotate-wave-intro-wave {
    background: linear-gradient(138.2deg, #ff5d5d 49.26%, #ffc83a 93.61%);
  }
  #about-pg-intro {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
  }
  #about-pg-intro-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-intro-inner > h2 {
    justify-content: center;
    padding: 0.525em 0;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 5.4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #about-pg-intro-inner > h2 > * {
    padding-right: 0.3em;
  }
  #about-pg-intro-inner::after {
    margin-top: 3.6rem;
    margin-bottom: 2.053125rem;
    content: "";
    width: 50%;
    height: 0.8em;
    background-color: #6b6b6b;
  }
  #about-pg-image-collage {
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }
  #about-pg-image-collage svg {
    width: 100%;
    margin: auto;
  }
  #about-pg-intro-text-content {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.375rem;
    line-height: 2.2em;
  }
  #about-pg-intro-text-content p {
    margin-bottom: 1em;
    margin-top: 0;
  }
  #about-pg-intro-text-content p:last-child {
    margin-bottom: 0;
  }
  #about-pg-intro-text-content a {
    text-decoration: none;
    color: #ffc83a;
  }
  #about-pg-intro-text-content .about-pg-text-first-letter {
    font-size: 3.3rem;
    line-height: 1em;
    color: #ffc83a;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #about-pg-education {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-top: 3.6rem;
    max-width: 1500px;
  }
  #about-pg-education-header {
    align-self: center;
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #about-pg-education-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  #about-pg-education-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  h2#about-pg-education-header {
    margin-bottom: 3.6rem;
  }
  #about-pg-education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-container-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #about-pg-education-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.5rem;
    width: 100%;
    align-self: center;
  }
  #about-pg-education-display .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  #about-pg-education-display .lazy-img-wrapper {
    background-size: cover;
  }
  #about-pg-education-display img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-display a {
    box-sizing: border-box;
    padding: 0;
    width: 10rem;
    height: 10rem;
    border-radius: 12%;
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
  }
  #about-pg-education-display img {
    border-radius: 12%;
    object-fit: contain;
    object-position: center;
  }
  #about-pg-education-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #f2f2f2;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 3.6rem;
    margin-bottom: 3.6rem;
  }
  #about-pg-education-action a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
    margin-top: 1.8rem;
  }
  #about-pg-education-action a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  #about-pg-education-action a > :last-child {
    font-size: 2.25rem;
    width: 1.3em;
    height: 1.3em;
  }
  #project-pg {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 3.6rem;
  }
  #project-pg-wave-bg {
    height: 40.9rem;
  }
  #project-pg-wave-bg #wave-bg-rotate-wave-project-wave {
    background: #d93a3a;
  }
  #project-pg-inner {
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    align-items: start;
    max-width: 1500px;
  }
  #project-pg-inner h2 {
    padding: 0.525em 0;
    justify-content: center;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 5.4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #project-pg-inner h2 > * {
    padding-right: 0.3em;
  }
  #project-pg-inner .full-pg-loading-icon {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 3.6rem;
  }
  #project-pg-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 32rem;
  }
  #project-pg-carousel .project-pg-carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #project-pg-carousel .project-pg-carousel-inner-wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 6.6rem;
  }
  #project-pg-carousel .swiper-wrapper {
    padding: 0;
    margin: 0;
  }
  #project-pg-carousel .swiper-slide {
    border: none;
    margin: 0;
    padding: 0;
    height: 32rem;
  }
  #project-pg-carousel .swiper-pagination {
    bottom: 0;
    height: auto;
  }
  #project-pg-carousel .swiper-pagination-bullet {
    border-color: #afafaf;
    border-style: solid;
    border-width: 0.168rem;
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 0.8rem;
    aspect-ratio: 1/1;
    opacity: 1;
    background: transparent;
  }
  #project-pg-carousel .swiper-pagination-bullet-active {
    background-color: #afafaf;
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next-next {
    transform: scale(0.78);
  }
  .project-pg-slide {
    position: relative;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .project-pg-slide-inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .project-pg-slide-img-container {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .project-pg-slide-img-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.5%;
    width: 99%;
    height: 100%;
    background-color: #2e2e2e;
    z-index: 0;
  }
  .project-pg-slide-text-content {
    box-sizing: border-box;
    position: relative;
    padding: 2% 3%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 35%, rgb(30, 30, 30) 100%);
  }
  .project-pg-slide-first-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.02em;
    box-sizing: border-box;
  }
  .project-pg-slide-first-row h4 {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-first-row h4 > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-project-urls {
    display: flex;
    width: auto;
    margin-left: 3%;
    box-sizing: border-box;
    align-items: flex-end;
    align-items: end;
  }
  .project-pg-project-url {
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.8rem;
    height: 1.625em;
    width: 1.625em;
    background-color: #3b3b3b;
    aspect-ratio: 1/1;
    color: #c5c5c5;
  }
  .project-pg-project-url:last-child {
    background-color: #d93a3a;
    color: #f2f2f2;
    margin-left: 0.3em;
  }
  .project-pg-project-url:last-child > svg {
    fill: #f2f2f2;
  }
  .project-pg-project-url > svg {
    position: relative;
    z-index: 1;
    height: 60%;
    width: auto;
  }
  .project-pg-slide-dates {
    padding-top: 0.7rem;
    text-decoration: none;
    justify-content: space-between;
    color: #afafaf;
    text-align: center;
    flex-wrap: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-dates > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-date {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .project-pg-slide-date:last-child {
    justify-content: flex-end;
  }
  .project-pg-explore-more-header {
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-explore-more-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-pg-explore-more-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-pg-explore-more-header {
    margin-top: 3.6rem;
    margin-bottom: 3.6rem;
  }
  #project-pg-explore-more {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #project-pg-explore-more .project-item {
    display: flex;
    width: 100%;
    min-height: 20rem;
    flex-direction: row;
  }
  #project-pg-explore-more .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    width: 45%;
  }
  #project-pg-explore-more .project-item-content.project-item-right-orientation {
    padding-left: 2rem;
    padding-right: 0;
  }
  #project-pg-explore-more .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #project-pg-explore-more .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  #project-pg-explore-more .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  #project-pg-explore-more .project-item-title:after {
    height: 0.25em;
  }
  #project-pg-explore-more .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  #project-pg-explore-more .project-item-labels {
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  #project-pg-explore-more .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  #project-pg-explore-more .project-item-labels > *:last-child {
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  #project-pg-explore-more .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  #project-pg-explore-more .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.625rem;
  }
  #project-pg-explore-more .project-item-content-slim .project-item-description {
    padding-top: 1.4rem;
  }
  #project-pg-explore-more .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  #project-pg-explore-more .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1.625rem;
    font-size: 1.175rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  #project-pg-explore-more .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  #project-pg-explore-more .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  #project-pg-explore-more .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  #project-pg-explore-more .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  #project-pg-explore-more > * {
    margin-bottom: 5rem;
  }
  #project-pg-explore-more > *:last-child {
    margin-bottom: 0;
  }
  #contact-pg {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #contact-pg-inner {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-top: 2.4rem;
    padding-bottom: 3.6rem;
    flex-direction: row;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    color: #a6a6a6;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #contact-pg-inner > * {
    width: 100%;
  }
  #contact-pg-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0.9rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .contact-pg-content-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-pg-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
  }
  .contact-pg-content-col:first-child {
    padding-right: 0.5em;
  }
  .contact-pg-content-col:last-child {
    padding-left: 0.5em;
  }
  .contact-pg-content-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  .contact-pg-content-col h4 > * {
    padding-right: 0.3em;
  }
  .contact-pg-content-col a {
    text-decoration: none;
  }
  .contact-pg-content-img {
    width: 100%;
    padding-top: 2.4rem;
  }
  .contact-pg-content-email-link {
    font-size: 0.9rem;
    color: #a6a6a6;
    line-height: 1.725em;
  }
  .contact-pg-content-resume-link {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .contact-pg-content-resume-link > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .contact-pg-content-resume-link > :last-child {
    font-size: 0.9rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg-form {
    box-sizing: border-box;
    margin-left: 0.9rem;
    border-radius: 1.5%;
    background-color: #232323;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-input {
    color: #a6a6a6;
  }
  #contact-pg-form .MuiInputLabel-root:focus,
  #contact-pg-form .MuiInputBase-input:focus {
    color: #ffc83a;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-root,
  #contact-pg-form .MuiInputBase-input {
    line-height: 2em;
    font-size: 0.9rem;
  }
  #contact-pg-form .MuiInputLabel-root {
    font-weight: 600;
  }
  #contact-pg-form .MuiInputBase-input {
    height: 2em;
  }
  #contact-pg-form textarea.MuiInputBase-input {
    line-height: 1.675em;
    font-size: 0.9rem;
  }
  #contact-pg-form .MuiInputBase-root::before {
    border-bottom-color: #a6a6a6;
  }
  #contact-pg-form .MuiInputBase-root::before.Mui-active, #contact-pg-form .MuiInputBase-root::before.Mui-focused, #contact-pg-form .MuiInputBase-root::before:focus {
    border-bottom-color: #ffc83a;
  }
  #contact-pg-form .Mui-focused,
  #contact-pg-form .Mui-active {
    color: #ffc83a;
  }
  #contact-pg-form .MuiFormHelperText-root.Mui-error {
    color: rgb(211, 47, 47);
  }
  #contact-pg-form > * {
    margin-top: 0.75rem;
  }
  #contact-pg-form > :first-child {
    margin-top: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.05rem;
    align-self: end;
    align-self: flex-end;
    margin: 0;
    margin-top: 1.725rem;
    margin-bottom: 0.26em;
    margin-right: 0.24em;
  }
  #contact-pg-form .contact-pg-contact-form-btn::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ffc83a;
    z-index: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn > .action-btn-content {
    border: 0.083em solid #ffc83a;
    color: #ffc83a;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  .contact-pg-contact-form-header {
    display: flex;
    width: 100%;
  }
  .contact-pg-contact-form-header h3 {
    align-self: end;
    color: #ffc83a;
    width: auto;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .contact-pg-contact-form-header h3 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .contact-pg-contact-form-header h3::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .contact-pg-contact-form-header p {
    margin: 0;
    padding: 0;
    padding-left: 2rem;
    font-size: 1rem;
    line-height: 1.625em;
    color: #ffc83a;
    flex-grow: 1;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .contact-pg-contact-form-row {
    display: flex;
    box-sizing: border-box;
  }
  .contact-pg-contact-form-row > :first-child {
    margin-right: 0.8rem;
  }
  .contact-pg-contact-form-row > :last-child {
    margin-left: 0.8rem;
  }
  .skills-pg-container {
    display: flex;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list {
    padding-top: 1rem;
    padding-bottom: 3rem;
    display: flex;
    width: 100%;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3.2rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.2rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-pg-container .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #inner-page-wrapper {
    min-height: calc(100vh - 4.8rem);
    width: 100%;
  }
}
@media (max-width: 768px) {
  .fallback-inner-wrapper .loading-icon-programmer {
    width: 50%;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.2rem;
  }
  #footer-inner > * {
    margin-bottom: 1.2rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.2rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 0.9rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.2rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  #navbar {
    box-sizing: border-box;
    padding: 1rem;
    max-width: 1500px;
    width: 100%;
    height: 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  #navbar #navbar-links {
    color: #afafaf;
  }
  #navbar #navbar-links svg {
    stroke: #afafaf;
  }
  #navbar #navbar-linkedIn {
    color: #afafaf;
  }
  #navbar-logo {
    display: flex;
    height: 100%;
    align-items: center;
    text-decoration: none;
  }
  #navbar-logo > span {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
  }
  #navbar-links {
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  #navbar-links > button, #navbar-links > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    margin-right: 2.5em;
  }
  #navbar-links > button:first-child, #navbar-links > a:first-child {
    margin-left: 1.25em;
  }
  #navbar-links > button:last-child, #navbar-links > a:last-child {
    margin-right: 0;
  }
  #navbar-linkedIn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1/1;
  }
  #navbar-linkedIn a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    align-items: center;
    display: flex;
    height: 70%;
    width: 70%;
  }
  #navbar-linkedIn a svg {
    width: 100%;
    height: 100%;
  }
  #navbar-open-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
  }
  #navbar.color #navbar-links {
    color: #f2f2f2;
  }
  #navbar.color #navbar-links svg {
    stroke: #f2f2f2;
  }
  #navbar.color #navbar-linkedIn {
    color: #f2f2f2;
  }
  #navbar.color #navbar-open-drawer-button {
    color: #f2f2f2;
  }
  #navbar-close-drawer-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #afafaf;
    height: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    min-width: unset;
    height: 2.2em;
    width: 2.2em;
  }
  #navbar-drawer .MuiPaper-root {
    align-items: end;
    align-items: flex-end;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
  }
  #navbar-drawer #navbar-links {
    flex-direction: column;
    justify-content: unset;
    align-items: center;
    flex-grow: unset;
    height: auto;
    box-sizing: border-box;
    min-width: 200px;
    color: #f2f2f2;
  }
  #navbar-drawer #navbar-links a,
  #navbar-drawer #navbar-links button {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.3em;
  }
  #navbar-links {
    font-size: 1.2rem;
  }
  #navbar-links svg {
    right: -0.5em;
    position: absolute;
    vertical-align: top;
    display: inline;
    line-height: 1;
    width: 0.8em;
    height: 1.5em;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: 46;
    transition: stroke-dashoffset 0.15s linear 0s;
  }
  #home-pg-intro-banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  #home-pg-intro-banner > * {
    box-sizing: border-box;
    padding-top: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 1.8rem;
    padding-left: 1.8rem;
  }
  .home-pg-intro-banner-img-container {
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper {
    display: block;
    box-sizing: border-box;
    width: 14.58rem;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #d24040;
    overflow: hidden;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    background-size: cover;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    background-position: top;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    box-sizing: border-box;
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 13%;
    width: 100%;
    height: 100%;
    background-size: 74%;
    background-repeat: no-repeat;
    background-position-y: -21%;
    background-position-x: 50%;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-position: top;
  }
  .home-pg-intro-banner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    color: #f2f2f2;
    overflow: hidden;
  }
  .home-pg-intro-banner-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .home-pg-intro-banner-title h2 {
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.35em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h2 > * {
    padding-right: 0.4em;
  }
  .home-pg-intro-banner-title h2 > *:last-child {
    padding-right: 0;
  }
  .home-pg-intro-banner-title h3 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h3 > * {
    padding-right: 0.3em;
  }
  .home-pg-intro-banner-title h3 > :nth-child(2) {
    margin-bottom: 0;
    color: #ffc83a;
  }
  .home-pg-intro-banner-title > * {
    padding-bottom: 1rem;
  }
  .home-pg-intro-banner-sub-content {
    animation: 2s ease-in-out 0s fade-up;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  .home-pg-intro-banner-sub-content p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.93em;
    color: #f2f2f2;
    margin: 0;
    width: 100%;
    padding-bottom: 1.5rem;
  }
  .home-pg-intro-banner-sub-content button {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1rem;
  }
  .home-pg-intro-banner-sub-content button::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ff5d5d;
    z-index: 0;
  }
  .home-pg-intro-banner-sub-content button > .action-btn-content {
    border: 0.083em solid #ff5d5d;
    color: #ff5d5d;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  #project-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 2.25rem;
    padding-bottom: 2.7rem;
  }
  .project-banner-text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: #f2f2f2;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 3.6rem;
    box-sizing: border-box;
    width: 100%;
  }
  .project-banner-text-content > h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-text-content > h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-text-content > h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-text-content > p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    width: 100%;
    font-size: 1rem;
    line-height: 2em;
    margin: 0;
    padding-top: 1.8rem;
  }
  @keyframes element-appear {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .project-banner-text-content > p.visible {
    opacity: 1;
    animation: 3s ease-in-out 0s element-appear;
  }
  .project-banner-text-content > p .project-banner-ani-container {
    vertical-align: middle;
    position: relative;
    margin-top: -0.2em;
    min-width: 5em;
    min-height: 2em;
  }
  .project-banner-text-content > p .project-banner-ani-container::after {
    content: "";
    position: absolute;
    top: 0.25em;
    height: 1.5em;
    width: 1px;
    background: #f2f2f2;
  }
  .project-banner-featured {
    display: flex;
    justify-content: start;
    position: relative;
    width: 100%;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .project-banner-featured > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .project-banner-featured > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .project-banner-featured-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .project-banner-featured-container > * {
    margin-bottom: 5.4rem;
  }
  .project-banner-featured-container > :last-child {
    margin-bottom: 0;
  }
  .project-banner-featured-container .project-item {
    display: flex;
    width: 100%;
    min-height: 15rem;
    flex-direction: row;
  }
  .project-banner-featured-container .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    width: 45%;
  }
  .project-banner-featured-container .project-item-content.project-item-right-orientation {
    padding-left: 2rem;
    padding-right: 0;
  }
  .project-banner-featured-container .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.35rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-featured-container .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-featured-container .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-featured-container .project-item-title:after {
    height: 0.25em;
  }
  .project-banner-featured-container .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  .project-banner-featured-container .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  .project-banner-featured-container .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .project-banner-featured-container .project-item-labels > *:last-child {
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  .project-banner-featured-container .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  .project-banner-featured-container .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.2rem;
  }
  .project-banner-featured-container .project-item-content-slim .project-item-description {
    padding-top: 1rem;
  }
  .project-banner-featured-container .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  .project-banner-featured-container .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1rem;
    font-size: 1rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  .project-banner-featured-container .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  .project-banner-featured-container .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  .project-banner-featured-container .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  .project-banner-featured-container .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  .project-banner-view-all-banner {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .project-banner-view-all-banner > p {
    font-size: 1rem;
    color: #f2f2f2;
    font-weight: 400;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 1rem;
    margin: 0;
  }
  .project-banner-view-all-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .project-banner-view-all-btn > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .project-banner-view-all-btn > a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .project-banner-view-all-btn > a > :last-child {
    font-size: 1.35rem;
    width: 1.3em;
    height: 1.3em;
  }
  .project-banner-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .project-banner-featured > .sticky-label {
    text-align: center;
    padding-bottom: 3.6rem;
    text-transform: none;
  }
  #skills-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2.7rem;
    padding-bottom: 3rem;
  }
  #skills-banner-inner {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    width: 100%;
  }
  .skills-banner-media-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    padding-right: 1.8rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    width: 14.58rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container > svg {
    width: 100%;
    height: 100%;
  }
  .skills-banner-text-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-text-content h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .skills-banner-text-content h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .skills-banner-text-content h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .skills-banner-text-content p {
    padding-top: 1.8rem;
    color: #f2f2f2;
    line-height: 2em;
    margin: 0;
    width: 100%;
    font-size: 1rem;
    flex-grow: 1;
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    width: auto;
    display: block;
    justify-content: unset;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    padding-top: 1.6rem;
  }
  .skills-banner-text-content button > :first-child,
  .skills-banner-text-content a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .skills-banner-text-content button > :last-child,
  .skills-banner-text-content a > :last-child {
    font-size: 1.35rem;
    width: 1.3em;
    height: 1.3em;
  }
  .skills-banner-skills-list {
    padding-top: 2.7rem;
    padding-bottom: 0rem;
    display: flex;
    width: 100%;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  .skills-banner-skills-list {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list > .sticky-label {
    text-align: center;
    padding-bottom: 1.8rem;
    text-transform: none;
  }
  #about-me-pg {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 2.7rem;
    padding-bottom: 3rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
  #about-me-pg-inner-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .about-me-pg-text-header {
    width: 100%;
    color: #f2f2f2;
    display: flex;
    line-height: 1.625em;
    justify-content: center;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 3rem;
  }
  .about-me-pg-text-header .about-me-pg-letters {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  .about-me-pg-text-header .about-me-pg-letters > * {
    padding-right: 0.5em;
  }
  .about-me-pg-text-header .about-me-pg-letters > *:last-child {
    padding-right: 0;
  }
  .about-me-pg-text-header .about-me-pg-letter {
    transform: rotateY(-90deg);
  }
  .about-me-pg-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-left: 3rem;
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(-80%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes fade-in {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  .about-me-pg-text-content > p {
    flex-grow: 1;
    opacity: 0;
    position: relative;
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2.485em;
  }
  .about-me-pg-text-content > p.visible {
    opacity: 1;
    animation: 1s ease-in-out 0s fade-in;
    animation-delay: 0ms;
  }
  .about-me-pg-text-content > p span {
    line-height: 1em;
    font-size: 2.7rem;
    color: #ff5d5d;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .about-me-pg-action-btns {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
  }
  .about-me-pg-action-btns > a:first-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    margin-bottom: 0.35em;
  }
  .about-me-pg-action-btns > a:first-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:first-child > :last-child {
    font-size: 1.35rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-action-btns > a:last-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .about-me-pg-action-btns > a:last-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:last-child > :last-child {
    font-size: 1.35rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-media-content {
    position: relative;
    display: flex;
    align-items: start;
    width: 14.58rem;
    min-width: 14.58rem;
  }
  .about-me-pg-media-content > svg {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .about-me-pg-media-content > svg image {
    position: relative;
  }
  .about-me-pg-media-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
  #about-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-wave-bg {
    height: 28rem;
  }
  #about-pg-wave-bg #wave-bg-rotate-wave-intro-wave {
    background: linear-gradient(138.2deg, #ff5d5d 49.26%, #ffc83a 93.61%);
  }
  #about-pg-intro {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
  }
  #about-pg-intro-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-intro-inner > h2 {
    justify-content: center;
    padding: 0.525em 0;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #about-pg-intro-inner > h2 > * {
    padding-right: 0.3em;
  }
  #about-pg-intro-inner::after {
    margin-top: 2.7rem;
    margin-bottom: 1.434375rem;
    content: "";
    width: 50%;
    height: 0.8em;
    background-color: #6b6b6b;
  }
  #about-pg-image-collage {
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }
  #about-pg-image-collage svg {
    width: 100%;
    margin: auto;
  }
  #about-pg-intro-text-content {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.125rem;
    line-height: 2.2em;
  }
  #about-pg-intro-text-content p {
    margin-bottom: 1em;
    margin-top: 0;
  }
  #about-pg-intro-text-content p:last-child {
    margin-bottom: 0;
  }
  #about-pg-intro-text-content a {
    text-decoration: none;
    color: #ffc83a;
  }
  #about-pg-intro-text-content .about-pg-text-first-letter {
    font-size: 2.7rem;
    line-height: 1em;
    color: #ffc83a;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #about-pg-education {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-top: 2.7rem;
    max-width: 1500px;
  }
  #about-pg-education-header {
    align-self: center;
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #about-pg-education-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  #about-pg-education-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  h2#about-pg-education-header {
    margin-bottom: 2.7rem;
  }
  #about-pg-education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-container-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #about-pg-education-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2.1rem;
    width: 100%;
    align-self: center;
  }
  #about-pg-education-display .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  #about-pg-education-display .lazy-img-wrapper {
    background-size: cover;
  }
  #about-pg-education-display img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-display a {
    box-sizing: border-box;
    padding: 0;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 12%;
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
  }
  #about-pg-education-display img {
    border-radius: 12%;
    object-fit: contain;
    object-position: center;
  }
  #about-pg-education-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #f2f2f2;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 2.7rem;
    margin-bottom: 2.7rem;
  }
  #about-pg-education-action a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
    margin-top: 1.35rem;
  }
  #about-pg-education-action a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  #about-pg-education-action a > :last-child {
    font-size: 1.8rem;
    width: 1.3em;
    height: 1.3em;
  }
  #project-pg {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    padding-bottom: 2.7rem;
  }
  #project-pg-wave-bg {
    height: 31.275rem;
  }
  #project-pg-wave-bg #wave-bg-rotate-wave-project-wave {
    background: #d93a3a;
  }
  #project-pg-inner {
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    align-items: start;
    max-width: 1500px;
  }
  #project-pg-inner h2 {
    padding: 0.525em 0;
    justify-content: center;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #project-pg-inner h2 > * {
    padding-right: 0.3em;
  }
  #project-pg-inner .full-pg-loading-icon {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 2.7rem;
  }
  #project-pg-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 24rem;
  }
  #project-pg-carousel .project-pg-carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #project-pg-carousel .project-pg-carousel-inner-wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 5.175rem;
  }
  #project-pg-carousel .swiper-wrapper {
    padding: 0;
    margin: 0;
  }
  #project-pg-carousel .swiper-slide {
    border: none;
    margin: 0;
    padding: 0;
    height: 24rem;
  }
  #project-pg-carousel .swiper-pagination {
    bottom: 0;
    height: auto;
  }
  #project-pg-carousel .swiper-pagination-bullet {
    border-color: #afafaf;
    border-style: solid;
    border-width: 0.126rem;
    width: 1.575rem;
    height: 1.575rem;
    margin: 0 0.6rem;
    aspect-ratio: 1/1;
    opacity: 1;
    background: transparent;
  }
  #project-pg-carousel .swiper-pagination-bullet-active {
    background-color: #afafaf;
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next-next {
    transform: scale(0.78);
  }
  .project-pg-slide {
    position: relative;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .project-pg-slide-inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .project-pg-slide-img-container {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .project-pg-slide-img-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.5%;
    width: 99%;
    height: 100%;
    background-color: #2e2e2e;
    z-index: 0;
  }
  .project-pg-slide-text-content {
    box-sizing: border-box;
    position: relative;
    padding: 2% 3%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 35%, rgb(30, 30, 30) 100%);
  }
  .project-pg-slide-first-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.02em;
    box-sizing: border-box;
  }
  .project-pg-slide-first-row h4 {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.35rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-first-row h4 > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-project-urls {
    display: flex;
    width: auto;
    margin-left: 3%;
    box-sizing: border-box;
    align-items: flex-end;
    align-items: end;
  }
  .project-pg-project-url {
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.35rem;
    height: 1.625em;
    width: 1.625em;
    background-color: #3b3b3b;
    aspect-ratio: 1/1;
    color: #c5c5c5;
  }
  .project-pg-project-url:last-child {
    background-color: #d93a3a;
    color: #f2f2f2;
    margin-left: 0.3em;
  }
  .project-pg-project-url:last-child > svg {
    fill: #f2f2f2;
  }
  .project-pg-project-url > svg {
    position: relative;
    z-index: 1;
    height: 60%;
    width: auto;
  }
  .project-pg-slide-dates {
    padding-top: 0.525rem;
    text-decoration: none;
    justify-content: space-between;
    color: #afafaf;
    text-align: center;
    flex-wrap: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-dates > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-date {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .project-pg-slide-date:last-child {
    justify-content: flex-end;
  }
  .project-pg-explore-more-header {
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.4rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-explore-more-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-pg-explore-more-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-pg-explore-more-header {
    margin-top: 2.7rem;
    margin-bottom: 2.7rem;
  }
  #project-pg-explore-more {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #project-pg-explore-more .project-item {
    display: flex;
    width: 100%;
    min-height: 15rem;
    flex-direction: row;
  }
  #project-pg-explore-more .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    width: 45%;
  }
  #project-pg-explore-more .project-item-content.project-item-right-orientation {
    padding-left: 2rem;
    padding-right: 0;
  }
  #project-pg-explore-more .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.35rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #project-pg-explore-more .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  #project-pg-explore-more .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  #project-pg-explore-more .project-item-title:after {
    height: 0.25em;
  }
  #project-pg-explore-more .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  #project-pg-explore-more .project-item-labels {
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  #project-pg-explore-more .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  #project-pg-explore-more .project-item-labels > *:last-child {
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  #project-pg-explore-more .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  #project-pg-explore-more .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 1.2rem;
  }
  #project-pg-explore-more .project-item-content-slim .project-item-description {
    padding-top: 1rem;
  }
  #project-pg-explore-more .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  #project-pg-explore-more .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1rem;
    font-size: 1rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  #project-pg-explore-more .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  #project-pg-explore-more .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  #project-pg-explore-more .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  #project-pg-explore-more .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 55%;
  }
  #project-pg-explore-more > * {
    margin-bottom: 3.75rem;
  }
  #project-pg-explore-more > *:last-child {
    margin-bottom: 0;
  }
  #contact-pg {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #contact-pg-inner {
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    color: #a6a6a6;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #contact-pg-inner > * {
    width: 100%;
  }
  #contact-pg-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    padding-top: 1.8rem;
    padding-bottom: 2.7rem;
  }
  .contact-pg-content-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-pg-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
  }
  .contact-pg-content-col:first-child {
    padding-right: 0.5em;
  }
  .contact-pg-content-col:last-child {
    padding-left: 0.5em;
  }
  .contact-pg-content-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  .contact-pg-content-col h4 > * {
    padding-right: 0.3em;
  }
  .contact-pg-content-col a {
    text-decoration: none;
  }
  .contact-pg-content-img {
    width: 100%;
    padding-top: 3rem;
  }
  .contact-pg-content-email-link {
    font-size: 1.125rem;
    color: #a6a6a6;
    line-height: 1.725em;
  }
  .contact-pg-content-resume-link {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .contact-pg-content-resume-link > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .contact-pg-content-resume-link > :last-child {
    font-size: 1.125rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg-form {
    box-sizing: border-box;
    margin-left: 0;
    border-radius: 0;
    background-color: #232323;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-input {
    color: #a6a6a6;
  }
  #contact-pg-form .MuiInputLabel-root:focus,
  #contact-pg-form .MuiInputBase-input:focus {
    color: #ffc83a;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-root,
  #contact-pg-form .MuiInputBase-input {
    line-height: 2em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputLabel-root {
    font-weight: 600;
  }
  #contact-pg-form .MuiInputBase-input {
    height: 2em;
  }
  #contact-pg-form textarea.MuiInputBase-input {
    line-height: 1.675em;
    font-size: 1.125rem;
  }
  #contact-pg-form .MuiInputBase-root::before {
    border-bottom-color: #a6a6a6;
  }
  #contact-pg-form .MuiInputBase-root::before.Mui-active, #contact-pg-form .MuiInputBase-root::before.Mui-focused, #contact-pg-form .MuiInputBase-root::before:focus {
    border-bottom-color: #ffc83a;
  }
  #contact-pg-form .Mui-focused,
  #contact-pg-form .Mui-active {
    color: #ffc83a;
  }
  #contact-pg-form .MuiFormHelperText-root.Mui-error {
    color: rgb(211, 47, 47);
  }
  #contact-pg-form > * {
    margin-top: 1.25rem;
  }
  #contact-pg-form > :first-child {
    margin-top: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.5rem;
    align-self: end;
    align-self: flex-end;
    margin: 0;
    margin-top: 2.875rem;
    margin-bottom: 0.26em;
    margin-right: 0.24em;
  }
  #contact-pg-form .contact-pg-contact-form-btn::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ffc83a;
    z-index: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn > .action-btn-content {
    border: 0.083em solid #ffc83a;
    color: #ffc83a;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  .contact-pg-contact-form-header {
    display: flex;
    width: 100%;
  }
  .contact-pg-contact-form-header h3 {
    align-self: end;
    color: #ffc83a;
    width: auto;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .contact-pg-contact-form-header h3 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .contact-pg-contact-form-header h3::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .contact-pg-contact-form-header p {
    margin: 0;
    padding: 0;
    padding-left: 3.2rem;
    font-size: 1.25rem;
    line-height: 1.625em;
    color: #ffc83a;
    flex-grow: 1;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .contact-pg-contact-form-row {
    display: flex;
    box-sizing: border-box;
  }
  .contact-pg-contact-form-row > :first-child {
    margin-right: 1rem;
  }
  .contact-pg-contact-form-row > :last-child {
    margin-left: 1rem;
  }
  .skills-pg-container .skills-banner-skills-list {
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
    display: flex;
    width: 100%;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-pg-container .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  #inner-page-wrapper {
    min-height: calc(100vh - 4.5rem);
    width: 100%;
  }
}
@media (max-width: 575px) {
  .fallback-inner-wrapper .loading-icon-programmer {
    width: 80%;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.05rem;
  }
  #footer-inner > * {
    margin-bottom: 1.2rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.2rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 0.7875rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.225rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.2rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer-row-container:last-child {
    padding-right: 2.4em;
  }
  .footer-row-item {
    margin-left: 0.9em;
  }
  .footer-row-item:first-child {
    margin-bottom: 0.6em;
  }
  #navbar-linkedIn {
    flex-grow: 1;
    justify-content: end;
  }
  #navbar-linkedIn a {
    width: auto;
  }
  #navbar-links {
    justify-content: center;
  }
  #navbar-links button,
  #navbar-links a {
    width: 100%;
    padding: 0 5%;
    margin: 0;
  }
  #navbar-links button:first-child,
  #navbar-links a:first-child {
    margin-left: 0;
  }
  #navbar-links button:last-child,
  #navbar-links a:last-child {
    background: transparent;
  }
  #footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #afafaf;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    border-top: 1px solid #4e4e4e;
    z-index: 1;
  }
  #footer-inner {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 1.05rem;
  }
  #footer-inner > * {
    margin-bottom: 1.2rem;
  }
  #footer-inner > *:last-child {
    margin-bottom: 0;
  }
  #footer-inner > span {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.625em;
  }
  .footer-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-row-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.2rem;
  }
  .footer-row-container > svg {
    width: 2em;
  }
  .footer-row-container:last-child {
    margin-bottom: 0;
  }
  .footer-row-container:last-child > svg {
    width: 2em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    text-decoration: none;
  }
  .footer-row-item {
    font-size: 0.7875rem;
    display: flex;
    align-items: flex-end;
    align-items: end;
    text-decoration: none;
  }
  .footer-row-item:first-child {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }
  .footer-row-item span {
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
  }
  .footer-row-item span:first-child {
    font-size: 1.225rem;
    font-weight: 600;
    color: #ffc83a;
    margin-right: 0.2em;
  }
  .footer-row-item span:first-child svg {
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.2em;
  }
  .footer-row-item span:last-child {
    font-weight: 400;
    color: #afafaf;
    margin-bottom: 0.16em;
  }
  #footer-bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }
  #footer-bottom-footer span {
    text-align: center;
    line-height: 1.625em;
    padding-top: 1.2rem;
  }
  #footer-bottom-footer span:first-child {
    position: relative;
  }
  #footer-bottom-footer span:first-child:after {
    position: absolute;
    top: -0.5px;
    left: calc((100% - 100%) / 2);
    width: 100%;
    content: "";
    height: 1px;
    background-color: #4e4e4e;
  }
  #footer-bottom-footer span:last-child {
    color: #afafaf;
    font-size: 0.85em;
  }
  #footer-bottom-footer a {
    margin-left: 0.05em;
    font-size: 0.85em;
    text-decoration: none;
    color: #ffc83a;
    padding-top: 0.1em;
    border-bottom: 1px solid #ffc83a;
    padding-bottom: 0.1em;
  }
  .footer-row-container-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer-row-container:last-child {
    padding-right: 2.4em;
  }
  .footer-row-item {
    margin-left: 0.9em;
  }
  .footer-row-item:first-child {
    margin-bottom: 0.6em;
  }
  #home-pg-intro-banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  #home-pg-intro-banner > * {
    box-sizing: border-box;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
  }
  .home-pg-intro-banner-img-container {
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #d24040;
    overflow: hidden;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    background-size: cover;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-pg-intro-banner-img-wrapper .lazy-load-image-background {
    background-position: top;
  }
  .home-pg-intro-banner-img-wrapper .lazy-img-wrapper {
    box-sizing: border-box;
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 13%;
    width: 100%;
    height: 100%;
    background-size: 74%;
    background-repeat: no-repeat;
    background-position-y: -21%;
    background-position-x: 50%;
  }
  .home-pg-intro-banner-img-wrapper img {
    object-position: top;
  }
  .home-pg-intro-banner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    color: #f2f2f2;
    overflow: hidden;
  }
  .home-pg-intro-banner-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .home-pg-intro-banner-title h2 {
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.35em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h2 > * {
    padding-right: 0.4em;
  }
  .home-pg-intro-banner-title h2 > *:last-child {
    padding-right: 0;
  }
  .home-pg-intro-banner-title h3 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .home-pg-intro-banner-title h3 > * {
    padding-right: 0.3em;
  }
  .home-pg-intro-banner-title h3 > :nth-child(2) {
    margin-bottom: 0;
    color: #ffc83a;
  }
  .home-pg-intro-banner-title > * {
    padding-bottom: 1rem;
  }
  .home-pg-intro-banner-sub-content {
    animation: 2s ease-in-out 0s fade-up;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  .home-pg-intro-banner-sub-content p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.93em;
    color: #f2f2f2;
    margin: 0;
    width: 100%;
    padding-bottom: 1.5rem;
  }
  .home-pg-intro-banner-sub-content button {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.125rem;
  }
  .home-pg-intro-banner-sub-content button::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ff5d5d;
    z-index: 0;
  }
  .home-pg-intro-banner-sub-content button > .action-btn-content {
    border: 0.083em solid #ff5d5d;
    color: #ff5d5d;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  #home-pg-intro-banner {
    flex-direction: column;
  }
  .home-pg-intro-banner-img-wrapper {
    max-width: 21.875rem;
  }
  .home-pg-intro-banner-img-container {
    display: flex;
    justify-content: center;
    height: 100%;
  }
  #home-pg-intro-banner > * {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  #home-pg-intro-banner > *:first-child {
    padding-bottom: 0;
  }
  .home-pg-intro-banner-content {
    align-items: center;
  }
  .home-pg-intro-banner-title > h2 > * {
    padding-left: 0.25em;
  }
  .home-pg-intro-banner-title > h3 > * {
    padding-left: 0.3em;
  }
  .home-pg-intro-banner-title > h2, .home-pg-intro-banner-title > h3 {
    justify-content: center;
  }
  .home-pg-intro-banner-sub-content {
    align-items: center;
  }
  #project-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
  }
  .project-banner-text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: #f2f2f2;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
    width: 100%;
  }
  .project-banner-text-content > h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-text-content > h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-text-content > h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-text-content > p {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    width: 100%;
    font-size: 1.125rem;
    line-height: 2em;
    margin: 0;
    padding-top: 1rem;
  }
  @keyframes element-appear {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .project-banner-text-content > p.visible {
    opacity: 1;
    animation: 3s ease-in-out 0s element-appear;
  }
  .project-banner-text-content > p .project-banner-ani-container {
    vertical-align: middle;
    position: relative;
    margin-top: -0.2em;
    min-width: 5em;
    min-height: 2em;
  }
  .project-banner-text-content > p .project-banner-ani-container::after {
    content: "";
    position: absolute;
    top: 0.25em;
    height: 1.5em;
    width: 1px;
    background: #f2f2f2;
  }
  .project-banner-featured {
    display: flex;
    justify-content: start;
    position: relative;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .project-banner-featured > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .project-banner-featured > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .project-banner-featured-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .project-banner-featured-container > * {
    margin-bottom: 5.4rem;
  }
  .project-banner-featured-container > :last-child {
    margin-bottom: 0;
  }
  .project-banner-featured-container .project-item {
    display: flex;
    width: 100%;
    min-height: 0rem;
    flex-direction: column;
  }
  .project-banner-featured-container .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 0rem;
    width: 100%;
  }
  .project-banner-featured-container .project-item-content.project-item-right-orientation {
    padding-left: 0rem;
    padding-right: 0;
  }
  .project-banner-featured-container .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.75rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-banner-featured-container .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-banner-featured-container .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-banner-featured-container .project-item-title:after {
    height: 0.25em;
  }
  .project-banner-featured-container .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  .project-banner-featured-container .project-item-labels {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  .project-banner-featured-container .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .project-banner-featured-container .project-item-labels > *:last-child {
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  .project-banner-featured-container .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  .project-banner-featured-container .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 2.25rem;
  }
  .project-banner-featured-container .project-item-content-slim .project-item-description {
    padding-top: 0;
  }
  .project-banner-featured-container .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  .project-banner-featured-container .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1rem;
    font-size: 1rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  .project-banner-featured-container .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  .project-banner-featured-container .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  .project-banner-featured-container .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  .project-banner-featured-container .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  .project-banner-featured-container .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    aspect-ratio: 3/2;
  }
  .project-banner-view-all-banner {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .project-banner-view-all-banner > p {
    font-size: 1.25rem;
    color: #f2f2f2;
    font-weight: 400;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 1.125rem;
    margin: 0;
  }
  .project-banner-view-all-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .project-banner-view-all-btn > a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .project-banner-view-all-btn > a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .project-banner-view-all-btn > a > :last-child {
    font-size: 1.75rem;
    width: 1.3em;
    height: 1.3em;
  }
  .project-banner-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .project-banner-featured > .sticky-label {
    padding-bottom: 2rem;
    text-transform: none;
  }
  .project-banner-featured .project-item-img {
    margin-top: 1.7rem;
    margin-bottom: 2rem;
  }
  #skills-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
  }
  #skills-banner-inner {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
  }
  .skills-banner-media-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    padding-right: 1rem;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    width: auto;
  }
  .skills-banner-media-content .skills-banner-media-img-container > svg {
    width: 100%;
    height: 100%;
  }
  .skills-banner-text-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-text-content h2 {
    color: transparent;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .skills-banner-text-content h2 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .skills-banner-text-content h2::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .skills-banner-text-content p {
    padding-top: 1rem;
    color: #f2f2f2;
    line-height: 2em;
    margin: 0;
    width: 100%;
    font-size: 1.125rem;
    flex-grow: 1;
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    display: flex;
    width: 100%;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    padding-top: 1.5rem;
  }
  .skills-banner-text-content button > :first-child,
  .skills-banner-text-content a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .skills-banner-text-content button > :last-child,
  .skills-banner-text-content a > :last-child {
    font-size: 1.75rem;
    width: 1.3em;
    height: 1.3em;
  }
  .skills-banner-skills-list {
    padding-top: 2.25rem;
    padding-bottom: 0rem;
    display: flex;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.125rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  .skills-banner-skills-list-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .skills-banner-skills-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-banner-skills-list > .sticky-label {
    text-align: center;
    padding-bottom: 2rem;
    text-transform: none;
  }
  .skills-banner-text-content h2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .skills-banner-media-content {
    margin-right: 0.625rem;
    padding-bottom: 0.3em;
  }
  .skills-banner-media-content .skills-banner-media-img-container {
    height: 1.4em;
  }
  #about-me-pg {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #about-me-pg-inner-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .about-me-pg-text-header {
    width: 100%;
    color: #f2f2f2;
    display: flex;
    line-height: 1.625em;
    justify-content: center;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 2.25rem;
  }
  .about-me-pg-text-header .about-me-pg-letters {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  .about-me-pg-text-header .about-me-pg-letters > * {
    padding-right: 0.5em;
  }
  .about-me-pg-text-header .about-me-pg-letters > *:last-child {
    padding-right: 0;
  }
  .about-me-pg-text-header .about-me-pg-letter {
    transform: rotateY(-90deg);
  }
  .about-me-pg-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-left: 0rem;
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(-80%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes fade-in {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  .about-me-pg-text-content > p {
    flex-grow: 1;
    opacity: 0;
    position: relative;
    margin: 0;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 2.485em;
  }
  .about-me-pg-text-content > p.visible {
    opacity: 1;
    animation: 1s ease-in-out 0s fade-in;
    animation-delay: 0ms;
  }
  .about-me-pg-text-content > p span {
    line-height: 1em;
    font-size: 2.7rem;
    color: #ff5d5d;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .about-me-pg-action-btns {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
  }
  .about-me-pg-action-btns > a:first-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ffc83a;
    margin-bottom: 0.35em;
  }
  .about-me-pg-action-btns > a:first-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:first-child > :last-child {
    font-size: 1.75rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-action-btns > a:last-child {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .about-me-pg-action-btns > a:last-child > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .about-me-pg-action-btns > a:last-child > :last-child {
    font-size: 1.75rem;
    width: 1.3em;
    height: 1.3em;
  }
  .about-me-pg-media-content {
    position: relative;
    display: flex;
    align-items: start;
    width: 100%;
    min-width: 100%;
  }
  .about-me-pg-media-content > svg {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .about-me-pg-media-content > svg image {
    position: relative;
  }
  .about-me-pg-media-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
  .about-me-pg-media-content {
    align-self: center;
    margin-top: 2.5rem;
  }
  .about-me-pg-action-btns > a {
    justify-content: center;
  }
  #about-pg {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-wave-bg {
    height: 21rem;
  }
  #about-pg-wave-bg #wave-bg-rotate-wave-intro-wave {
    background: linear-gradient(138.2deg, #ff5d5d 49.26%, #ffc83a 93.61%);
  }
  #about-pg-intro {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
  }
  #about-pg-intro-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about-pg-intro-inner > h2 {
    justify-content: center;
    padding: 0.525em 0;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #about-pg-intro-inner > h2 > * {
    padding-right: 0.3em;
  }
  #about-pg-intro-inner::after {
    margin-top: 2.7rem;
    margin-bottom: 1.575rem;
    content: "";
    width: 50%;
    height: 0.8em;
    background-color: #6b6b6b;
  }
  #about-pg-image-collage {
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }
  #about-pg-image-collage svg {
    width: 100%;
    margin: auto;
  }
  #about-pg-intro-text-content {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 2.2em;
  }
  #about-pg-intro-text-content p {
    margin-bottom: 1em;
    margin-top: 0;
  }
  #about-pg-intro-text-content p:last-child {
    margin-bottom: 0;
  }
  #about-pg-intro-text-content a {
    text-decoration: none;
    color: #ffc83a;
  }
  #about-pg-intro-text-content .about-pg-text-first-letter {
    font-size: 2.4rem;
    line-height: 1em;
    color: #ffc83a;
    font-family: "Tinos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #about-pg-education {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-top: 3rem;
    max-width: 1500px;
  }
  #about-pg-education-header {
    align-self: center;
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.25rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #about-pg-education-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  #about-pg-education-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  h2#about-pg-education-header {
    margin-bottom: 3rem;
  }
  #about-pg-education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-container-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #about-pg-education-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2rem;
    width: 100%;
    align-self: center;
  }
  #about-pg-education-display .lazy-load-image-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    flex: 1;
  }
  #about-pg-education-display .lazy-img-wrapper {
    background-size: cover;
  }
  #about-pg-education-display img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #about-pg-education-display a {
    box-sizing: border-box;
    padding: 0;
    width: 7.125rem;
    height: 7.125rem;
    border-radius: 12%;
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
  }
  #about-pg-education-display img {
    border-radius: 12%;
    object-fit: contain;
    object-position: center;
  }
  #about-pg-education-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #f2f2f2;
    font-size: 1rem;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  #about-pg-education-action a {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
    margin-top: 1.5rem;
  }
  #about-pg-education-action a > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  #about-pg-education-action a > :last-child {
    font-size: 1.5rem;
    width: 1.3em;
    height: 1.3em;
  }
  #about-pg-intro-inner::after {
    width: 80%;
    height: 0.5em;
  }
  #about-pg-education-display {
    width: 100%;
  }
  #project-pg {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
  }
  #project-pg-wave-bg {
    height: 25rem;
  }
  #project-pg-wave-bg #wave-bg-rotate-wave-project-wave {
    background: #d93a3a;
  }
  #project-pg-inner {
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    align-items: start;
    max-width: 1500px;
  }
  #project-pg-inner h2 {
    padding: 0.525em 0;
    justify-content: center;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  #project-pg-inner h2 > * {
    padding-right: 0.3em;
  }
  #project-pg-inner .full-pg-loading-icon {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 2rem;
  }
  #project-pg-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 18rem;
  }
  #project-pg-carousel .project-pg-carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  #project-pg-carousel .project-pg-carousel-inner-wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 3.375rem;
  }
  #project-pg-carousel .swiper-wrapper {
    padding: 0;
    margin: 0;
  }
  #project-pg-carousel .swiper-slide {
    border: none;
    margin: 0;
    padding: 0;
    height: 18rem;
  }
  #project-pg-carousel .swiper-pagination {
    bottom: 0;
    height: auto;
  }
  #project-pg-carousel .swiper-pagination-bullet {
    border-color: #afafaf;
    border-style: solid;
    border-width: 0.11rem;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 0.4rem;
    aspect-ratio: 1/1;
    opacity: 1;
    background: transparent;
  }
  #project-pg-carousel .swiper-pagination-bullet-active {
    background-color: #afafaf;
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-prev {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next {
    transform: scale(0.78);
  }
  #project-pg-carousel .swiper-pagination-bullet-active-next-next {
    transform: scale(0.78);
  }
  .project-pg-slide {
    position: relative;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .project-pg-slide-inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .project-pg-slide-img-container {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .project-pg-slide-img-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.5%;
    width: 99%;
    height: 100%;
    background-color: #2e2e2e;
    z-index: 0;
  }
  .project-pg-slide-text-content {
    box-sizing: border-box;
    position: relative;
    padding: 2% 3%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 35%, rgb(30, 30, 30) 100%);
  }
  .project-pg-slide-first-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.02em;
    box-sizing: border-box;
  }
  .project-pg-slide-first-row h4 {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-first-row h4 > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-project-urls {
    display: flex;
    width: auto;
    margin-left: 3%;
    box-sizing: border-box;
    align-items: flex-end;
    align-items: end;
  }
  .project-pg-project-url {
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1rem;
    height: 1.625em;
    width: 1.625em;
    background-color: #3b3b3b;
    aspect-ratio: 1/1;
    color: #c5c5c5;
  }
  .project-pg-project-url:last-child {
    background-color: #d93a3a;
    color: #f2f2f2;
    margin-left: 0.3em;
  }
  .project-pg-project-url:last-child > svg {
    fill: #f2f2f2;
  }
  .project-pg-project-url > svg {
    position: relative;
    z-index: 1;
    height: 60%;
    width: auto;
  }
  .project-pg-slide-dates {
    padding-top: 0.5rem;
    text-decoration: none;
    justify-content: space-between;
    color: #afafaf;
    text-align: center;
    flex-wrap: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.875rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-slide-dates > * {
    padding-right: 0.3em;
  }
  .project-pg-slide-date {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .project-pg-slide-date:last-child {
    justify-content: flex-end;
  }
  .project-pg-explore-more-header {
    color: #ff5d5d;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .project-pg-explore-more-header > * {
    padding-right: 0;
    padding-left: 0;
  }
  .project-pg-explore-more-header::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .project-pg-explore-more-header {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }
  #project-pg-explore-more {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #project-pg-explore-more .project-item {
    display: flex;
    width: 100%;
    min-height: 0rem;
    flex-direction: column;
  }
  #project-pg-explore-more .project-item-content {
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding-right: 0rem;
    width: 100%;
  }
  #project-pg-explore-more .project-item-content.project-item-right-orientation {
    padding-left: 0rem;
    padding-right: 0;
  }
  #project-pg-explore-more .project-item-title {
    position: relative;
    padding-bottom: 0.55em;
    text-transform: none;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.75rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  #project-pg-explore-more .project-item-title > * {
    padding-right: 0;
    padding-left: 0;
  }
  #project-pg-explore-more .project-item-title::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  #project-pg-explore-more .project-item-title:after {
    height: 0.25em;
  }
  #project-pg-explore-more .project-item-title {
    padding-top: 0;
    margin-top: -0.3em;
  }
  #project-pg-explore-more .project-item-labels {
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    padding-top: 0.4em;
  }
  #project-pg-explore-more .project-item-labels > * {
    margin-right: 1em;
    margin-bottom: 1em;
  }
  #project-pg-explore-more .project-item-labels > *:last-child {
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-topic {
    color: #ff5d5d;
    background-color: transparent;
    border: 0.2em solid #ff5d5d;
    padding-bottom: 0.05em;
    padding-right: 0.77em;
    padding-left: 0.77em;
    padding-top: 0;
    height: 2em;
  }
  #project-pg-explore-more .project-item-project-topic .MuiChip-label {
    padding-left: 0.8em;
    padding-right: 0.8em;
  }
  #project-pg-explore-more .project-item-description {
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.625em;
    flex-grow: 1;
    padding-bottom: 2.25rem;
  }
  #project-pg-explore-more .project-item-content-slim .project-item-description {
    padding-top: 0;
  }
  #project-pg-explore-more .project-item-action-btns {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-grow: 1;
    align-items: end;
  }
  #project-pg-explore-more .project-item-project-url {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-right: 1rem;
    font-size: 1rem;
    text-decoration: none;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 1.1em;
    padding-left: 1em;
    padding-top: 0.69em;
    padding-bottom: 0.69em;
    letter-spacing: 0.02em;
    border-radius: 0.25em;
    font-weight: 700;
  }
  #project-pg-explore-more .project-item-project-url:first-child {
    color: #c5c5c5;
    background-color: #3b3b3b;
  }
  #project-pg-explore-more .project-item-project-url:last-child {
    color: white;
    background-color: #d93a3a;
    margin-right: 0;
  }
  #project-pg-explore-more .project-item-project-url > :first-child {
    height: 1.1em;
    padding-right: 0.4em;
  }
  #project-pg-explore-more .project-item-project-url > :first-child svg {
    height: 100%;
    width: 100%;
  }
  #project-pg-explore-more .project-item-img {
    color: #f2f2f2;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    aspect-ratio: 3/2;
  }
  #project-pg-explore-more > * {
    margin-bottom: 3.75rem;
  }
  #project-pg-explore-more > *:last-child {
    margin-bottom: 0;
  }
  #project-pg-explore-more .project-item-img {
    margin-top: 1.7rem;
    margin-bottom: 0.7rem;
  }
  #project-pg-explore-more .project-pg-slide-text-content {
    background: linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgb(30, 30, 30) 100%);
  }
  #project-pg-explore-more .project-item-labels {
    margin-bottom: 0.5rem;
  }
  #project-pg-explore-more .project-item:first-child {
    margin-top: 1.25rem;
  }
  #contact-pg {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #contact-pg-inner {
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    color: #a6a6a6;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #contact-pg-inner > * {
    width: 100%;
  }
  #contact-pg-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.75rem;
    padding-bottom: 2.625rem;
  }
  .contact-pg-content-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-pg-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
  }
  .contact-pg-content-col:first-child {
    padding-right: 0.5em;
  }
  .contact-pg-content-col:last-child {
    padding-left: 0.5em;
  }
  .contact-pg-content-col h4 {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.25rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 600;
  }
  .contact-pg-content-col h4 > * {
    padding-right: 0.3em;
  }
  .contact-pg-content-col a {
    text-decoration: none;
  }
  .contact-pg-content-img {
    width: 100%;
    padding-top: 2.625rem;
  }
  .contact-pg-content-email-link {
    font-size: 0.9rem;
    color: #a6a6a6;
    line-height: 1.725em;
  }
  .contact-pg-content-resume-link {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    line-height: 1.625em;
    color: #ff5d5d;
  }
  .contact-pg-content-resume-link > :first-child {
    padding-right: 0.4em;
    padding-top: 0.1em;
  }
  .contact-pg-content-resume-link > :last-child {
    font-size: 0.9rem;
    width: 1.3em;
    height: 1.3em;
  }
  #contact-pg-form {
    box-sizing: border-box;
    margin-left: 0;
    border-radius: 0;
    background-color: #232323;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-input {
    color: #a6a6a6;
  }
  #contact-pg-form .MuiInputLabel-root:focus,
  #contact-pg-form .MuiInputBase-input:focus {
    color: #ffc83a;
  }
  #contact-pg-form .MuiInputLabel-root,
  #contact-pg-form .MuiInputBase-root,
  #contact-pg-form .MuiInputBase-input {
    line-height: 2em;
    font-size: 1rem;
  }
  #contact-pg-form .MuiInputLabel-root {
    font-weight: 600;
  }
  #contact-pg-form .MuiInputBase-input {
    height: 2em;
  }
  #contact-pg-form textarea.MuiInputBase-input {
    line-height: 1.675em;
    font-size: 1rem;
  }
  #contact-pg-form .MuiInputBase-root::before {
    border-bottom-color: #a6a6a6;
  }
  #contact-pg-form .MuiInputBase-root::before.Mui-active, #contact-pg-form .MuiInputBase-root::before.Mui-focused, #contact-pg-form .MuiInputBase-root::before:focus {
    border-bottom-color: #ffc83a;
  }
  #contact-pg-form .Mui-focused,
  #contact-pg-form .Mui-active {
    color: #ffc83a;
  }
  #contact-pg-form .MuiFormHelperText-root.Mui-error {
    color: rgb(211, 47, 47);
  }
  #contact-pg-form > * {
    margin-top: 1.25rem;
  }
  #contact-pg-form > :first-child {
    margin-top: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    color: inherit;
    position: relative;
    width: auto;
    padding: 0;
    font-size: 1.25rem;
    align-self: end;
    align-self: flex-end;
    margin: 0;
    margin-top: 2.875rem;
    margin-bottom: 0.26em;
    margin-right: 0.24em;
  }
  #contact-pg-form .contact-pg-contact-form-btn::before {
    content: "";
    position: absolute;
    top: 0.26em;
    left: 0.24em;
    height: 100%;
    width: 100%;
    background-color: #ffc83a;
    z-index: 0;
  }
  #contact-pg-form .contact-pg-contact-form-btn > .action-btn-content {
    border: 0.083em solid #ffc83a;
    color: #ffc83a;
    line-height: 2.5em;
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: #2e2e2e;
    padding-right: 0.75em;
    padding-left: 0.75em;
    position: relative;
    z-index: 1;
  }
  .contact-pg-contact-form-header {
    display: flex;
    width: 100%;
  }
  .contact-pg-contact-form-header h3 {
    align-self: end;
    color: #ffc83a;
    width: auto;
    position: relative;
    padding-bottom: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.64em;
    font-weight: 400;
  }
  .contact-pg-contact-form-header h3 > * {
    padding-right: 0;
    padding-left: 0;
  }
  .contact-pg-contact-form-header h3::after {
    content: "";
    background-color: #6b6b6b;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0.12em;
  }
  .contact-pg-contact-form-header p {
    margin: 0;
    padding: 0;
    padding-left: 1.625rem;
    font-size: 1rem;
    line-height: 1.625em;
    color: #ffc83a;
    flex-grow: 1;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .contact-pg-contact-form-row {
    display: flex;
    box-sizing: border-box;
  }
  .contact-pg-contact-form-row > :first-child {
    margin-right: 1rem;
  }
  .contact-pg-contact-form-row > :last-child {
    margin-left: 1rem;
  }
  .skills-pg-container .skills-banner-skills-list {
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
    display: flex;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    color: #8a8a8a;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: "JetBrains Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label p {
    margin: 0;
    text-align: end;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list.sidebar-disabled > .sticky-label {
    text-align: center;
    padding-bottom: 0.5em;
    text-transform: none;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    flex-grow: 1;
    font-size: 1.125rem;
    width: 100%;
    display: grid;
    grid-gap: 2em; /* optional */
    font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    grid-template-columns: repeat(3, 1fr);
    color: #ffc83a;
  }
  .skills-pg-container .skills-banner-skills-list-inner .skills-banner-skills-list-item {
    display: flex;
    align-items: center;
    line-height: 1.625em;
    text-align: center;
    justify-content: center;
  }
  .skills-pg-container .skills-banner-skills-list-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .skills-pg-container .skills-banner-skills-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skills-pg-container .skills-banner-skills-list > .sticky-label {
    text-align: center;
    padding-bottom: 2rem;
    text-transform: none;
  }
}
@media (any-hover: hover) {
  #about-pg-education-display a {
    transition: transform ease-out 0.2s;
  }
  #about-pg-education-display a:hover {
    transform: scale(1.05);
  }
  #about-pg-education-action a {
    transition: transform ease-out 0.2s;
  }
  #about-pg-education-action a:hover {
    transform: scale(1.05);
  }
  .about-pg-education-explore-item {
    transition: transform ease-out 0.2s;
  }
  .about-pg-education-explore-item:hover {
    transform: scale(1.05);
  }
  .project-pg-pagination-btns:hover {
    background-color: #3ac2ff;
    color: #f2f2f2;
  }
  .project-pg-project-url {
    transition: transform 0.3s ease-out;
  }
  .project-pg-project-url:hover {
    transform: scale(1.1);
  }
  .project-item-project-url {
    transition: transform ease-out 0.2s;
  }
  .project-item-project-url:hover {
    transform: scale(1.1);
  }
  .skills-banner-text-content button,
  .skills-banner-text-content a {
    transition: transform ease-out 0.2s;
  }
  .skills-banner-text-content button:hover,
  .skills-banner-text-content a:hover {
    transform: scale(1.05);
  }
  .home-pg-intro-banner-sub-content button {
    transition: transform ease-out 0.2s;
  }
  .home-pg-intro-banner-sub-content button:hover {
    transform: scale(1.05);
  }
  .project-banner-text-content a {
    transition: transform ease-out 0.2s;
  }
  .project-banner-text-content a:hover {
    transform: scale(1.05);
  }
  .project-banner-view-all-btn > a {
    transition: transform ease-out 0.2s;
  }
  .project-banner-view-all-btn > a:hover {
    transform: scale(1.05);
  }
  .about-me-pg-action-btns > a {
    transition: transform ease-out 0.2s;
  }
  .about-me-pg-action-btns > a:hover {
    transform: scale(1.05);
  }
  #navbar-linkedIn a {
    transition: transform ease-out 0.2s;
  }
  #navbar-linkedIn a:hover {
    transform: scale(1.1);
  }
  #navbar #navbar-links button .link-animation-container:after,
  #navbar #navbar-links a .link-animation-container:after {
    background-image: linear-gradient(0deg, #afafaf 0%, #afafaf 100%);
  }
  #navbar.color #navbar-links button .link-animation-container:after,
  #navbar.color #navbar-links a .link-animation-container:after {
    background-image: linear-gradient(0deg, #f2f2f2 0%, #f2f2f2 100%);
  }
  @keyframes navbar-anchor-background-animation {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  #navbar-links button .link-animation-container,
  #navbar-links a .link-animation-container {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  #navbar-links button .link-animation-container:after,
  #navbar-links a .link-animation-container:after {
    position: absolute;
    content: "";
    bottom: 10%;
    height: 0.05em;
    width: 100%;
    left: 0;
    transform: translateX(-100%);
    background-position: 100% 85%;
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
  }
  #navbar-links button:hover .link-animation-container::after,
  #navbar-links a:hover .link-animation-container::after {
    animation: navbar-anchor-background-animation 1s linear 0.15s;
  }
  #navbar-links button:hover svg,
  #navbar-links a:hover svg {
    stroke: #f2f2f2;
    stroke-dashoffset: 26;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) 0.195s;
  }
  .contact-pg-contact-form-btn {
    transition: transform ease-out 0.2s;
  }
  .contact-pg-contact-form-btn:hover {
    transform: scale(1.05);
  }
  .contact-pg-content-resume-link {
    transition: transform ease-out 0.2s;
  }
  .contact-pg-content-resume-link:hover {
    transform: scale(1.05);
  }
}
html,
body {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  background-color: #2e2e2e;
  height: auto;
}

#root {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

#app-container {
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
}

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