html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	outline: none;
	text-decoration: none;
	color: white;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url(assets/fonts/ff193d9207bb1d3f63c1.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url(assets/fonts/f950111be01b92a807ba.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url(assets/fonts/23ca816af95c228bcb4e.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url(assets/fonts/122ef3399f6dfa1c2974.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url(assets/fonts/29a59be460ca29301c45.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --base-font-size: 16px; /* Default base font size */
  --base-padding: 50px;
  
  --z-1: 1; /* default (z-index) */
  --z-2: 2; /* for absolute elements (z-index) */
  --z-3: 3; /* to override everything else (z-index) */

  /* Dark Mode (Default) */
  --primary-color: #19F47F; /* Neon green */
  --secondary-color: #695BE4; /* Blue */
  --bg-color: #212227;
  --bg-color-secondary: #191B20;
  --text-color: #FFFFFF;
  --text-muted: #8D8D8D;
  --text-light: #D0D0D0;
  --read-more: #6759DE;
  --border-color: #3B3B3B;
  --border-color-secondary: #696969;
  --transparent-primary: rgba(25, 244, 127, 0.6);
  --bg-transparent: rgba(33, 34, 39, 0.4);
  --button-bg: #fff;
  --button-text: #111;
  --modal-text: #B5B5B5;

  --mobile-bg-primary: #7A7A7A;
}

/* Light Mode */
/* [data-theme="light"] {
  --primary-color: #19F47F;
  --secondary-color: #695BE4;
  --bg-color: #212227;
  --bg-color-secondary: #191B20;
  --text-color: #FFFFFF;
  --text-muted: #8D8D8D;
  --text-light: #D0D0D0;
  --read-more: #6759DE;
  --border-color: #3B3B3B;
  --border-color-secondary: #696969;
  --transparent-primary: rgba(25, 244, 127, 0.6);
  --button-bg: #fff;
  --button-text: #111;
} */

html {
  overflow-x: hidden;
  font-size: var(--base-font-size); /* This makes 1em, 1rem = 16px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
  color: var(--text-color);
  font-weight: 600;
  letter-spacing: 0;
}

h1 { font-size: 4rem; line-height: 58px; }
h2 { font-size: 1.5rem; line-height: 28.8px; }
h3 { font-size: 1.3rem; line-height: 24px; }
h4 { font-size: 1.1rem; line-height: 19.2px; }
h5 { font-size: 1rem; line-height: 16.8px; }

p, .paragraph, strong {
  font-size: 0.85rem;
  line-height: 17px;
  letter-spacing: 0;
}

p, .paragraph { font-weight: 500; }
strong, .bold { font-weight: 600; }
.bold-800 { font-weight: 800; }
 
.text-muted, span { color: var(--text-muted); }

span {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 12px;
}

li {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 13px;
  list-style: disc;
  color: var(--text-muted);
}

.date, .date-lg {
  font-weight: 600;
  color: var(--primary-color);
}

.scale-1_2 {
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.scale-1_2:hover {
  transform: scale(1.05);
}

.m-t12 {
  margin-top: 12px;
}

.m-v-12 {
  margin: 12px 0;
}

.disc {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--border-color);
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.g-1 {
  gap: 4px;
}

.g-2 {
  gap: 8px;
}

.g-3 {
  gap: 12px;
}

.g-4 {
  gap: 24px;
}

.d-hidden {
  display: none;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.j-start {
  justify-content: flex-start;
}

.border {
  padding: 5px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
}

.date { font-size: 0.75rem; line-height: 9.6px; }
.date-lg { font-size: 0.8rem; line-height: 14.4px; }

.primary-color { color: var(--primary-color); }
.secondary-color { color: var(--secondary-color); }

.t-center { text-align: center; }

.text-in, .text-in-vertical, .text-from-right {
  opacity: 0;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.text-in {
  transform: translateX(-40px);
  animation-name: textIn;
}

.text-in-vertical {
  transform: translateY(-40px);
  animation-name: textInVertical;
}

.text-from-right {
  transform: translateX(40px);
  animation-name: textInRight;
}

.typewriter {
  overflow: hidden;
  border-right: 0.15em solid var(--border-color); /* Cursor */
  white-space: nowrap;
  width: fit-content;
  letter-spacing: 0.05em;
  animation: typing 1.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

.draw-line-animation {
  width: var(--element-width-from);
  height: var(--element-height-from);
  transform: rotate(var(--element-rotate-deg));
  background-color: var(--border-color);
  animation: drawLine 0.7s forwards;
}

@keyframes drawLine {
  from {
    width: var(--element-width-from);
    height: var(--element-height-from);
  }
  to {
    width: var(--element-width-to);
    height: var(--element-height-to);
  }
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--border-color); }
}

@keyframes textIn {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes textInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes textInVertical {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
:root {
  --profile-image-size: 240px;
}

body {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 10em;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  background: 
    url(assets/img/ad9bd21cbdb72fbba21b.png) top left / 100% auto repeat-y, 
    url(assets/img/72b392b723600aebdb62.png) top left / 100% auto repeat-y,
    url(assets/img/7e6e6d7febf96e3bf98b.png) center / 100% repeat-y var(--bg-color);
  font-family: "Atkinson Hyperlegible Mono", serif;
  overflow-x: hidden;
}

img {
  width: 100%;
}

.divider {
  width: 2px;
  height: 100%;
  background: var(--border-color);
}

/* Dark Mode Toggle Button */
.theme-toggle {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 0.625em 1.25em;
  border-radius: 0.5em;
  font-size: 1em;
  cursor: pointer;
  margin-bottom: 1em;
  transition: background 0.3s, color 0.3s;
}

.theme-toggle:hover {
  opacity: 0.8;
}

/* Resume Styling */
.resume {
  width: calc(100vw - var(--base-padding));
  max-width: 1440px;
  min-width: 1440px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
}

.resume__education,
.resume__education-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#education-line-wrapper {
  position: absolute;
  top: -130px;
  left: -500px;
}

#linkedin-line-wrapper {
  position: absolute;
  top: -122px;
  left: 201px;
}

.resume__education-header {
  flex: 1;
  gap: 2em;
  justify-content: stretch;
  margin-bottom: 15px;
}

.resume__education-header-content {
  display: flex;
  gap: 2em;
  margin-left: 14px;
}

.resume__education-header-icon-wrapper,
.resume__education-header-icon-right-link,
.resume__footer-link-linkedin,
.resume__linkedin-project-icon,
.resume__footer-link-email,
.resume__actions-icon-wrapper {
  border: 3px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume__education-header-icon-wrapper,
.resume__actions-icon-wrapper {
  width: 6.9375em;
  height: 6.9375em;
  min-width: 6.9375em;
  transform: translateY(30px);
}

.resume__education-header-icon {
  margin-top: 1em;
}

.resume__education-header-info {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}

.resume__education-title {
  text-transform: uppercase;
}

.resume__education-list {
  display: flex;
  gap: 0.75em;
}

.resume__education-item {
  max-width: 125px;
}

.resume__education-header-icon-right {
  position: absolute;
  right: 283px;
  top: 58px;
}

.resume__education-header-icon-right-link {
  position: relative;
  cursor: pointer;
  padding: 4px;
  transition: all 0.5s;
}

.resume__education-image {
  width: 7.5em;
  height: 7.5em;
  object-fit: cover;
}

.resume__name {
  font-size: 1.5em;
  font-weight: bold;
}

.resume__role {
  font-size: 1em;
  color: var(--text-muted);
}

/* Block: Profile */
.resume__profile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: 52px;
}

.resume__profile-early {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  gap: 32px;
}

.resume__profile-early .resume__profile-item:nth-child(2) {
  margin-left: 52px;
}

.resume__profile-early .resume__profile-item:nth-child(3) {
  margin-left: 118px;
}

.resume__profile-item {
  display: flex;
  gap: 1.1em;
}

.resume__profile-icon {
  margin-top: 0.6em;
}

.resume__profile-icon-wrapper {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--border-color);
}

.resume__profile-early-info {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.resume__profile-early-title {
  letter-spacing: 0.25em;
  margin-left: 11px;
}

.resume__profile-early-text {
  max-width: 218px;
}

.resume__profile-block {
  display: flex;
  gap: 2.5em;
  margin-right: 7em;
  z-index: var(--z-3);
}

.resume__profile-picture {
  position: relative;
}

/* Common styles for all connection lines */
.resume__profile-project-line-connection-1,
.resume__profile-project-line-connection-2,
.resume__profile-project-line-connection-3,
.resume__profile-project-line-connection-4,
.resume__profile-project-line-connection-5,
.resume__profile-project-line-connection-6,
.resume__aside-right-first-project-connection-line,
.resume__aside-left-first-project-connection-line,
.resume__aside-right-second-project-connection-line,
.resume__aside-left-second-project-connection-line,
.resume__tablet-project-connection-line,
.resume__bottom-project-connection-line {
  position: absolute;
  cursor: pointer;
  background-color: var(--border-color);
  transition: all 0.5s;
  z-index: var(--z-2);
  width: 3px;
}

/* Vertical connection lines */
.resume__profile-project-line-connection-1,
.resume__profile-project-line-connection-2,
.resume__profile-project-line-connection-3,
.resume__profile-project-line-connection-4,
.resume__profile-project-line-connection-5,
.resume__profile-project-line-connection-6 {
  --margin-top: 0;
  margin-top: var(--margin-top);
  height: var(--height);
  left: var(--left);
}

/* Set specific values for vertical lines */
.resume__profile-project-line-connection-1 {
  --height: 0px;
  --left: 72px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 932px;
}
.resume__profile-project-line-connection-2 {
  --height: 0px;
  --left: 90px;
  --margin-top: 5px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 1418px;
}
.resume__profile-project-line-connection-3 {
  --height: 0px;
  --left: 110px;
  --margin-top: 9px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 2075px;
}
.resume__profile-project-line-connection-4 {
  --height: 0px;
  --left: 130px;
  --margin-top: 7px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 2445px;
}
.resume__profile-project-line-connection-5 {
  --height: 0px;
  --left: 150px;
  --margin-top: 5px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 2989px;
}
.resume__profile-project-line-connection-6 {
  --height: 0px;
  --left: 168px;
  --margin-top: -1px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 3919px;
}

/* Angled connection lines */
.resume__aside-right-first-project-connection-line,
.resume__aside-left-first-project-connection-line,
.resume__aside-right-second-project-connection-line,
.resume__aside-left-second-project-connection-line,
.resume__tablet-project-connection-line {
  transform: rotate(var(--rotation));
  height: var(--height);
  left: var(--left, auto);
  right: var(--right, auto);
  top: var(--top, auto);
  bottom: var(--bottom, auto);
}

/* Set specific values for angled lines */
.resume__aside-right-first-project-connection-line { 
  --height: 384px; 
  --rotation: -55deg; 
  --left: -156px; 
  --bottom: -11px; 
}

.resume__aside-left-first-project-connection-line { 
  --height: 0; 
  --rotation: 55deg; 
  --right: -131px; 
  --bottom: 15px; 

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 330px;
}

.resume__aside-right-second-project-connection-line { 
  --height: 0; 
  --rotation: -55deg; 
  --left: -194px;
  --bottom: -37px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 466px;
}

.resume__aside-left-second-project-connection-line { 
  --height: 0px; 
  --rotation: 55deg; 
  --right: -159px; 
  --bottom: 85px; 

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 585px;
}

.resume__tablet-project-connection-line { 
  --height: 0; 
  --rotation: -55deg; 
  --left: -160px; 
  --top: -303px; 

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 413px;
}

/* Horizontal connection line (special case) */
.resume__bottom-project-connection-line {
  width: 174px;
  height: 3px;
  transform: rotate(45deg);
  --left: -139px;
  --top: -41px;
  left: var(--left);
  top: var(--top);

  --element-width-from: 0;
  --element-width-to: 174px;
  --element-height-from: 3px;
  --element-height-to: 3px;
}

/* Profile Borders */
.resume__profile-border,
.resume__profile-outer-border {
  position: absolute;
  border-radius: 50%;
  z-index: var(--z-3);
}

.resume__profile-border {
  width: calc(var(--profile-image-size) + 2px);
  height: calc(var(--profile-image-size) + 2px);
  left: -1px;
  border: 3px solid var(--border-color);
}

.resume__profile-outer-border {
  width: calc(var(--profile-image-size) + 20px);
  height: calc(var(--profile-image-size) + 20px);
  left: -10px;
  top: -8px;
  border: 4px solid var(--border-color);
  transition: all 0.5s;
}

.resume__profile-circle {
  position: absolute;
  border-radius: 50%;
  width: 9.4375em;
  height: 9.4375em;
  background-color: var(--transparent-primary);
  top: -5em;
  right: 2em;
}

.resume__profile-info {
  max-width: 229px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}

.resume__profile-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
}

.resume__header {
  display: flex;
}

.resume__profile-image {
  width: var(--profile-image-size);
  height: var(--profile-image-size);
  object-fit: cover;
  border-radius: 50%;
  padding: 0.5em;
}

.resume__content {
  display: flex;
  flex-direction: column;
  margin-top: 90px;
  margin-bottom: 100px;
  position: relative;
}

.resume__content-flex {
  display: flex;
  flex-direction: column;
}

.resume__content-item {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.resume__aside-container {
  display: flex;
  justify-content: space-between;
  margin-top: 90px;
}

.resume__aside-left,
.resume__aside-right {
  gap: 300px;
}

.resume__aside-right {
  gap: 200px;
}

.resume__aside-left {}

.resume__aside-right {
  transform: translateY(-390px);
}

.resume__linkedin-project-icon {
  width: 45px;
  height: 45px;
  cursor: pointer;
}

/* Transition for all elements */

#header-icon-wrapper,
#linkedin-line-svg,
#linkedin-line-path,
#education-line-path,
#early-years-line-path,
#early-years-career-path,
#early-years-the-leap-path,
#early-years-the-leap-icon,
#resume-profile-icon-wrapper,
#bottom-project-case-main-icon-path,
#bottom-project-case-main-icon,
#bottom-project-case-unique-path,
#bottom-project-case,
#aside-right-first-project-case,
#aside-right-first-project-case-main-icon,
#aside-right-first-project-case-unique-path,
#aside-right-first-project-case-main-icon-path,
#tablet-project-case,
#tablet-project-case-main-icon-path,
#tablet-project-case-unique-path,
#tablet-project-case-main-icon,
#aside-left-second-project-case,
#aside-left-second-project-case-main-icon,
#aside-left-second-project-case-unique-path,
#aside-left-second-project-case-main-icon-path,
#aside-right-second-project-case,
#aside-right-second-project-case-main-icon,
#aside-right-second-project-case-unique-path,
#aside-right-second-project-case-main-icon-path,
#aside-left-first-project-case,
#aside-left-first-project-case-main-icon-path,
#aside-left-first-project-case-unique-path,
#aside-left-first-project-case-main-icon,
#aside-right-first-project-case,
#bottom-project-main-circle,
#bottom-project-main-path-1,
#bottom-project-main-path-2,
.resume__qualifications-icon-wrapper,
#resume__qualifications-line,
#resume__qualifications-line-curved,
#resume__qualifications-divider,
#resume__qualifications-divider-curved-line,
#resume__qualifications-disc,
.resume__profile-border,
.resume__linkedin-project-icon,
#resume__work-history-connection-line,
#resume__history-icon-line,
#resume__history-content-line-under,
#resume__history-content-line-under-curved,
#resume__history-content-divider-connector,
#resume__history-content-divider,
#resume__item-selected-block-id,
#resume__history-icon-wrapper,
#resume__history-content-disc,
#resume__history-content-line-under-disc,
.resume__actions-icon-wrapper {
  transition: fill 0.5s, stroke 0.5s, opacity 0.5s, transform 0.5s, 
              background 0.5s, background-color 0.5s, 
              border 0.5s, border-color 0.5s;
  backface-visibility: visible;
  image-rendering: -webkit-optimize-contrast;
}


.resume__linkedin-recommendations-list {
  display: flex;
  gap: 80px;
  justify-content: center; /* Center elements */
  align-items: stretch; /* Makes all children the same height */
  position: relative;
}

.resume__linkedin-recommendations-list-item {
  display: flex;
  flex-direction: column;
  max-width: 160px;
  min-width: 150px;
  flex: 1;
  justify-content: space-between;
  min-height: 200px;
}

.resume__linkedin-recommendations-linkedin-list {
  min-height: 240px;
}

.resume__linkedin-recommendations-list-icon {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--secondary-color);
  width: 31px;
  height: 31px;
  top: -425px;
  left: -29px;
}

.resume__linkedin-recommendations-list-icon > a {
  width: 25px;
  height: 24px;
}

.resume__linkedin-recommendations-list-item-name {
  margin-top: 10px;
  color: var(--primary-color);
  font-size: 0.9375em;
  font-weight: 800;
}

.resume__linkedin-recommendations-list-item-position,
.resume__linkedin-recommendations-list-item-date,
.resume__linkedin-recommendations-list-item-work,
.resume__linkedin-recommendations-list-item-recommendation {
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.85em;
  color: var(--text-muted);
}

.resume__linkedin-recommendations-list-item-date {
  font-weight: 400;
}

.resume__linkedin-recommendations-list-item-work {
  font-weight: 400;
  color: var(--text-light);
}

.resume__linkedin-recommendations-list-item-recommendation {
  margin-top: 6px;
  font-weight: 300;
}

.resume__linkedin-recommendations-list-item-more {
  background: transparent;
  color: var(--read-more);
  font-weight: 800;
  font-size: 0.95em;
  outline: none;
  border: none;
  text-align: left;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
}

.resume__linkedin-recommendation-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  width: 82px;
  height: 82px;
  transition: all 0.5s;
  cursor: pointer;
}

.resume__linkedin-recommendation-image {
  border-radius: 50%;
  width: 68px;
  height: 68px;
}
.resume__government-project {
  width: 520px;
  opacity: 0;
}

.resume__aside-right-first-project {
  width: 520px;
  opacity: 0;
}

.resume__aside-right-first-project-inner {
  display: flex;
  flex: 1 1 100%;
  position: relative;
  gap: 50px;
  margin-left: 70px;
  justify-content: flex-start;
}

.resume__linkedin-recommendations {
  position: absolute;
  z-index: var(--z-3);
}

.resume__aside-right-first-project-linkedin {
  margin-top: 345px;
}
.resume__aside-left-first-project-linkedin {
  top: 670px;
  left: -125px;
}
.resume__aside-right-second-project-linkedin {
  top: 400px;
  right: 120px;
}
.resume__chart-project-linkedin {
  top: 500px;
  left: -75px;
}
.resume__tablet-project-linkedin {
  top: 350px;
  right: 180px;
}

.resume__aside-right-first-icon-wrapper-border {
  width: 137px;
  height: 137px;
}

.resume__aside-right-first-icon-wrapper-border-inner {
  width: 115px;
  height: 115px;
}


.resume__aside-right-first-project-info {
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.institute-project__info {
  font-size: 1rem;
  line-height: 18px;
}

.resume__aside-right-first-project-subtitle {
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 14.4px;
}

.resume__aside-right-first-project-icon-1,
.resume__aside-right-first-project-icon-2,
.resume__aside-right-first-project-icon-3,
.resume__aside-right-first-project-icon-4,
.resume__aside-right-first-project-picture,
.resume__aside-left-first-project-icon-1,
.resume__aside-left-first-project-icon-2,
.resume__aside-left-first-project-image-1-wrapper,
.resume__aside-left-first-project-image-2-wrapper,
.resume__aside-left-first-project-image-3-wrapper,
.resume__aside-right-second-project-icon-1,
.resume__aside-right-second-project-icon-2,
.resume__aside-right-second-project-image-1-wrapper,
.resume__aside-left-second-project-image-1-wrapper,
.resume__aside-left-second-project-image-2-wrapper,
.resume__aside-left-second-project-icon-1,
.resume__aside-left-second-project-icon-2,
.resume__aside-left-second-project-icon-3,
.resume__tablet-project-icon-scss,
.resume__tablet-project-icon-js,
.resume__tablet-project-icon-rfb,
.resume__tablet-project-image-1-wrapper,
.resume__tablet-project-icon-cordova,
.resume__bottom-project-icon-1,
.resume__bottom-project-icon-2,
.resume__bottom-project-icon-3,
.resume__bottom-project-icon-4,
.resume__bottom-project-image-1-wrapper {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--border-color);
}

.resume__aside-right-first-project-image-1 {
  width: 320px;
  height: 320px;
  object-fit: cover;
}

.resume__aside-right-first-project-icon-1 {
  width: 53px;
  height: 53px;
  top: -100px;
}

.resume__aside-right-first-project-icon-2 {
  width: 44px;
  height: 44px;
  top: -70px;
  right: 235px;
}

.resume__aside-right-first-project-icon-3 {
  width: 78px;
  height: 78px;
  top: 65px;
  left: -100px;
}

.resume__aside-right-first-project-icon-4 {
  width: 53px;
  height: 53px;
  top: 150px;
  left: -135px;
}

.resume__aside-right-first-project-picture {
  width: 320px;
  height: 320px;
  top: 185px;
  left: -120px;
  background: var(--border-color);
}

.resume__aside-right-first-project-picture-outer-border,
.resume__aside-left-first-project-image-1-outer,
.resume__aside-left-first-project-image-2-outer,
.resume__aside-left-first-project-image-3-outer,
.resume__aside-right-second-project-image-1-outer-border,
.resume__aside-left-second-project-image-1-outer-border,
.resume__aside-left-second-project-image-2-outer-border,
.resume__tablet-project-image-1-outer-border,
.resume__bottom-project-image-1-outer-border {
  position: absolute;
  border: 3px solid var(--border-color);
  border-radius: 50%;
}

.resume__aside-right-first-project-picture-outer-border {
  width: 340px;
  height: 340px;
}

.resume__aside-right-first-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
}

.resume__aside-right-first-absolute-line-1 {
  width: 0px;
  left: -32px;
  top: 79px;
  transform: rotate(-19deg);

  --element-width-from: 0;
  --element-width-to: 32px;
}

.resume__aside-right-first-absolute-line-2 {
  width: 0px;
  left: -94px;
  top: 139px;
  transform: rotate(-26deg);

  --element-width-from: 0;
  --element-width-to: 118px;
}

.resume__aside-right-first-absolute-line-3 {
  width: 0px;
  left: 100px;
  top: -12px;
  transform: rotate(-40deg);

  --element-width-from: 0;
  --element-width-to: 86px;
}

.resume__aside-right-first-absolute-line-4 {
  width: 0;
  left: 14px;
  top: -29px;
  transform: rotate(65deg);

  --element-width-from: 0;
  --element-width-to: 56px;
}

.resume__aside-right-first-absolute-line-5 {
  width: 0;
  left: 25px;
  top: 146px;
  transform: rotate(106deg);

  --element-width-from: 0;
  --element-width-to: 52px;
}

.resume__aside-right-first-project-connection-line {
  position: absolute;
  height: 0;
  width: 3px;
  background-color: var(--border-color);
  transform: rotate(-55deg);
  left: -156px;
  bottom: 113px;

  --element-width-from: 3px;
  --element-width-to: 3px;
  --element-height-from: 0;
  --element-height-to: 384px;
}

.resume__aside-right-first-linkedin-icon {
  position: absolute;
  left: -180px;
  top: 50px;
}

.resume__aside-right-first-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s;
  cursor: pointer;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__aside-right-first-linkedin-1-line {
  height: 112px;
  left: -159px;
  top: -60px;

  --element-height-from: 0;
  --element-height-to: 112px;
}

.resume__aside-right-first-linkedin-2-line {
  height: 450px;
  left: -159px;
  top: 93px;

  --element-height-from: 0;
  --element-height-to: 450px;
}

.resume__aside-right-first-linkedin-3-line {
  height: 121px;
  left: -113px;
  top: 520px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 121px;
}

.resume__aside-right-first-linkedin-4-line {
  height: 112px;
  left: -117px;
  top: 461px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 112px;
}

.resume__aside-right-first-linkedin-5-line {
  height: 180px;
  left: 15px;
  top: 463px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 180px;
}

.resume__aside-right-first-linkedin-6-line {
  height: 93px;
  left: 140px;
  top: 536px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 93px;
}
/* Institute Project CSS */
.resume__content-item-aside-left-first {
  justify-content: space-evenly;
  opacity: 0;
  min-height: 500px;
  margin-left: 299px;
}

.resume__aside-left-first-project {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resume__aside-left-first-icon-wrapper-border,
.resume__aside-left-first-icon-wrapper-border-inner,
.resume__aside-right-second-icon-wrapper-border,
.resume__aside-right-second-icon-wrapper-border-inner,
.resume__aside-left-second-icon-wrapper-border,
.resume__aside-left-second-icon-wrapper-border-inner,
.resume__tablet-icon-wrapper-border,
.resume__tablet-icon-wrapper-border-inner,
.resume__bottom-icon-wrapper-border,
.resume__bottom-icon-wrapper-border-inner,
.resume__aside-right-first-icon-wrapper-border-inner,
.resume__aside-right-first-icon-wrapper-border {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.resume__aside-left-first-icon-wrapper-border,
.resume__aside-right-second-icon-wrapper-border,
.resume__aside-left-second-icon-wrapper-border,
.resume__bottom-icon-wrapper-border,
.resume__tablet-icon-wrapper-border {
  width: 116px;
  height: 116px;
}

.resume__aside-left-first-icon-wrapper-border-inner,
.resume__aside-right-second-icon-wrapper-border-inner,
.resume__aside-left-second-icon-wrapper-border-inner,
.resume__tablet-icon-wrapper-border-inner,
.resume__bottom-icon-wrapper-border-inner {
  width: 96px;
  height: 96px;
}

.resume__aside-left-first-icon-wrapper-border {
  margin-left: 20px;
}
.resume__aside-left-first-icon-wrapper-border-inner {}

.resume__aside-left-first-project__info,
.resume__aside-right-second-project__info,
.resume__chart-project__info,
.resume__tablet-project__info,
.resume__bottom-project__info,
.resume__government-project__info {
  max-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resume__aside-left-first-project__title,
.resume__aside-right-second-project__title,
.resume__chart-project__title,
.resume__tablet-project__title,
.resume__bottom-project__title,
.resume__aside-right-first-project__title {
  color: var(--primary-color);
}

.resume__aside-left-first-icon-wrapper,
.resume__aside-right-second-icon-wrapper,
.resume__aside-left-second-icon-wrapper,
.resume__tablet-icon-wrapper,
.resume__dealership-icon-wrapper,
.resume__aside-right-first-icon-wrapper,
.resume__bottom-icon-wrapper {
  display: flex;
  align-items: center;
  background: var(--primary-color);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  justify-content: center;
}

.resume__aside-right-first-icon-wrapper {
  width: 90px;
  height: 90px;
}

/* scss */
.resume__aside-left-first-project-icon-1 {
  width: 57px;
  height: 57px;
  right: -85px;
  top: 50px;
}

/* js */
.resume__aside-left-first-project-icon-2 {
  width: 61px;
  height: 61px;
  top: -80px;
  left: -15px;
}

.resume__aside-left-first-project-image-1-wrapper,
.resume__aside-left-first-project-image-2-wrapper,
.resume__aside-left-first-project-image-3-wrapper,
.resume__aside-right-second-project-image-1-wrapper,
.resume__aside-left-second-project-image-1-wrapper,
.resume__aside-left-second-project-image-2-wrapper,
.resume__tablet-project-image-1-wrapper,
.resume__bottom-project-image-1-wrapper {
  background: var(--border-color);
  padding: 5px;
}

.resume__aside-left-first-project-image-1,
.resume__aside-left-first-project-image-2,
.resume__aside-left-first-project-image-3,
.resume__aside-right-second-project-image-1,
.resume__aside-left-second-project-image-1,
.resume__aside-left-second-project-image-2,
.resume__tablet-project-image-1,
.resume__bottom-project-image-1,
.resume__aside-right-first-project-image-1 {
  border-radius: 50%;
}

.resume__aside-left-first-project-image-1-wrapper {
  left: -550px;
  top: 0;
}

.resume__aside-left-first-project-image-1 {
  width: 468px;
  height: 468px;
  object-fit: fill;
}

.resume__aside-left-first-project-image-1-outer {
  width: 510px;
  height: 510px;
}

.resume__aside-left-first-project-image-2-wrapper {
  top: 400px;
  left: -130px;
}

.resume__aside-left-first-project-image-2 {
  width: 180px;
  height: 180px;
}

.resume__aside-left-first-project-image-2-outer {
  width: 210px;
  height: 210px;
}

.resume__aside-left-first-project-image-3-wrapper {
  top: 370px;
  left: 106px;
}

.resume__aside-left-first-project-image-3 {
  width: 135px;
  height: 135px;
}

.resume__aside-left-first-project-image-3-outer {
  width: 165px;
  height: 165px;
}

.resume__aside-left-first-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
}

.resume__aside-left-first-absolute-line-1 {
  width: 0;
  left: -96px;
  top: 96px;
  transform: rotate(-26deg);

  --element-width-from: 0;
  --element-width-to: 99px;
}

.resume__aside-left-first-absolute-line-2 {
  width: 0;
  left: 1px;
  top: -16px;
  transform: rotate(-113deg);

  --element-width-from: 0;
  --element-width-to: 36px;
}

.resume__aside-left-first-absolute-line-3 {
  width: 0;
  left: 89px;
  top: 57px;
  transform: rotate(9deg);

  --element-width-from: 0;
  --element-width-to: 42px;
}

.resume__aside-left-first-absolute-line-4 {
  width: 0;
  left: -122px;
  top: 396px;
  transform: rotate(43deg);

  --element-width-from: 0;
  --element-width-to: 23px;
}

.resume__aside-left-first-absolute-line-5 {
  width: 0;
  left: 57px;
  top: 450px;
  transform: rotate(-18deg);

  --element-width-from: 0;
  --element-width-to: 35px;
}

.resume__aside-left-first-linkedin-icon {
  position: absolute;
  right: -210px;
  top: 45px;
}

.resume__aside-left-first-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s;
  cursor: pointer;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__aside-left-first-linkedin-1-line {
  height: 157px;
  right: -188px;
  top: -110px;

  --element-height-from: 0;
  --element-height-to: 157px;
}

.resume__aside-left-first-linkedin-2-line {
  height: 550px;
  right: -188px;
  top: 89px;

  --element-height-from: 0;
  --element-height-to: 550px;
}

.resume__aside-left-first-linkedin-3-line {
  height: 91px;
  right: -156px;
  top: 625px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 91px;
}

.resume__aside-left-first-linkedin-4-line {
  height: 72px;
  right: -89px;
  top: 666px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 72px;
}

.resume__aside-left-first-linkedin-5-line {
  height: 91px;
  right: -156px;
  top: 555px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 91px;
}

.resume__aside-left-first-linkedin-6-line {
  height: 235px;
  right: -7px;
  top: 515px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 235px;
}

.resume__aside-left-first-linkedin-7-line {
  height: 95px;
  right: 143px;
  top: 618px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 95px;
}

/* Institute project CSS */
/* Color picker project CSS */
.resume__content-item-aside-right-second {
  justify-content: space-around;
  margin-top: 754px;
  margin-left: 3px;
  opacity: 0;
}

.resume__aside-right-second-project {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resume__aside-right-second-icon-wrapper-border {}
.resume__aside-right-second-icon-wrapper-border-inner {}
.resume__aside-right-second-icon-wrapper {}

/* scss */
.resume__aside-right-second-project-icon-1 {
  width: 91px;
  height: 91px;
  top: -110px;
  left: -20px;
}

/* js */
.resume__aside-right-second-project-icon-2 {
  width: 61px;
  height: 61px;
  top: 85px;
  left: -100px;
}

.resume__aside-right-second-project-image-1-wrapper {
  left: 140px;
  bottom: -70px;
}

.resume__aside-right-second-project-image-1 {
  width: 385px;
  height: 385px;
  object-fit: cover;
}

.resume__aside-right-second-project-image-1-outer-border {
  width: 420px;
  height: 420px;
}

.resume__aside-right-second-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
}

.resume__aside-right-second-absolute-line-1 {
  width: 0;
  left: 30px;
  top: -13px;
  transform: rotate(73deg);

  --element-width-from: 0;
  --element-width-to: 23px;
}

.resume__aside-right-second-absolute-line-2 {
  width: 0;
  left: -49px;
  top: 85px;
  transform: rotate(-35deg);

  --element-width-from: 0;
  --element-width-to: 54px;
}

.resume__aside-right-second-absolute-line-3 {
  width: 0;
  left: 99px;
  top: 37px;
  transform: rotate(-18deg);

  --element-width-from: 0;
  --element-width-to: 40px;
}

.resume__aside-right-second-linkedin-icon {
  position: absolute;
  left: -230px;
  top: 10px;
}


.resume__aside-right-second-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s;
  cursor: pointer;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__aside-right-second-linkedin-1-line {
  height: 108px;
  left: -209px;
  top: -97px;

  --element-height-from: 0;
  --element-height-to: 108px;
}

.resume__aside-right-second-linkedin-2-line {
  height: 310px;
  left: -209px;
  top: 53px;

  --element-height-from: 0;
  --element-height-to: 310px;
}

.resume__aside-right-second-linkedin-3-line {
  height: 66px;
  left: -184px;
  top: 350px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 66px;
}

.resume__aside-right-second-linkedin-4-line {
  height: 112px;
  left: -166px;
  top: 275px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 112px;
}

.resume__aside-right-second-linkedin-5-line {
  height: 139px;
  left: -54px;
  top: 297px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 139px;
}

.resume__aside-right-second-linkedin-6-line {
  height: 74px;
  left: 43px;
  top: 353px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 74px;
}
/* Color picker project CSS */
/* CHART PROJECT CSS */
.resume__content-item-aside-left-second {
  opacity: 0;
  margin-top: 500px;
  margin-left: 200px;
}

.resume__aside-left-second-project {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.resume__aside-left-second-icon-wrapper-border {}
.resume__aside-left-second-icon-wrapper-border-inner {}

/* js */
.resume__aside-left-second-project-icon-3 {
  right: -20px;
  bottom: 120px;
  width: 59px;
  height: 59px;
}

/* scss */
.resume__aside-left-second-project-icon-1 {
  width: 57px;
  height: 57px;
  right: -80px;
}

/* react */
.resume__aside-left-second-project-icon-2 {
  width: 106px;
  height: 106px;
  left: -145px;
  top: 100px;
}

.resume__aside-left-second-project-image-1 {
  width: 270px;
  height: 270px;
  object-fit: cover;
}

.resume__aside-left-second-project-image-1-outer-border {
  width: 305px;
  height: 305px;
}

.resume__aside-left-second-project-image-1-wrapper {
  right: 90px;
  bottom: 45px;
  object-fit: contain;
}

.resume__aside-left-second-project-image-2 {
  width: 280px;
  height: 280px;
  object-fit: cover;
}

.resume__aside-left-second-project-image-2-outer-border {
  width: 315px;
  height: 315px;
}

.resume__aside-left-second-project-image-2-wrapper {
  left: 160px;
  top: 60px;
}

.resume__aside-left-second-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
}

.resume__aside-left-second-absolute-line-1 {
  width: 0;
  left: -5px;
  top: 17px;
  transform: rotate(45deg);

  --element-width-from: 0;
  --element-width-to: 26px;
}

.resume__aside-left-second-absolute-line-2 {
  width: 0;
  left: -61px;
  top: 97px;
  transform: rotate(-35deg);

  --element-width-from: 0;
  --element-width-to: 70px;
}
.resume__aside-left-second-absolute-line-3 {
  width: 0;
  left: 112px;
  top: 54px;
  transform: rotate(-3deg);

  --element-width-from: 0;
  --element-width-to: 24px;
}
.resume__aside-left-second-absolute-line-4 {
  width: 0;
  left: 80px;
  top: -4px;
  transform: rotate(-70deg);

  --element-width-from: 0;
  --element-width-to: 22px;
}
.resume__aside-left-second-absolute-line-5 {
  width: 0;
  left: 88px;
  top: 100px;
  transform: rotate(34deg);

  --element-width-from: 0;
  --element-width-to: 95px;
}

.resume__aside-left-second-linkedin-icon {
  position: absolute;
  right: -390px;
  top: -70px;
}

.resume__aside-left-second-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s;
  cursor: pointer;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__aside-left-second-linkedin-1-line {
  height: 347px;
  right: -370px;
  top: -416px;

  --element-height-from: 0;
  --element-height-to: 347px;
}

.resume__aside-left-second-linkedin-2-line {
  height: 481px;
  right: -370px;
  top: -26px;

  --element-height-from: 0;
  --element-height-to: 481px;
}

.resume__aside-left-second-linkedin-3-line {
  height: 100px;
  right: -334px;
  top: 440px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 96px;
}

.resume__aside-left-second-linkedin-4-line {
  height: 206px;
  right: -197px;
  top: 422px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 206px;
}

.resume__aside-left-second-linkedin-5-line {
  height: 110px;
  right: -331px;
  top: 350px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 91px;
}

.resume__aside-left-second-linkedin-6-line {
  height: 365px;
  right: -111px;
  top: 261px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 365px;
}

.resume__aside-left-second-linkedin-7-line {
  height: 100px;
  right: 105px;
  top: 428px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 100px;
}

/* CHART PROJECT CSS */
/* Tablet Project CSS */
.resume__content-item-tablet {
  justify-content: space-around;
  opacity: 0;
  margin-top: 390px;
}

.resume__tablet-project {
  gap: 12px;
  display: flex;
  flex-direction: column;
}

/* Icons */
[class*="resume__tablet-project-icon"] {
  position: absolute;
  width: var(--icon-w, 57px);
  height: var(--icon-h, 57px);
}
.resume__tablet-project-icon-scss { top: -80px; left: 10px; }
.resume__tablet-project-icon-js { --icon-w: 112px; --icon-h: 112px; left: -140px; top: -20px; }
.resume__tablet-project-icon-rfb { right: -90px; top: 90px; }
.resume__tablet-project-icon-cordova { --icon-w: 77px; --icon-h: 77px; right: 135px; top: 120px; }

/* Image */
.resume__tablet-project-image-1-wrapper { left: 120px; bottom: 30px; }
.resume__tablet-project-image-1 { width: 282px; height: 282px; }
.resume__tablet-project-image-1-outer-border { width: 317px; height: 317px; }

/* Content */
.resume__tablet-project__info { max-width: 200px; }
.resume__tablet-project__title { max-width: 150px; }
.resume__tablet-project__subtitle { max-width: 200px; }

/* Lines */
.resume__tablet-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
  width: var(--line-w);
  left: var(--line-l);
  top: var(--line-t);
  transform: rotate(var(--line-r));
}
.resume__tablet-absolute-line-1 {
  --line-w: 0;
  --line-l: -39px;
  --line-t: 28px;
  --line-r: 8deg;

  --element-width-from: 0;
  --element-width-to: 30px;
}
.resume__tablet-absolute-line-2 {
  --line-w: 0;
  --line-l: -52px;
  --line-t: 104px;
  --line-r: -46deg;

  --element-width-from: 0;
  --element-width-to: 65px;
}
.resume__tablet-absolute-line-3 {
  --line-w: 0;
  --line-l: 83px;
  --line-t: 12px;
  --line-r: -20deg;

  --element-width-from: 0;
  --element-width-to: 46px;
}
.resume__tablet-absolute-line-4 {
  --line-w: 0;
  --line-l: 19px;
  --line-t: -24px;
  --line-r: -99deg;

  --element-width-from: 0;
  --element-width-to: 26px;
}
.resume__tablet-absolute-line-5 {
  --line-w: 0;
  --line-l: 93px;
  --line-t: 79px;
  --line-r: 34deg;

  --element-width-from: 0;
  --element-width-to: 50px;
}

.resume__tablet-linkedin-icon {
  position: absolute;
  left: -250px;
  top: -25px;
}

.resume__tablet-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  cursor: pointer;
  transition: all 0.5s;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__tablet-linkedin-1-line {
  height: 120px;
  left: -229px;
  top: -144px;

  --element-height-from: 0;
  --element-height-to: 120px;
}

.resume__tablet-linkedin-2-line {
  height: 285px;
  left: -229px;
  top: 20px;

  --element-height-from: 0;
  --element-height-to: 285px;
}

.resume__tablet-linkedin-3-line {
  height: 71px;
  left: -202px;
  top: 292px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 71px;
}

.resume__tablet-linkedin-4-line {
  height: 112px;
  left: -186px;
  top: 230px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 112px;
}

.resume__tablet-linkedin-5-line {
  height: 120px;
  left: -84px;
  top: 262px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 120px;
}

.resume__tablet-linkedin-6-line {
  height: 74px;
  left: 4px;
  top: 308px;
  transform: rotate(-50deg);

  --element-height-from: 0;
  --element-height-to: 74px;
}
/* Dealership Tablet project CSS */
.resume__content-item-bottom {
  justify-content: flex-end;
  margin-right: 220px;
  margin-top: 420px;
  opacity: 0;
}

.resume__bottom-project {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resume__bottom-project-linkedin {
  left: -700px;
  top: 300px;
}

.resume__bottom-icon-wrapper-border {
  position: absolute;
  right: 220px;
  top: -140px;
}
.resume__bottom-icon-wrapper-border-inner {}
.resume__bottom-icon-wrapper {}

.resume__bottom-project__info {
  max-width: 210px;
}

.resume__bottom-project-icon-1 {
  width: 57px;
  height: 57px;
  left: 50px;
  top: 170px;
}

.resume__bottom-project-icon-2 {
  width: 46px;
  height: 46px;
  left: 130px;
  top: 15px;
}

.resume__bottom-project-icon-3 {
  width: 80px;
  height: 80px;
  top: -75px;
  left: 80px;
}

.resume__bottom-project-icon-4 {
  width: 77px;
  height: 77px;
  left: 200px;
  top: 50px;
}

.resume__bottom-project-image-1-wrapper {
  left: -330px;
  top: 50px;
}

.resume__bottom-project-image-1 {
  width: 342px;
  height: 342px;
  object-fit: cover;
}

.resume__bottom-project-image-1-outer-border {
  width: 377px;
  height: 377px;
}

.resume__bottom-absolute-line {
  position: absolute;
  border-top: 3px solid var(--border-color);
}

.resume__bottom-absolute-line-1 {
  width: 0;
  left: 98px;
  top: 28px;
  transform: rotate(1deg);

  --element-width-from: 0;
  --element-width-to: 23px;
}
.resume__bottom-absolute-line-2 {
  width: 0;
  left: -17px;
  top: 93px;
  transform: rotate(-46deg);

  --element-width-from: 0;
  --element-width-to: 39px;
}
.resume__bottom-absolute-line-3 {
  width: 0;
  left: 101px;
  top: 59px;
  transform: rotate(10deg);

  --element-width-from: 0;
  --element-width-to: 93px;
}
.resume__bottom-absolute-line-4 {
  width: 0;
  left: 72px;
  top: -11px;
  transform: rotate(-54deg);

  --element-width-from: 0;
  --element-width-to: 17px;
}
.resume__bottom-absolute-line-5 {
  width: 0;
  left: 28px;
  top: 129px;
  transform: rotate(84deg);

  --element-width-from: 0;
  --element-width-to: 63px;
}

.resume__bottom-linkedin-icon {
  position: absolute;
  top: -30px;
  left: -200px;
}

.resume__bottom-linkedin-line-absolute {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s;
  cursor: pointer;

  --element-width-from: 3px;
  --element-width-to: 3px;
}

.resume__bottom-linkedin-1-line {
  height: 92px;
  left: -129px;
  top: -97px;
  transform: rotate(45deg);

  --element-height-from: 0;
  --element-height-to: 92px;
}

.resume__bottom-linkedin-2-line {
  transform: rotate(90deg);
  height: 115px;
  left: -257px;
  top: -64px;

  --element-height-from: 0;
  --element-height-to: 115px;
}

.resume__bottom-linkedin-3-line {
  height: 95px;
  left: -350px;
  top: -24px;
  transform: rotate(50deg);

  --element-height-from: 0;
  --element-height-to: 95px;
}

.resume__bottom-linkedin-4-line {
  height: 385px;
  left: -386px;
  top: 53px;
  transform: rotate(180deg);

  --element-height-from: 0;
  --element-height-to: 385px;
}

.resume__bottom-linkedin-5-line {
  height: 140px;
  left: -455px;
  top: 197px;
  transform: rotate(90deg);

  --element-height-from: 0;
  --element-height-to: 140px;
}

.resume__bottom-linkedin-6-line {
  height: 132px;
  left: -575px;
  top: 244px;
  transform: rotate(50deg);

  --element-height-from: 0;
  --element-height-to: 132px;
}

.resume__bottom-linkedin-7-line {
  height: 88px;
  left: -625px;
  top: 351px;
  transform: rotate(180deg);

  --element-height-from: 0;
  --element-height-to: 88px;
}

/* Dealership Tablet project CSS */
/* Qualification and work history CSS */

.resume__qualifications {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resume__qualifications-line {
  position: absolute;
  width: 0; /* width: 288px; */
  height: 3px;
  top: 100px;
  right: 185px;
  background-color: var(--border-color);

  --element-width-from: 0px;
  --element-width-to: 288px;
  --element-height-from: 3px;
  --element-height-to: 3px;
}

.resume__qualifications-line-curved {
  position: absolute;
  height: 3px;
  width: 0px;
  right: 255px;
  bottom: 70px;
  transform: rotate(50deg);
  background-color: var(--border-color);
  z-index: var(--z-2);

  --element-width-from: 0px;
  --element-width-to: 181px;
  --element-height-from: 3px;
  --element-height-from: 3px;
}

.resume__qualifications-arrow-down {
  position: absolute;
  left: -141px;
  top: 100px;
}

.resume__qualifications-arrow-down-path-1 { animation-delay: 0.15s; }
.resume__qualifications-arrow-down-path-2 { animation-delay: 0.3s; }
.resume__qualifications-arrow-down-path-3 { animation-delay: 0.45s; }
.resume__qualifications-arrow-down-path-4 { animation-delay: 0.6s; }
.resume__qualifications-arrow-down-path-5 { animation-delay: 0.75s; } 

.resume__qualifications-experience-list {
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resume__qualifications-icon-wrapper {
  width: 191px;
  height: 191px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.resume__qualifications-icon {
  margin-left: 10px;
  margin-bottom: 5px;
}

.resume__qualifications-block {
  display: flex;
  gap: 28px;
}

.resume__qualifications-info {
  display: flex;
  flex-direction: column;
  gap: 52px;
  margin-top: 50px;
}

.resume__history-block {
  display: flex;
  gap: 58px;
  min-height: 879px;
  flex-direction: row;
}

.resume__history-content {
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 40px;
  position: relative;
}

.resume__content-history-absolute {
  position: absolute;
  background-color: var(--border-color);
}

.resume__history-content-line-under {
  width: 0;
  --element-width-from: 0;
  --element-width-to: 100%;
  --element-height-from: 3px;
  --element-height-to: 3px;
  right: -20px;
  top: 40px;
}

.resume__history-content-line-under-curved {
  width: 0;
  /* Width: 70px animated */
  height: 3px;
  transform: rotate(50deg);
  left: -57px;
  top: -26px;

  --element-width-from: 0;
  --element-width-to: 70px;
  --element-height-from: 3px;
  --element-height-to: 3px;
}

.resume__history-content-line-under-disc {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: -4px;
  right: 0;
}

.resume__history-content-divider,
.resume__qualifications-divider {
  width: 2px;
  height: 100%;
  position: absolute;
  background-color: var(--border-color);
}

.resume__history-content-divider-connector {
  position: absolute;
  width: 0px;
  height: 2px;
  transform: rotate(50deg);
  background-color: var(--border-color);
  left: -32px;
  top: -16px;

  --element-width-from: 0;
  --element-width-to: 40px;
  --element-height-from: 2px;
  --element-height-to: 2px;
}

.resume__qualifications-divider-curved-line {
  position: absolute;
  border-top: 2px solid var(--border-color);
  width: 0; /* width: 30px; animated */
  transform: rotate(45deg);
  left: -69px;
  top: 90px;

  --element-width-from: 0;
  --element-width-to: 30px;
}

.resume__history-content-divider {
  top: 25px;
  left: -15px;
  height: 0px;

  --element-width-from: 2px;
  --element-width-to: 2px;
  --element-height-from: 0px;
  --element-height-to: 100%;
}

.resume__qualifications-divider {
  height: 0;
  top: 100px;
  left: -45px;

  --element-width-from: 2px;
  --element-width-to: 2px;
  --element-height-from: 0;
  --element-height-to: 89%;
}

.resume__qualifications-disc,
.resume__history-content-disc {
  background-color: var(--border-color);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: absolute;
}

.resume__qualifications-disc {
  bottom: -5px;
  left: -47.5px;
}

.resume__history-content-disc {
  bottom: -30px;
  left: -17.1px;
}

.resume__history-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.resume__list-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 125px;
  cursor: pointer;
  position: relative;
}

.resume__item-title {
  margin-left: 10px;
  transition: all 0.2s ease-in-out;
}

.resume__item-title:hover {
  color: var(--secondary-color);
}

.resume__item-underline {
  margin-top: 4px;
  position: absolute;
  top: 43px;
  left: -14px;
}

.resume__item-underline .disc {
  top: 0;
  position: absolute;
}

.resume__item-underline-intellisurvey .disc { left: 133px; }
.resume__item-underline-automotive {
  top: 43px;
  left: -55px;
}
.resume__item-underline-automotive .disc { left: 172px; }
.resume__item-underline-sencha {
  top: 33px;
  left: -98px;
}
.resume__item-underline-sencha .disc { left: 211px; }
.resume__item-underline-tools4ever { left: -141px; }
.resume__item-underline-tools4ever .disc { left: 261px; }

.resume__list-item-date {
  text-align: right;
}

.resume__item-selected {
  display: flex;
  gap: 30px;
  justify-content: flex-end;
  position: relative;
}

.resume__item-selected-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
  position: absolute;
  left: -150px;
}

.resume__item-selected-block-underline {
  position: absolute;
  top: 73px;
  left: 14px;
}

.resume__item-selected-pro-sencha {
  top: 72px;
}

.resume__item-selected-tools4ever {
  top: 87px;
}

.resume__item-selected-title {
  max-width: 130px;
  text-align: right;
}

.resume__item-title {
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 10.8px;
  color: var(--text-muted);
  text-align: right;
}

.resume__item-selected-text {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 13px;
  max-width: 250px;
}

.resume__history-list .resume__list-item:nth-child(3) {
  margin-left: 42px;
}

.resume__history-list .resume__list-item:nth-child(5) {
  margin-left: 84px;
}

.resume__history-list .resume__list-item:nth-child(7) {
  margin-left: 126px;
}

.resume__history-icon-wrapper {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.resume__history-icon-line {
  position: absolute;
  width: 0; /* width: 350px animated */
  height: 3px;
  transform: rotate(-25deg);
  background-color: var(--border-color);
  left: 127px;
  top: -31px;

  --element-width-from: 0;
  --element-width-to: 350px;
  --element-height-from: 3px;
  --element-height-to: 3px;
}

.resume__work-history-connection-line {
  position: absolute;
  width: 0; /* width: 325px animated */
  height: 3px;
  bottom: -139px;
  left: -241px;
  transform: rotate(119deg);
  background-color: var(--border-color);

  --element-width-from: 0;
  --element-width-to: 383px;
  --element-height-from: 3px;
  --element-height-to: 3px;
}

.resume__education-item span:nth-child(1) { animation-delay: 0.2s; }
.resume__education-item span:nth-child(2) { animation-delay: 0.4s; }
.resume__education-item span:nth-child(3) { animation-delay: 0.6s; }

/* Qualification and work history CSS */
@media screen and (max-width: 1640px) {
  html, body {
    overflow-x: auto;
  }
  body {
    min-width: 100%;
    /* This padding creates the space needed to center the fixed-width resume */
    padding-left: max(var(--base-padding), calc((100vw - 1440px) / 2));
    padding-right: max(var(--base-padding), calc((100vw - 1440px) / 2));
  }
}

@media screen and (max-width: 1300px) {
  body {
    padding-left: 500px;
  }
}

@media screen and (max-width: 1020px) {
  body {
    padding-left: 700px;
  }
}
/* Footer */

.resume__footer {
  gap: 30px;
  position: relative;
}

.resume__footer-arrow {
  position: absolute;
  right: 0;
  transform: translate(15%, -50%);
}

.resume__footer-links {
  display: flex;
  justify-content: space-between;
}

.resume__footer-link-email {
  width: 65px;
  height: 65px;
}

.resume__footer-link-linkedin {
  width: 65px;
  height: 65px;
}

.resume__footer-copyright {
  letter-spacing: 4px;
}

.resume__footer-arrow svg path {
  opacity: 0;
}

.resume__footer-links,
.resume__footer-copyright {
  z-index: var(--z-3);
}

.resume__footer-arrow-path-1 { animation-delay: 0.25s; }
.resume__footer-arrow-path-2 { animation-delay: 0.5s; }
.resume__footer-arrow-path-3 { animation-delay: 0.75s; }
.resume__footer-arrow-path-4 { animation-delay: 1s; }
.resume__footer-arrow-path-5 { animation-delay: 1.25s; }

/* Footer */
/* Modal read more */

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-transparent);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: var(--z-3);
  border-radius: 30px;
}

.custom-modal {
  position: relative;
  display: block;
  background-color: var(--bg-color);
  padding: 30px 62px 35px 62px;
  border-radius: 10px;
  box-shadow: 0px 4px 17.6px 0px #000000AD;
  z-index: var(--z-3);
  box-sizing: border-box;
  margin: 200px auto;
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 400px;
  min-width: 600px;
  max-width: 1000px;
}

.custom-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 1rem;
  cursor: pointer;
}

.resume__linkedin-recommendation-modal {
  background-color: var(--bg-color);
  box-shadow: 0px 4px 17.6px 0px #000000AD;
  margin: 0;
  padding: 0;
  position: absolute; /* Ensure proper positioning */
  top: 0; /* Reset any inherited styles */
  left: 0; /* Reset any inherited styles */
  border-radius: 30px;
  display: none;
}

.resume__linkedin-modal-content,
.resume__project-preview-modal-content {
  max-width: 574px;
  min-width: 550px;
  padding: 30px 62px 35px 62px;
}

.resume__linkedin-modal-quote-left,
.resume__linkedin-modal-quote-right {
  position: absolute;
}

.resume__linkedin-modal-quote-left {
  top: 50px;
  left: 30px;
}

.resume__linkedin-modal-quote-right {
  bottom: 30px;
  right: 50px;
}

.resume__linkedin-modal-title {
  color: var(--primary-color);
}

.resume__linkedin-modal-text,
.resume__project-preview-modal-text {
  text-align: center;
  color: var(--modal-text);
  margin-top: 10px;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
}

.resume__project-preview-modal-text {
  font-style: normal;
}

@media screen and (max-width: 1050px) {
  .custom-modal {
    margin: 200px 50px;
  }
}

@media screen and (max-width: 700px) {
  .custom-modal {
    margin: 100px 20px;
  }
}

@media screen and (max-width: 620px) {
  .custom-modal {
    margin: 50px 20px;
    max-height: 70vh;
    min-height: 50vh;
    overflow-y: auto;
    min-width: 90%;
    max-width: none;
    padding: 10px 20px 15px 20px;
  }

  .resume__linkedin-modal-content, .resume__project-preview-modal-content {
    max-width: 90vw;
    min-width: unset;
    padding: 10px 20px 15px 20px;
  }

  .resume__linkedin-modal-quote-left {
    top: 14px;
    left: 10px;
  }

  .resume__linkedin-modal-quote-right {
    bottom: 14px;
    right: 11px;
  }
}

@media screen and (max-width: 980px) and (orientation: landscape) {
  .custom-modal {
    min-width: 90vw;
    max-width: 95vw;
    padding: 15px;
    max-height: 70vh;
    margin: 0 auto;
  }

  .resume__linkedin-recommendation-modal {
    max-height: 80vh !important;
  }

  .resume__linkedin-modal-content,
  .resume__project-preview-modal-content {
    max-width: 95vw;
    min-width: 90vw;
    padding: 15px;
  }

  .resume__linkedin-modal-quote-left {
    top: 15px;
    left: 30px;
  }

  .resume__linkedin-modal-quote-right {
    bottom: 7px;
    right: 22px;
  }
}
.resume__information-container {
  min-height: 600px;
}

.resume__information-education {
  max-width: 300px;
  margin-left: 40px;
}

.resume__information-education-text {
  font-size: 1.3rem;
  line-height: normal;
}

.resume__information-info-container {
  width: 100%;
  height: 100%;
  position: relative;
  align-items: flex-start;
  margin-top: 20px;
}

.resume__information-history {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 150px;
}

.resume__information-history-description {
  max-width: 400px;
}

.resume__information-history-p {
  font-size: 1.1rem;
}

.resume__information-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  cursor: pointer;
}

#work-history-title-1,
#work-history-title-2,
#work-history-title-3,
#work-history-title-4 {
  transition: all 0.5s ease-in-out;
}

.resume__information-history-divider {
  height: 420px;
  width: 1px;
  background-color: var(--border-color);
  position: relative;
}

.resume__information-history-movable-line {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s ease-in-out;
  background-color: var(--primary-color);
  width: 3px;
  height: 90px;
}
.resume__work-project-icon-border {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid var(--border-color);

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.resume__work-project-icon-border,
.resume__work-project-icon-wrapper {
  transition: all 0.5s ease;
}

.resume__work-project-icon-border.active {
  border-color: var(--secondary-color);
  transform: scale(1.2);
}

.resume__work-project-icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: var(--mobile-bg-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resume__work-project-icon-border.active >
.resume__work-project-icon-wrapper  {
  background-color: var(--primary-color);
}

.resume__work-project-icon-border.active >
.resume__work-project-icon-wrapper > svg  {
}

.resume__work-project-item {
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: center;
  margin-top: 70px;
  width: 350px;
  margin: 50px auto;
  position: relative;
}

.resume__work-project-item-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.resume__work-project-item-title {
  color: var(--primary-color);
  max-width: 165px;
}

.resume__work-project-item-subtitle {
  max-width: 240px;
}

.resume__work-project-item-image-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  background: var(--border-color);
  padding: 5px;
  position: relative;
}

.resume__work-project-item-image {
  width: 265px;
  height: 265px;
  border-radius: 50%;
}

.resume__work-project-item-image-border {
  width: 294px;
  height: 294px;
  position: absolute;
  border: 3px solid var(--border-color);
  border-radius: 50%;
}
/* Resume Component - Layout Structure */
.resume__actions-row {
  display: flex;
  justify-content: center;
  gap: 80px;
}

/* Icon Containers */
.resume__actions-icon-wrapper {
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.resume__information-icon {
  position: relative;
  gap: 40px;
}

/* Icon Styling */
.resume__actions-icon {
  margin-top: 12px;
  padding: 3px;
}

.resume__actions-icon > path {
  transition: all 0.5s ease-in-out;
}

.resume__actions-icon-2 {
  margin: -5px 0 0 10px;
}

.resume__actions-icon-3 {
  margin: 0;
}

/* Connection Lines - Base Styles */
.resume__connection-line-work,
.resume__connection-line-work-inactive,
.resume__connection-line-work-2,
.resume__work-project-icon-line,
.resume__work-project-icon-line-2,
.resume__work-project-icon-line-3,
.resume__information-icon-line,
.resume__information-icon-line-curved {
  position: absolute;
  background-color: var(--border-color);
  width: 3px;
  transition: all 0.5s ease;
}

/* Specific Connection Lines */
.resume__connection-line-work {
  height: 210px;
  transform: rotate(118deg);
  right: -7.7em;
  top: 1em;
}

.resume__connection-line-work-2,
.resume__connection-line-work-inactive {
  height: 1437px;
  right: -16.9em;
}

.resume__connection-line-work-2.active.selected-1 {
  height: 925px;
}

.resume__connection-line-work-2.active.selected-2 {
  height: 1025px;
}

.resume__connection-line-work-2.active.selected-3 {
  height: 1125px;
}

.resume__connection-line-work-2.active.selected-4 {
  height: 1225px;
}

.resume__connection-line-work-2.active.selected-5 {
  height: 1325px;
}

.resume__connection-line-work-2.active.selected-6 {
  height: 1437px;
}

.resume__information-icon-line {
  height: 178px;
  top: -11.25rem;
  left: 3.3125rem;
}

.resume__work-project-icon-line {
  height: 359px;
  right: -178px;
  bottom: -102px;
  transform: rotate(75deg);
}

.resume__work-project-icon-line-2 { transition: none; }
.resume__work-project-icon-border.active .resume__work-project-icon-line-2 {
  height: 180px;
  left: -88px;
  bottom: -90px;
  background-color: var(--secondary-color);
  transform: rotate(-106deg);
}

.resume__work-project-icon-border.active .resume__work-project-icon-line {
  height: 294px;
  right: -144px;
  bottom: -65px;
  background-color: var(--secondary-color);
}

.resume__work-project-icon-border.last.active {
  transform: scale(1.2) translateY(11px);
}

.resume__information-icon-line-curved {
  height: var(--line-curved-height);
}

.resume__information-icon-line-curved-education {
  transform: rotate(62deg);
  top: -18rem;
  left: 117px;
  --line-curved-height: 147px;
}

.resume__information-icon-line-curved-work {
  transform: rotate(-62deg);
  top: -18.5rem;
  right: 119px;
  --line-curved-height: 158px;
}

/* Text Elements */
.resume__information-title {
  font-size: 2rem;
}

/* Active States */
.resume__actions-icon-wrapper.active {
  transform: scale(1.25) translateY(22px);
  border-color: var(--secondary-color);
}

.resume__actions-icon-wrapper.active > .resume__information-icon-line {
  top: -8.1875rem;
  height: 130px;
}

.resume__actions-icon-wrapper.active .resume__information-icon-line-curved-education {
  top: -13.55rem;
  left: 104px;
  --line-curved-height: 118px;
}

.resume__actions-icon-wrapper.active .resume__information-icon-line-curved-work {
  top: -13.9rem;
  right: 104px;
  --line-curved-height: 125px;
}

.resume__linkedin-recommendations-line-1,
.resume__linkedin-recommendations-line-2,
.resume__linkedin-recommendations-line-3,
.resume__linkedin-recommendations-line-4,
.resume__linkedin-recommendations-line-5,
.resume__linkedin-recommendations-line-7,
.resume__linkedin-recommendations-line-8,
.resume__aside-right-first-icon-connection-line-1,
.resume__aside-right-first-icon-connection-line-2,
.resume__aside-right-first-icon-connection-line-3,
.resume__aside-right-first-icon-connection-line-4,
.resume__aside-left-first-icon-connection-line-1,
.resume__aside-left-first-icon-connection-line-2,
.resume__aside-left-second-icon-connection-line-1,
.resume__aside-left-second-icon-connection-line-2,
.resume__aside-left-second-icon-connection-line-3,
.resume__aside-right-second-icon-connection-line-1,
.resume__aside-right-second-icon-connection-line-2,
.resume__tablet-icon-connection-line-1,
.resume__tablet-icon-connection-line-2,
.resume__tablet-icon-connection-line-3,
.resume__tablet-icon-connection-line-4,
.resume__bottom-icon-connection-line-1,
.resume__bottom-icon-connection-line-2,
.resume__bottom-icon-connection-line-3,
.resume__bottom-icon-connection-line-4,
.resume__work-project-item-image-border-connection-line,
.resume__work-project-item-image-border-connection-line-2 {
  position: absolute;
  width: 3px;
  background-color: var(--secondary-color);
}

.resume__work-project-item-image-border-connection-line-2 {
  left: -113px;
}

.resume__work-project-item-image-border-connection-line-2.order-1 {
  height: 813px;
  top: -521px;
}

.resume__work-project-item-image-border-connection-line-2.order-2,
.resume__work-project-item-image-border-connection-line-2.order-3 {
  height: 600px;
  top: -420px;
}

.resume__work-project-item-image-border-connection-line-2.order-4,
.resume__work-project-item-image-border-connection-line-2.order-5 {
  height: 368px;
  top: -220px;
}

.resume__work-project-item-image-border-connection-line-2.order-6 {
  height: 233px;
  top: -6px;
}

/* Hover States */
.resume__actions-icon-wrapper:hover {
  border-color: var(--secondary-color);
}

.resume__connection-line-work-inactive {
  background-color: var(--border-color);
}

/* Color Changes for Active and Hover States */
.resume__connection-line-work.active,
.resume__connection-line-work-2.active,
.resume__actions-icon-wrapper:hover .resume__information-icon-line,
.resume__actions-icon-wrapper.active .resume__information-icon-line,
.resume__actions-icon-wrapper:hover .resume__information-icon-line-curved,
.resume__actions-icon-wrapper.active .resume__information-icon-line-curved {
  background-color: var(--secondary-color);
}

.resume__actions-icon-wrapper:hover svg path,
.resume__actions-icon-wrapper.active svg path {
  fill: var(--secondary-color);
}
@media screen and (max-width: 1490px) {
  :root {
    --base-padding: 29px;
  }

  html, body {
    overflow-x: hidden;
    height: 100%;
  }

  .resume__aside-container {
    display: none;
  }
  
  body {
    min-width: 100%;
    padding: 0px var(--base-padding);
  }

  header {
    min-height: 100px;
    margin-top: 50px;
  }

  .resume {
    width: calc(100vw - var(--base-padding));
    max-width: none;
    min-width: 0px;
    padding: 0px var(--base-padding);
  }
  
  .resume__education-header {
    justify-content: space-between;
    align-items: center;
  }

  .resume__education-header-icon-right {
    position: relative;
    top: 0;
    right: 0;
  }

  .resume__education-header-title {
    max-width: 90px;
    font-size: 3em;
    font-weight: 800;
    line-height: 44px;
  }

  .resume__profile {
    margin-top: 20px;
  }

  .resume__profile-early {
    margin-top: 0;
  }
  
  .resume__profile-circle {
    width: 7em;
    height: 7em;
    right: 0em;
    top: -4em;
  }
  
  .resume__aside-right {
    transform: translateY(0px);
  }
  
  .resume__profile-info-block {
    text-align: right;
  }

  .resume__profile-early-info {
    flex-direction: row;
    align-items: flex-start;
  }

  .resume__profile-early-title {
    margin-left: 0;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    transform: rotate(180deg);
  }

  .resume__profile-early-text {
    font-size: 1em;
    line-height: 1.25em;
    min-height: 230px;
  }

  .resume__actions {
    margin-top: 50px;
  }

  .resume__actions-row {
    gap: 200px;
    margin-right: 200px;
  }

  .resume__actions-row-second {
    gap: 130px;
  }

  .resume__actions-container {
    gap: 55px;
  }

  .resume__actions-container .resume__actions-row:nth-child(2) {
    margin-right: 0;
  }

  .resume__profile-icon-wrapper {
    transform: scale(1.5);
    cursor: pointer;
  }

  .resume__profile-icon-wrapper:hover {
    border-color: var(--secondary-color);
  }

  .resume__profile-icon-wrapper.active {
    transform: scale(2);
    border-color: var(--secondary-color);
  }

  .resume__profile-icon-wrapper.active > svg > path {
    fill: var(--secondary-color);
  }

  .resume__footer-links {
    justify-content: center;
    gap: 12px;
  }

  .resume__footer {
    gap: 10px;
  }

  .resume__footer-arrow {
    transform: rotate(180deg);
    right: auto;
    left: 0;
    top: -50px;
    z-index: var(--z-2);
  }

  .resume__footer-arrow-svg {
    width: 250px;
  }

  .resume__information {
    margin: 50px 20px 25px 20px;
  }
  
  .resume__qualifications-experience-list {
    max-width: 600px;
    margin-left: 40px;
  }

  .resume__actions-icon-wrapper {
    width: 7rem;
    height: 7rem;
  }

  .resume__aside-right-first-project-icon-1 {
    top: -16px;
    right: -40px;
  }

  .resume__aside-right-first-project-icon-2 {
    bottom: -70px;
    left: 96px;
    top: unset;
    right: unset;
  }

  .resume__aside-right-first-project-icon-3 {
    bottom: -90px;
    right: -30px;
    top: unset;
    left: unset;
  }

  .resume__aside-right-first-project-icon-4 {
    bottom: -35px;
    left: -50px;
    top: unset;
  }

  .resume__aside-left-first-project-icon-1 {
    top: -35px;
    right: -40px;
  }

  .resume__aside-left-first-project-icon-2 {
    bottom: -90px;
    right: 35px;
    top: unset;
    left: unset;
  }

  .resume__aside-left-second-project-icon-1 {
    top: -35px;
    right: -40px;
  }

  .resume__aside-left-second-project-icon-2 {
    bottom: -126px;
    right: 10px;
    top: unset;
    left: unset;
  }

  .resume__aside-left-second-project-icon-3 {
    bottom: -50px;
    right: unset;
    top: unset;
    left: -20px;
  }

  .resume__aside-right-second-project-icon-1 {
    top: unset;
    left: unset;
    bottom: -110px;
    right: 0;
  }

  .resume__aside-right-second-project-icon-2 {
    top: unset;
    left: -30px;
    bottom: -50px;
  }

  .resume__tablet-project-icon-js {
    left: unset;
    top: unset;
    bottom: -120px;
    right: -10px;
  }

  .resume__tablet-project-icon-rfb {
    right: -40px;
    top: -20px;
  }

  .resume__tablet-project-icon-scss {
    top: -40px;
    left: -20px;
  }

  .resume__tablet-project-icon-cordova {
    right: unset;
    top: unset;
    bottom: -60px;
    left: -35px;
  } 

  .resume__bottom-project-icon-1 {
    left: -25px;
    top: unset;
    bottom: -30px;
  }

  .resume__bottom-project-icon-2 {
    width: 46px;
    height: 46px;
    left: 0;
    top: -30px;
  }

  .resume__bottom-project-icon-3 {
    top: unset;
    left: unset;
    bottom: -100px;
    right: 10px;
  }

  .resume__bottom-project-icon-4 {
    left: unset;
    right: -60px;
    top: -30px;
  }

  .resume__connection-line-work {
    height: 310px;
    right: -8.4em;
  }
}


/* Recommendation lines */
@media screen and (max-width: 1490px) {
  .resume__linkedin-recommendations-line-1 {
    height: 73px;
    transform: rotate(-56deg);
    left: -30px;
    top: -12px;
  }

  .resume__linkedin-recommendations-line-2 {
    height: 57px;
    transform: rotate(-45deg);
    right: 164px;
    top: -24px;
  }
  
  .resume__linkedin-recommendations-line-3 {
    height: 169px;
    transform: rotate(90deg);
    left: 109px;
    top: -100px;
  }
  
  .resume__linkedin-recommendations-line-4 {
            height: 103px;
        transform: rotate(123deg);
        left: -18px;
        top: -95px;
  }
  
  .resume__linkedin-recommendations-line-5 {
    height: 400px;
    left: -60px;
    top: -395px;
  }

  .resume__linkedin-recommendations-line-7 {
    height: 430px;
    left: -60px;
    top: -930px;
  }

  .resume__linkedin-recommendations-line-8 {
    height: 430px;
    left: -60px;
    top: -930px;
  }

  .resume__linkedin-recommendations-list-icon {
    top: -425px;
    left: -74px;
  }
}

/* aside-right-first for laptops and smaller screens */
@media screen and (max-width: 1490px) {
  .resume__work-project-item-image-border-connection-line {
    height: 145px;
    left: -61px;
    top: 20px;
    transform: rotate(-45deg);
  }

  .resume__aside-right-first-icon-connection-line-1 {
    height: 47px;
    left: 10px;
    bottom: 2px;
    transform: rotate(45deg);
  }

  .resume__aside-right-first-icon-connection-line-2 {
    height: 29px;
    right: 11px;
    top: 25px;
    transform: rotate(45deg);
  }

  .resume__aside-right-first-icon-connection-line-3 {
    height: 44px;
    right: 45px;
    bottom: -27px;
    transform: rotate(-35deg);
  }

  .resume__aside-right-first-icon-connection-line-4 {
    height: 19px;
    right: 155px;
    bottom: -27px;
  }

  .resume__aside-left-first-icon-connection-line-1 {
    height: 35px;
    right: 83px;
    bottom: -36px;
    transform: rotate(-25deg);
  }
  .resume__aside-left-first-icon-connection-line-2 {
    height: 35px;
    right: 15px;
    top: 10px;
    transform: rotate(45deg);
  }

  .resume__aside-left-second-icon-connection-line-1 {
    height: 30px;
    left: 40px;
    bottom: -7px;
    transform: rotate(45deg);
  }
  .resume__aside-left-second-icon-connection-line-2 {
    height: 35px;
    right: 20px;
    top: 5px;
    transform: rotate(45deg);
  }
  .resume__aside-left-second-icon-connection-line-3 {
    height: 29px;
    right: 72px;
    bottom: -23px;
    transform: rotate(-14deg);
  }

  .resume__aside-right-second-icon-connection-line-1 {
    height: 32px;
    right: 72px;
    bottom: -26px;
    transform: rotate(-26deg);
  }
  .resume__aside-right-second-icon-connection-line-2 {
    height: 33px;
    left: 28px;
    bottom: 0px;
    transform: rotate(45deg);
  }

  .resume__tablet-icon-connection-line-1 {
    height: 27px;
    left: 38px;
    bottom: 0px;
    transform: rotate(45deg);
  }
  .resume__tablet-icon-connection-line-2 {
    height: 25px;
    left: 27px;
    top: 11px;
    transform: rotate(-34deg);
  }
  .resume__tablet-icon-connection-line-3 {
    height: 25px;
    right: 17px;
    top: 20px;
    transform: rotate(45deg);
  }
  .resume__tablet-icon-connection-line-4 {
    height: 23px;
    right: 71px;
    bottom: -16px;
    transform: rotate(-20deg);
  }

  .resume__bottom-icon-connection-line-1 {
    height: 21px;
    left: 28px;
    bottom: 14px;
    transform: rotate(45deg);
  }
  .resume__bottom-icon-connection-line-2 {
    height: 17px;
    left: 39px;
    top: 9px;
    transform: rotate(-34deg);
  }
  .resume__bottom-icon-connection-line-3 {
    height: 22px;
    right: 16px;
    top: 27px;
    transform: rotate(45deg);
  }
  .resume__bottom-icon-connection-line-4 {
    height: 32px;
    right: 71px;
    bottom: -25px;
    transform: rotate(-20deg);
  }

  .resume__work-project-item-image-border-connection-line-2.order-3 {
    height: 600px;
    top: -454px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-5 {
    height: 492px;
    top: -312px;
  }
}
@media screen and (max-width: 980px) {
  :root {
    --profile-image-size: 160px;
    --base-font-size: 14px;
  }
  
  .resume__profile-block {
    margin-right: 0;
  }

  .resume__profile-early-text {
    max-width: 180px;
  }

  .resume__actions-row {
    gap: 150px;
    margin-right: 80px;
  }

  .resume__actions-row-second {
    gap: 80px;
  }

  .resume__actions-container .resume__actions-row:nth-child(2) {
    margin-left: 75px;
  }

  .resume__information-icon-line {
    height: 246px;
    top: -17.6rem;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line {
    top: -13.175em;
    height: 184px;
  }

  .resume__information-icon-line-curved-education {
    top: -23.7rem;
    left: 97px;
    --line-curved-height: 118px;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-education {
    top: -18.1rem;
    left: 88px;
    --line-curved-height: 96px;
  }

  .resume__information-icon-line-curved-work {
    top: -23.5rem;
    right: 93px;
    --line-curved-height: 114px;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-work {
    top: -18rem;
    right: 83px;
    --line-curved-height: 93px;
  }

  .resume__connection-line-work {
    height: 210px;
    right: -6.7em;
  }

  .resume__connection-line-work-2,
  .resume__connection-line-work-inactive {
    height: 1497px;
    right: -13.4em;
    transform: translateY(4px);
  }

  .resume__work-project-icon-line {
    height: 280px;
    right: -139px;
    bottom: -63px;
  }

  .resume__work-project-icon-border.active .resume__work-project-icon-line {
    height: 228px;
    right: -113px;
    bottom: -44px;
  }
  
  .resume__work-project-icon-border.last.active {
    transform: scale(1.2);
  }

  .resume__work-project-item-image-border-connection-line-2.order-1 {
    height: 779px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-3 {
    height: 600px;
    top: -470px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-4 {
    height: 342px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-5 {
    height: 445px;
    top: -282px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-6 {
    height: 233px;
    top: -21px;
  } 

  .resume__connection-line-work-2.active.selected-1 {
    height: 999px;
  }

  .resume__connection-line-work-2.active.selected-2 {
    height: 1099px;
  }

  .resume__connection-line-work-2.active.selected-3 {
    height: 1199px;
  }

  .resume__connection-line-work-2.active.selected-4 {
    height: 1299px;
  }

  .resume__connection-line-work-2.active.selected-5 {
    height: 1399px;
  }

  .resume__connection-line-work-2.active.selected-6 {
    height: 1499px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --profile-image-size: 130px;
    --base-font-size: 12px;
  }

  .resume {
    padding: 0;
  }

  .resume__actions {
    margin-top: -35px;
  }

  .resume__actions-container {
    gap: 15px;
  }

  .resume__profile-early-text {
    max-width: 150px;
  }

  .resume__profile-icon-wrapper {
    transform: scale(1.1);
    cursor: pointer;
  }

  .resume__profile-icon-wrapper.active {
    transform: scale(1.5);
  }

  .resume__actions-row {
    gap: 100px;
    margin-right: 30px;
  }
  
  .resume__actions-icon-wrapper {
  }
  
  .resume__actions-icon-3 {
    padding: 10px;
  }
  
  .resume__linkedin-recommendations-list {
    gap: 0;
  }

  .resume__actions-row-second {
    gap: 50px;
  }

  .resume__actions-container .resume__actions-row:nth-child(2) {
    margin-left: 69px;
  }

  .resume__information-history-p {
    max-width: 380px;
  }

  .resume__connection-line-work {
    height: 210px;
    transform: rotate(118deg);
    right: -7.7em;
    top: 1em;
  }

  .resume__information-icon-line {
    height: 150px;
    top: -12.6rem;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line {
    top: -9.175em;
    height: 110px;
  }

  .resume__information-icon-line-curved-education {
    top: -17.6em;
    left: 76px;
    --line-curved-height: 84px;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-education {
    top: -13.2rem;
    left: 69px;
    --line-curved-height: 67px;
  }

  .resume__information-icon-line-curved-work {
    top: -17.8rem;
    right: 74px;
    --line-curved-height: 87px;
  }

  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-work {
    top: -13.4rem;
    right: 66px;
    --line-curved-height: 72px;
  }

  .resume__connection-line-work-2,
  .resume__connection-line-work-inactive {
    height: 1364px;
    right: -15.4em;
    transform: translateY(34px);
  }

  .resume__work-project-icon-line {
    height: 255px;
    right: -127px;
    bottom: -54px;
  }

  .resume__work-project-icon-border.active .resume__work-project-icon-line {
    height: 206px;
    right: -102px;
    bottom: -33px;
  }

  .resume__linkedin-recommendations-line-2 {
    height: 42px;
    transform: rotate(-45deg);
    right: 164px;
    top: -20px;
  }
  
  .resume__linkedin-recommendations-line-3 {
    height: 115px;
    transform: rotate(91deg);
    left: 82px;
    top: -72px;
  }

  .resume__work-project-item-image-border-connection-line {
    height: 108px;
    left: -44px;
    top: 20px;
  }

  .resume__work-project-icon-border.active .resume__work-project-icon-line-2 {
    height: 152px;
    left: -75px;
    bottom: -70px;
  }

  .resume__work-project-item-image-border-connection-line-2 {
    left: -82px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-1 {
    top: -532px;
    height: 756px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-2 {
    top: -433px;
    height: 596px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-3 {
    top: -467px;
    height: 596px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-4 {
    top: -233px;
    height: 338px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-5 {
    top: -254px;
    height: 392px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-6 {
    height: 202px;
    top: -32px;
  }

  .resume__connection-line-work-2.active.selected-1 {
    height: 864px;
  }

  .resume__connection-line-work-2.active.selected-2 {
    height: 964px;
  }

  .resume__connection-line-work-2.active.selected-3 {
    height: 1064px;
  }

  .resume__connection-line-work-2.active.selected-4 {
    height: 1164px;
  }

  .resume__connection-line-work-2.active.selected-5 {
    height: 1264px;
  }

  .resume__connection-line-work-2.active.selected-6 {
    height: 1364px;
  }
}
/* Responsive Styles */
@media screen and (max-width: 600px) {
  /* Root Variables and Base Layout */
  :root {
    --profile-image-size: 110px;
    --base-font-size: 10px;
  }
  
  header {
    margin-top: 15px;
  }
  
  /* Profile Section */
  .resume__profile {
    margin-top: 0;
  }
  
  .resume__profile-picture {
    margin-top: 25px;
  }
  
  .resume__profile-early-text {
    max-width: 100px;
    font-size: 0.9rem;
  }
  
  .resume__profile-icon-wrapper.active {
    transform: scale(1.25);
  }
  
  /* Actions and Navigation */
  .resume__actions-row {
    gap: 60px;
    margin-right: 85px;
  }
  
  .resume__actions-row-second {
    gap: 40px;
  }
  
  .resume__actions-container .resume__actions-row:nth-child(2) {
    margin-left: 30px;
  }
  
  .resume__actions-icon-wrapper {
    width: 6rem;
    height: 6rem;
    min-width: 5rem;
  }
  
  .resume__actions-icon-wrapper.active {
    transform: scale(1.15) translateY(22px);
  }
  
  .resume__actions-icon-2 {
    margin: -5px 0 0 4px;
  }
  
  /* Information Section */
  .resume__information {
    margin: 25px 0px 25px 0px;
  }
  
  .resume__information-info-container {
    margin-right: 20px;
  }
  
  .resume__information-history {
    min-width: 80px;
  }
  
  .resume__information-history-divider {
    height: 450px;
  }
  
  .resume__information-history-p {
    font-size: 1rem;
    max-width: 230px;
  }
  
  /* Education Section */
  .resume__education-header-title {
    line-height: 30px;
  }
  
  .resume__item-selected-title {
    max-width: 80px;
  }

  .resume__qualifications-experience-list {
    gap: 6px;
    max-width: 300px;
  }
  
  /* Work Projects Section */
  .resume__work-project-item {
    padding: 0 30px;
  }
  
  .resume__work-project-item-image-border {
    width: 230px;
    height: 230px;
  }
  
  .resume__work-project-item-image {
    width: 198px;
    height: 198px;
  }
  
  .resume__work-project-icon-border {
    width: 64px;
    height: 64px;
  }
  
  .resume__work-project-icon-border.active {
    transform: scale(1.1);
  }
  
  .resume__work-project-icon-wrapper {
    width: 52px;
    height: 52px;
  }
  
  .resume__work-project-icon-wrapper svg {
    width: 40px;
    height: 40px;
  }
  
  /* Connection Lines */
  .resume__connection-line-work {
    height: 118px;
    transform: rotate(127deg);
    right: -4.1em;
    top: 6em;
  }
  
  .resume__connection-line-work-2,
  .resume__connection-line-work-inactive {
    height: 1262px;
    right: -8.8em;
    top: 120px;
    transform: translateY(34px);
  }
  
  .resume__work-project-icon-line {
    height: 137px;
    right: -67px;
    bottom: -10px;
  }
  
  .resume__work-project-icon-border.active .resume__work-project-icon-line {
    height: 122px;
    right: -59px;
    bottom: -7px;
  }
  
  .resume__work-project-icon-border.last.active .resume__work-project-icon-line {
    height: 110px;
    right: -53px;
    bottom: -1px;
  }
  
  /* Information Icon Lines */
  .resume__information-icon-line {
    height: 90px;
    top: -9rem;
    left: 2.7rem;
  }
  
  .resume__information-icon-line-middle {
    height: 141px;
    top: -14.4rem;
    left: 2.7rem;
  }
  
  .resume__actions-icon-wrapper.active > .resume__information-icon-line {
    top: -7.175em;
    height: 70px;
  }
  
  .resume__actions-icon-wrapper.active > .resume__information-icon-line-middle {
    top: -11.9em;
    height: 116px;
  }
  
  /* Curved Lines - Education */
  .resume__information-icon-line-curved-education {
    top: -17.1em;
    left: 68px;
    --line-curved-height: 103px;
    transform: rotate(53deg);
  }
  
  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-education {
    top: -14.2rem;
    left: 62px;
    --line-curved-height: 88px;
  }
  
  /* Curved Lines - Work */
  .resume__information-icon-line-curved-work {
    top: -16.8rem;
    right: 61px;
    --line-curved-height: 96px;
    transform: rotate(-50deg);
  }
  
  .resume__actions-icon-wrapper.active > .resume__information-icon-line-curved-work {
    top: -14.2rem;
    right: 57px;
    --line-curved-height: 87px;
  }

  .resume__linkedin-recommendations-line-1 {
    height: 27px;
    transform: rotate(-45deg);
    left: -6px;
    top: unset;
  }
  
  .resume__linkedin-recommendations-line-2 {
    height: 42px;
    transform: rotate(-45deg);
    right: 153px;
    top: -20px;
  }
  
  .resume__linkedin-recommendations-line-3 {
    height: 80px;
    transform: rotate(91deg);
    left: 90px;
    top: -54px;
  }
  
  .resume__linkedin-recommendations-line-4 {
    height: 85px;
    transform: rotate(130deg);
    left: 18px;
    top: -84px;
  }
  
  .resume__linkedin-recommendations-line-5 {
    height: 400px;
    left: -15px;
    top: -395px;
  }

  .resume__linkedin-recommendations-line-7 {
    left: -15px;
  }

  .resume__linkedin-recommendations-list-icon {
    top: -425px;
    left: -29px;
  }

  .resume__aside-right-first-icon-connection-line-1 {
    height: 31px;
    left: 7px;
    bottom: 2px;
    transform: rotate(45deg);
  }

  .resume__aside-right-first-icon-connection-line-2 {
    height: 11px;
    right: 8px;
    top: 25px;
    transform: rotate(45deg);
  }

  .resume__aside-right-first-icon-connection-line-3 {
    height: 35px;
    right: 45px;
    bottom: -30px;
    transform: rotate(-35deg);
  }

  .resume__aside-right-first-icon-connection-line-4 {
    height: 19px;
    right: 88px;
    bottom: -27px;
  }

  .resume__aside-left-first-icon-connection-line-1 {
    height: 25px;
    right: 76px;
    top: unset;
    bottom: -32px;
    transform: rotate(-15deg);
  }

  .resume__aside-left-first-icon-connection-line-2 {
    height: 19px;
    right: 12px;
  }

  .resume__aside-left-second-icon-connection-line-1 {
    height: 16px;
    left: 25px;
    bottom: 2px;
    transform: rotate(45deg);
  }

  .resume__aside-left-second-icon-connection-line-2 {
    height: 20px;
    right: 12px;
    top: 12px;
    transform: rotate(45deg);
  }

  .resume__aside-left-second-icon-connection-line-3 {
    height: 18px;
  }

  .resume__aside-right-second-icon-connection-line-1 {
    height: 22px;
    right: 65px;
    bottom: -26px;
  }
  .resume__aside-right-second-icon-connection-line-2 {
    height: 19px;
    left: 27px;
    bottom: -3px;
    transform: rotate(45deg);
  }

  .resume__tablet-icon-connection-line-1 {
    height: 12px;
    left: 35px;
  }
  .resume__tablet-icon-connection-line-2 {
    height: 12px;
    left: 21px;
  }
  .resume__tablet-icon-connection-line-3 {
    height: 11px;
    right: 14px;
  }
  .resume__tablet-icon-connection-line-4 {
    height: 12px;
    right: 71px;
    bottom: -17px;
  }

  .resume__bottom-project-icon-1 {
    left: -40px;
  }

  .resume__bottom-project-icon-2 {
    top: -40px;
  }

  .resume__bottom-project-icon-4 {
    top: -50px;
  }

  .resume__bottom-icon-connection-line-1 {
    height: 17px;
    left: 13px;
    bottom: 14px;
  }
  .resume__bottom-icon-connection-line-2 {
    height: 11px;
    left: 33px;
    top: 2px;
  }
  .resume__bottom-icon-connection-line-3 {
    height: 22px;
    right: 11px;
    top: 10px;
  }
  .resume__bottom-icon-connection-line-4 {
    height: 23px;
    right: 71px;
    bottom: -27px;
  }

  .resume__work-project-item-image-border-connection-line {
    height: 95px;
    left: -28px;
    top: -35px;
  }

  .resume__work-project-icon-border.active .resume__work-project-icon-line-2 {
    height: 123px;
    left: -62px;
    bottom: -51px;
  }

  .resume__work-project-icon-border.last.active .resume__work-project-icon-line-2 {
    height: 110px;
    left: -57px;
    bottom: -44px;
  }

  .resume__work-project-item-image-border-connection-line-2 {
    left: -61px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-1 {
    top: -487px;
    height: 602px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-2 {
    top: -399px;
    height: 454px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-3 {
    top: -434px;
    height: 454px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-4 {
    top: -223px;
    height: 261px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-5 {
    top: -249px;
    height: 305px;
  }

  .resume__work-project-item-image-border-connection-line-2.order-6 {
    height: 124px;
    top: -46px;
  }

  .resume__connection-line-work-2.active.selected-1 {height: 825px;}
  .resume__connection-line-work-2.active.selected-2 {height: 913px;}
  .resume__connection-line-work-2.active.selected-3 {height: 1001px;}
  .resume__connection-line-work-2.active.selected-4 {height: 1089px;}
  .resume__connection-line-work-2.active.selected-5 {height: 1177px;}
  .resume__connection-line-work-2.active.selected-6 {height: 1263px;}
}

/* Smaller Mobile Devices */
@media screen and (max-width: 420px) {
  .resume__connection-line-work-2,
  .resume__connection-line-work-inactive {
    height: 1278px;
  }

  .resume__information-container {
    min-height: 617px;
  }

  .resume__connection-line-work-2.active.selected-1 {height: 842px;}
  .resume__connection-line-work-2.active.selected-2 {height: 930px;}
  .resume__connection-line-work-2.active.selected-3 {height: 1018px;}
  .resume__connection-line-work-2.active.selected-4 {height: 1106px;}
  .resume__connection-line-work-2.active.selected-5 {height: 1194px;}
  .resume__connection-line-work-2.active.selected-6 {height: 1280px;}
}


/* Each property follows the equation:
  [ property = m \times w + b ] Where:
  - ( m ) = slope (( \Delta y / \Delta x ))
  - ( w ) = screen width
  - ( b ) = intercept (value at ( w = 378 ))
*/
@media (max-width: 378px) {
  .resume__work-project-icon-border.active .resume__work-project-icon-line-2 {
    height: calc(0.448vw * 100 - 46.6px);
    left: calc(-0.241vw * 100 + 29.1px);
    bottom: calc(-0.172vw * 100 + 14px);
  }


  /* Height Calculation
    [ m = \frac{100 - 110}{353 - 378} = \frac{-10}{-25} = 0.4 ] [ height = 0.4 \times w + b ] Solve for ( b ): [ 110 = 0.4 \times 378 + b ] [ b = -41.2 ] Final formula:
    [ height = 0.4 \times w - 41.2 ]
    Left Position Calculation
    [ m = \frac{-51 - (-57)}{353 - 378} = \frac{6}{-25} = -0.24 ] [ left = -0.24 \times w + b ] Solve for ( b ): [ -57 = -0.24 \times 378 + b ] [ b = 33.72 ] Final formula:
    [ left = -0.24 \times w + 33.72 ]
    Bottom Position Calculation
    [ m = \frac{-41 - (-44)}{353 - 378} = \frac{3}{-25} = -0.12 ] [ bottom = -0.12 \times w + b ] Solve for ( b ): [ -44 = -0.12 \times 378 + b ] [ b = 1.36 ] Final formula:
    [ bottom = -0.12 \times w + 1.36 ]
  */
  .resume__work-project-icon-border.last.active .resume__work-project-icon-line-2 {
    height: calc(0.4vw * 100 - 41.2px);
    left: calc(-0.24vw * 100 + 34.72px);
    bottom: calc(-0.12vw * 100 + 1.36px);
  }
}