/* Sections */
.sections {
  flex: 1;
}

.section {
  width: calc(100% - var(--size1) * 2);
  height: calc(100% - var(--size1) * 3.5);
  padding: var(--size1) 0 calc(var(--size1) - 5px);
  position: absolute;
  top: var(--size1);
  transform: translate3d(calc(-100% - 25vw), 0, 0);
  transition: all 0.15s, transform 0.35s;
}

.visible-section {
  transform: translate3d(0, 0, 0);
}

.section-inner {
  width: 100%;
  height: 100%;
  padding: 0 var(--size1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(var(--size1) * 1.5);
  overflow: auto;
}

.section-inner::-webkit-scrollbar {
  width: 8px;
}

.section-inner::-webkit-scrollbar-thumb {
  background: var(--txt-faded3);
  border: solid 3px transparent;
  border-top-width: 0;
  border-bottom-width: 0;
  background-clip: padding-box;
}

.section-inner::-webkit-scrollbar-thumb:hover {
  background: var(--txt-faded);
  border: solid 3px transparent;
  border-top-width: 0;
  border-bottom-width: 0;
  background-clip: padding-box;
}

.section-inner::-webkit-scrollbar-corner {
  background: transparent;
}

.subsection {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
}

.subsection:nth-last-of-type(1) {
  padding-bottom: 5px;
}

/* Sections - Nav */
.section-nav {
  width: 100%;
  height: var(--size1);
  margin-bottom: var(--size1);
  padding: 0 var(--size1);
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: var(--size1);
}

.sec-nav-btn {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--shade1);
  border-radius: var(--mainRadius1);
  box-shadow: var(--box-shadow1) var(--wrapperColor1), var(--box-shadow2) var(--wrapperColor1);
  transition: 0.15s;
  cursor: pointer;
}

.sec-nav-btn:hover {
  box-shadow: var(--box-shadow1) var(--wrapperColor1), var(--box-shadow3) var(--color1);
}

.sec-nav-btn p {
  position: relative;
  bottom: -1px;
  color: var(--txt1);
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.2;
  user-select: none;
  transition: 0.15s;
}

.sec-nav-btn:hover p {
  color: var(--color1);
}

.sec-nav-prev p {
  margin-left: 8px;
}

.sec-nav-next p {
  margin-right: 8px;
}

/* Sections - Arrows */
.sec-nav-arrow {
  height: 100%;
  width: 10px;
  position: relative;
}

.sec-nav-arrow span {
  width: 12px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--txt1);
  border-radius: 200px;
  transition: 0.15s;
}

.sec-nav-btn:hover span {
  background-color: var(--color1);
}

.sec-nav-prev:hover span {
  left: 0;
}

.sec-nav-next:hover span {
  left: 100%;
}

.sec-nav-btn span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 4px)) rotate(-45deg);
}

.sec-nav-btn span:nth-child(2) {
  transform: translate(-50%, calc(-50% + 4px)) rotate(45deg);
}

.sec-nav-next span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 4px)) rotate(45deg);
}

.sec-nav-next span:nth-child(2) {
  transform: translate(-50%, calc(-50% + 4px)) rotate(-45deg);
}

/* Sections - Headings */
.section-heading {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sec-head {
  margin-bottom: calc(var(--size1) * -1);
  background: linear-gradient(to right, var(--color1a), var(--color1), var(--color2), var(--color2a));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: font1-semibold;
  font-size: min(28px, 6vw);
  text-transform: capitalize;
  filter: drop-shadow(0 0 1px var(--shade2));
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.sec-subhead-div {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--size1);
  position: relative;
}

.sec-subhead-div:has(.subhead-indicator) {
  cursor: default;
}

.sec-subhead {
  color: var(--txt1);
  font-family: font1-semibold;
  line-height: 1.2;
  text-transform: capitalize;
  text-wrap: balance;
}

.sec-subhead-line {
  flex: 1;
  height: 2px;
  background-color: var(--color1);
  border-radius: 200px;
}

.sec-desc {
  color: var(--txt-faded);
  font-size: 16px;
  text-wrap: balance;
}

.subhead-indicator {
  font-size: 14px;
  font-family: font1;
  vertical-align: top;
}

.subhead-info {
  width: min(500px, 100%);
  padding: 12px;
  box-sizing: border-box;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  background-color: var(--shade3);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  transition: 0.15s;
  pointer-events: none;
}

.sec-subhead-div:hover .subhead-info {
  opacity: 1;
}

.subhead-info p {
  text-wrap: balance;
  color: var(--txt1);
  font-size: 16px;
}

/* Sections - Input (Item) */
.section-item {
  flex: 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-item label {
  margin-bottom: 2px;
  pointer-events: none;
}

.sec-input {
  min-width: 0 !important;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--txt1);
  font-size: 18px;
  background-color: var(--shade1);
  border: none;
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  cursor: text;
  transition: 0.15s;
}

.sec-input:hover,
.sec-input:focus {
  box-shadow: var(--box-shadow3) var(--color1);
}

.sec-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.dark-mode .sec-input::-webkit-calendar-picker-indicator {
  color-scheme: dark;
}

.sec-input.validation-failed {
  box-shadow: var(--box-shadow3) var(--color2);
}

.sec-textarea {
  width: 100%;
  height: 160px;
  padding: 8px;
  resize: none;
}

/* Sections - Add & Delete Input Buttons */
.add-btn,
.delete-btn {
  height: 32px;
  aspect-ratio: 1/1;
  position: relative;
  background-color: var(--shade1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  transition: 0.15s;
  cursor: pointer;
}

.add-btn:hover,
.delete-btn:hover {
  background-color: var(--color1);
}

.add-btn span {
  width: 70%;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color1);
  border-radius: 200px;
  transition: 0.15s;
}

.add-btn:hover span {
  background-color: var(--shade1);
}

.add-btn span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
}

.delete-btn:after {
  content: "";
  width: 70%;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color1);
  border-radius: 200px;
  transition: 0.15s;
}

.delete-btn:hover:after {
  background-color: var(--shade1);
}

/* Sections - media */
@media screen and (width <= 768px) {
  .section {
    height: calc(100% - var(--size1) * 4.5);
  }
  .section-nav {
    height: calc(var(--size1) * 1.5);
  }
  .sec-desc {
    font-size: 15px;
  }
}
@media screen and (width <= 440px) {
  .subhead-info p {
    font-size: 14px;
  }
}
@media screen and (width <= 320px) {
  .sec-nav-btn p {
    display: none;
  }
  .sec-input {
    font-size: 16px;
  }
}
/* Section 1 - Profile */
.section1 .section-item {
  min-width: 0;
  flex: 40%;
}
.section1 .sec-input {
  min-width: 0;
  width: 100%;
}

/* Section 1 - Details */
.sec-details {
  align-items: stretch;
}

.sec-details-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
}

/* File Drop */
.file-drop-div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: calc(var(--size1) / 2);
}

.file-drop-buttons {
  display: flex;
  gap: calc(var(--size1) / 2);
}

/* File Drop Icon */
.drop-zone {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-icon {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  margin: auto;
  pointer-events: none;
}

.modal-icon * {
  stroke-width: 8px;
  stroke: var(--txt-faded3);
  transition: 0.25s;
}

/* File Drop Icon - Upload */
.modal-icon-active .lm-upload-inner {
  stroke: var(--color1);
}

.modal-drop .lm-upload-icon circle {
  stroke: var(--color1);
}

.lm-upload-arrow {
  animation: uploadIconMove 4.5s infinite;
}

.lm-upload-arrowshaft {
  animation: uploadIconShaft 4.5s infinite, uploadIconMove 4.5s infinite;
}

@keyframes uploadIconMove {
  25% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -10px);
  }
  38% {
    transform: translate(0, 5px);
  }
  50% {
    transform: translate(0, 0);
  }
}
@keyframes uploadIconShaft {
  25% {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
  }
  30% {
    stroke-dasharray: 60;
    stroke-dashoffset: -12;
  }
  38% {
    stroke-dasharray: 80;
    stroke-dashoffset: -3;
  }
  50% {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
  }
}
/* File Drop Icon - Checkmark */
.lm-check-icon * {
  stroke: var(--color1);
}

.lm-check-circle {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: 0.9s checkCircle forwards cubic-bezier(0.14, 0.6, 0.56, 0.86);
}

.lm-checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: 0.25s checkmark forwards cubic-bezier(0.14, 0.6, 0.56, 0.86);
  animation-delay: 0.8s;
}

@keyframes checkCircle {
  0% {
    stroke-dashoffset: 600;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes checkmark {
  0% {
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* File Drop Icon - X */
.lm-x-inner {
  stroke: var(--color2);
}

.lm-x-inner:nth-of-type(1) {
  animation: xIcon 4.5s 0.25s infinite;
}

.lm-x-inner:nth-of-type(2) {
  animation: xIcon 4.5s infinite;
}

@keyframes xIcon {
  25% {
    stroke-dasharray: 115;
    stroke-dashoffset: 0;
  }
  35% {
    stroke-dasharray: 90;
  }
  45% {
    stroke-dashoffset: -10;
  }
  55% {
    stroke-dashoffset: 0;
  }
  65% {
    stroke-dasharray: 115;
  }
}
/* File Drop - Select File Button */
.lm-txt-div {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lm-txt {
  font-size: 16px;
}

.lm-file-btn {
  flex: 1;
  min-width: 150px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--txt1);
  font-size: 18px;
  font-family: font1-semibold;
  text-transform: uppercase;
  background-color: var(--shade1);
  border: solid 2px var(--color1);
  border-radius: var(--mainRadius1);
  cursor: pointer;
  transition: 0.15s;
}

.lm-file-btn:hover {
  color: #FFF;
  background-color: var(--color1);
}

/* File Drop - Delete File Button */
.delete-file {
  height: 36px;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  position: relative;
  background-color: var(--shade1);
  border: solid 2px var(--color1);
  border-radius: var(--mainRadius1);
  cursor: pointer;
  transition: 0.15s;
}

.delete-file span {
  width: 70%;
  height: 6px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--shade1);
  border: solid 2px var(--txt-faded2);
  border-radius: 200px;
  transition-property: all, width;
  transition-duration: 0.15s, 0.15s;
}

.delete-file span:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.delete-file span:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(45deg);
  transition-duration: 0.15s, 0.25s;
  transition-delay: 0s, 0.1s;
}

.delete-file:hover span {
  width: 60%;
  border: solid 2px var(--color1);
}

.delete-file span:nth-of-type(2):after {
  content: "";
  width: 10px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background-color: var(--shade1);
  z-index: 1000;
}

/* Section 1 - Links */
.sec-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sec-links .sec-subhead-div {
  margin-bottom: calc(var(--size1) / 2);
}
.sec-links .sec-link-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
}
.sec-links .sec-link {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--size1) / 2);
}
.sec-links .sec-link-list:has(.sec-link) ~ .add-btn {
  margin-top: calc(var(--size1) / 2);
}
.sec-links .sec-link-list:has(.sec-link:nth-of-type(6)) ~ .add-btn {
  display: none;
}

/* Section 1 - QR Code */
.sec-qr-code {
  width: 100%;
  margin-top: alc(var(--size1)/2);
  display: flex;
  align-items: stretch;
}
.sec-qr-code .drop-zone {
  flex: none;
}
.sec-qr-code .modal-icon {
  width: 175px;
}
.sec-qr-code .sec-qr-interact {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size1);
}
.sec-qr-code .section-item {
  flex: none;
  width: calc(100% - 6px);
}
.sec-qr-code .file-drop-buttons {
  width: 100%;
}

/* Section 1 - media */
@media screen and (1024px < width <= 1200px) {
  .photo-drop-zone .modal-icon {
    max-height: none;
    height: 128px;
  }
  .sec-details {
    align-items: flex-start;
  }
  .sec-details-inputs {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media screen and (width <= 540px) {
  .file-drop-div {
    order: 1;
  }
  .sec-details .drop-zone {
    margin-top: calc(var(--size1) / 2);
  }
  .photo-drop-zone .modal-icon {
    width: min(100%, 200px);
  }
  .sec-details {
    flex-direction: column;
  }
  .sec-details-inputs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .section1 .sec-links .sec-link-list {
    gap: var(--size1);
  }
  .section1 .sec-links .sec-link-list:has(.sec-link) ~ .add-btn {
    margin-top: var(--size1);
  }
  .section1 .sec-links .sec-link {
    flex-wrap: wrap;
  }
  .section1 .sec-links .sec-link .section-item {
    width: auto;
    flex: 1;
  }
  .section1 .sec-links .sec-link .section-item:nth-of-type(1) {
    flex: 100%;
  }
  .sec-qr-code {
    flex-direction: column;
  }
  .sec-qr-code .sec-qr-interact {
    gap: calc(var(--size1) / 2);
  }
  .sec-qr-code .modal-icon {
    width: 200px;
  }
}
@media screen and (width <= 440px) {
  .section1 .section-item {
    flex: 100%;
  }
  .sec-details-inputs {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
@media screen and (width <= 320px) {
  .lm-file-btn {
    flex: 1;
    min-width: 0;
    font-size: 5.5vw;
  }
}
/* Section List */
.subsection-list {
  width: 100%;
}

.subsection-list:not(:has(.sec-list-elem)) {
  display: none;
}

.sec-desc {
  width: 100%;
}

.sec-list-elem {
  width: 100%;
  margin-bottom: var(--size1);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--shade2);
}

.sec-list-elem:nth-last-of-type(1) {
  margin-bottom: 0;
}

.experience-list:has(.sec-list-elem:nth-of-type(10)) ~ .add-btn,
.education-list:has(.sec-list-elem:nth-of-type(6)) ~ .add-btn,
.courses-list:has(.sec-list-elem:nth-of-type(8)) ~ .add-btn,
.references-list:has(.sec-list-elem:nth-of-type(6)) ~ .add-btn {
  display: none;
}

/* Head */
.sec-list-head {
  margin: var(--size1);
  margin-bottom: 0;
  padding-bottom: var(--size1);
  display: flex;
  align-items: center;
  border-bottom: solid 2px transparent;
  cursor: pointer;
  transition: 0.15s;
}

.list-open .sec-list-head {
  margin-bottom: calc(var(--size1) / 2);
  padding-bottom: calc(var(--size1) / 2);
  border-color: var(--txt-faded2);
}

.sec-list-heading {
  flex: 1;
  padding-right: calc(var(--size1) / 2);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: 0.15s;
}

.sec-list-head:hover .sec-list-heading {
  color: var(--color1);
}

.delete-list {
  margin-left: auto;
}

.sec-list-indicator {
  width: 32px;
  aspect-ratio: 1/1;
  margin-left: calc(var(--size1) / 2);
  position: relative;
  cursor: pointer;
  transition: 0.15s;
}
.sec-list-indicator:before, .sec-list-indicator:after {
  content: "";
  width: 20px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--txt-faded2);
  border-radius: 200px;
  transition: 0.15s;
}
.sec-list-indicator:before {
  transform: translate(calc(-50% - 6.5px), 0) rotate(45deg);
}
.sec-list-indicator:after {
  transform: translate(calc(-50% + 6.5px), 0) rotate(-45deg);
}

.sec-list-head:hover .sec-list-indicator:before, .sec-list-head:hover .sec-list-indicator:after {
  background-color: var(--color1);
}

.list-open .sec-list-indicator {
  transform: rotate(180deg);
}

/* Inputs */
.sec-list-inputs {
  height: 0;
  padding: 0 var(--size1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
  transition: 0.15s;
}

.list-open .sec-list-inputs {
  height: auto;
  padding-bottom: var(--size1);
}

.sec-list-inputs > .section-item:nth-of-type(1) {
  flex: 100%;
}

.sec-list-inputs .sec-input {
  width: 100%;
}

.no-end-date :is(label, input) {
  color: var(--txt-faded3);
}

/* Current Job Position */
.curr-pos-div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.curr-pos-div label {
  margin-bottom: -1px;
  padding-right: 6px;
  color: var(--txt-faded2);
  font-size: 14px;
  line-height: 1.2;
  pointer-events: all;
  cursor: pointer;
}

.curr-pos-div input {
  width: 14px;
  aspect-ratio: 1/1;
  position: relative;
  appearance: none;
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  cursor: pointer;
}

.curr-pos-div input:after {
  content: "";
  width: 0;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color1);
  border-radius: 50%;
  transition: 0.1s;
}

.curr-pos-div input:checked:after {
  width: 10px;
}

/* Job Desctiption */
.sec-list-inputs .list-desc-div {
  flex: 100%;
}

.list-desc-div .list-label {
  margin-bottom: 2px;
  pointer-events: none;
}

.list-desc-inner {
  width: 100%;
  padding: calc(var(--size1) / 2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  transition: 0.15s;
}

/* Job Desctiption - Buttons */
.list-desc-btns {
  margin-bottom: calc(var(--size1) / 2);
  padding-bottom: calc(var(--size1) / 2);
  display: flex;
  flex-direction: row;
  gap: calc(var(--size1) / 2);
  border-bottom: solid 2px var(--txt-faded2);
}

.list-desc-btn {
  width: 26px;
  aspect-ratio: 1/1;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--txt1);
  font-size: 16px;
  background-color: transparent;
  border: none;
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: var(--radius1);
  transition: 0.15s;
  cursor: pointer;
}

.list-desc-btn:hover {
  color: var(--color1);
  box-shadow: var(--box-shadow3) var(--color1);
}

.list-desc-btn.desc-btn-active:not(.list-list-btn) {
  color: #FFF;
  background-color: var(--color1);
}

.list-bold-btn {
  font-weight: 800;
}

.list-italic-btn {
  font-style: italic;
}

.list-underline-btn {
  text-decoration: underline;
}

.list-nr-list-btn {
  margin-left: auto;
}

.list-list-btn svg {
  width: calc(100% - 12px);
  aspect-ratio: 1/1;
}

.list-list-btn svg * {
  fill: var(--txt1);
  transition: 0.15s;
}

.list-list-btn:hover svg * {
  fill: var(--color1);
}

/* Job Desctiption - Description Text Area */
.sec-list-desc {
  min-height: 150px;
  overflow: auto;
}

.sec-list-desc,
.sec-list-desc * {
  color: var(--txt1) !important;
  font-family: font2, Roboto, Arial, sans-serif !important;
  font-size: 18px !important;
}

.sec-list-desc[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: var(--txt-faded2);
  display: block;
  pointer-events: none;
}

.sec-list-desc::-webkit-scrollbar {
  width: 8px;
}

.sec-list-desc::-webkit-scrollbar-thumb {
  background: var(--txt-faded3);
  border-left: solid 6px transparent;
  background-clip: padding-box;
}

.sec-list-desc::-webkit-scrollbar-thumb:hover {
  background: var(--txt-faded);
  border-left: solid 6px transparent;
  background-clip: padding-box;
}

/* Section List - media */
@media screen and (width <= 540px) {
  .section-list .section-item {
    flex: 100%;
  }
}
@media screen and (width <= 440px) {
  .section-list .delete-btn {
    height: 26px;
  }
  .sec-list-indicator {
    width: 26px;
    margin-left: 8px;
  }
  .sec-list-indicator:before, .sec-list-indicator:after {
    width: 14px;
  }
  .sec-list-indicator:before {
    transform: translate(calc(-50% - 4px), 0) rotate(45deg);
  }
  .sec-list-indicator:after {
    transform: translate(calc(-50% + 4px), 0) rotate(-45deg);
  }
}
@media screen and (width <= 320px) {
  .section-list .section-item {
    flex: 100%;
  }
  .sec-list-head {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sec-list-heading {
    order: 1;
    flex: none;
    width: 100%;
    margin-top: 8px;
    padding: 0;
  }
  .section-list .delete-btn {
    margin: 0;
  }
  .list-desc-btns {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .list-nr-list-btn {
    margin-left: calc(100% - 62px);
  }
  .sec-list-desc {
    min-height: 200px;
  }
}
/* Section List - Courses */
.section4 .sec-list-inputs > .section-item:nth-of-type(1) {
  flex: 40%;
}

/* Section 5 - Skills */
.sec-languages {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sec-languages .sec-subhead-div {
  margin-bottom: calc(var(--size1) / 2);
}
.sec-languages .sec-desc {
  margin-bottom: calc(var(--size1) / 2);
}
.sec-languages .languages-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
}
.sec-languages .sec-lang {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--size1) / 2);
}
.sec-languages .sec-lang-lvl {
  cursor: pointer;
}
.sec-languages:has(.sec-lang) .add-btn {
  margin-top: calc(var(--size1) / 2);
}
.sec-languages .languages-list:has(.sec-lang:nth-of-type(8)) ~ .add-btn {
  display: none;
}

.section5 .section-item > * {
  width: 100%;
}

/* Section 5 - Small Layout */
.sl-subsection {
  gap: 0;
}
.sl-subsection .sec-subhead-div {
  margin-bottom: calc(var(--size1) / 2);
}
.sl-subsection .sec-desc {
  margin-bottom: calc(var(--size1) / 2);
}
.sl-subsection:has(.sl-elem) .add-btn {
  margin-top: calc(var(--size1) / 2);
}

.sl-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size1);
  row-gap: calc(var(--size1) / 2);
}

.skills-list:has(.sl-elem:nth-of-type(20)) ~ .add-btn {
  display: none;
}

.accomplishments-list:has(.sl-elem:nth-of-type(16)) ~ .add-btn,
.hobbies-list:has(.sl-elem:nth-of-type(10)) ~ .add-btn {
  display: none;
}

.sl-elem {
  width: calc((100% - var(--size1)) / 2);
  display: flex;
  gap: calc(var(--size1) / 2);
}

.sl-accomplishments .sl-elem {
  width: 100%;
}

.sl-elem .sec-input {
  flex: 1;
}

/* Section 5 - media */
@media screen and (width <= 540px) {
  .sec-languages .languages-list {
    gap: var(--size1);
  }
  .sec-languages .languages-list:has(.sec-lang) ~ .add-btn {
    margin-top: var(--size1);
  }
  .section5 .section-item {
    width: auto;
    flex: 1;
  }
  .section5 .section-item:nth-of-type(1) {
    flex: 100%;
  }
  .sl-elem {
    width: 100%;
  }
}
/* Section 6 - References & Additional Info */
.pdf-add-sec-name.hide-heading {
  display: none;
}

.sec-additional .section-item {
  flex: 100%;
}

.sec-additional .sec-input {
  width: 100%;
}

/* Section 7 - Design */
.section7 {
  --input-size1:20px;
  --input-size2:24px;
  --input-gap:8px;
  --input-border:2px;
}

.design-item {
  width: calc((100% - var(--size1)) / 2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--input-gap);
}

:where(.color-section, .text-section) .design-item {
  width: calc((100% - var(--size1) * 2) / 3);
}

.text-section .design-item:has(.pdf-select-input) {
  width: calc((100% - var(--size1)) / 2);
}

.design-item:has(.pdf-range-input) {
  flex-direction: column;
}

.design-item :is(label, .design-label) {
  width: 100%;
  margin-bottom: var(--input-border);
  color: var(--txt-faded2);
  font-size: 16px;
  pointer-events: none;
}

.design-item .input-info {
  align-self: flex-end;
  margin-top: var(--input-border);
  color: var(--txt-faded2);
  font-size: 16px;
}

.switch-info {
  color: var(--txt-faded);
  font-size: 16px;
  line-height: 1.2;
}

/* Section 7 - Range Slider */
.pdf-range-input {
  appearance: none;
  width: 100%;
  height: 8px;
  margin: calc((var(--input-size1) - 8px) / 2) 0;
  background-color: var(--shade7);
  border-radius: 200px;
  transition: 0.15s;
}

.pdf-range-input::-webkit-slider-thumb {
  appearance: none;
  height: var(--input-size1);
  aspect-ratio: 1/1;
  background-color: var(--shade1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: 50%;
  transition: 0.15s;
  cursor: pointer;
}

.pdf-range-input::-webkit-slider-thumb:is(:active, :hover) {
  box-shadow: var(--box-shadow3) var(--color1);
}

/* Section 7 - Switch */
.pdf-switch-input {
  appearance: none;
  height: var(--input-size2);
  aspect-ratio: 2/1;
  position: relative;
  background-color: var(--shade1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: 200px;
  transition: 0.15s;
  cursor: pointer;
}

.pdf-switch-input:after {
  content: "";
  height: calc(var(--input-size2) - var(--input-border) * 2);
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: var(--input-border);
  transform: translate(0, -50%);
  background-color: var(--color1);
  border-radius: 50%;
  transition: 0.15s;
}

.pdf-switch-input:checked:after {
  left: calc(100% - var(--input-size1) - var(--input-border) * 1);
}

/* Section 7 - Typeface Select */
.pdf-select-input {
  width: 100%;
  height: var(--input-size2);
  padding: 0 var(--input-gap);
  box-sizing: border-box;
  color: var(--txt1);
  font-size: 16px;
  background-color: var(--shade1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border: none;
  border-radius: 200px;
  transition: 0.15s;
  cursor: pointer;
}

.pdf-select-input:hover {
  box-shadow: var(--box-shadow3) var(--color1);
}

/* Section 7 - Colors */
.color-warning {
  width: 100%;
  text-wrap: balance;
}

.show-color-warning {
  color: var(--color2);
}

.design-item:has(.pdf-color) {
  column-gap: var(--input-gap);
}

.pdf-color {
  width: 100%;
  height: var(--input-size2);
  padding: var(--input-border);
  box-sizing: border-box;
  background-color: var(--shade1);
  border: none;
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  border-radius: 200px;
  overflow: hidden;
  cursor: pointer;
}
.pdf-color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.pdf-color::-webkit-color-swatch {
  border: 0;
  border-radius: 200px;
}

.design-item:has(.pdf-color) .input-info {
  order: 1;
  width: 65px;
  margin: 0;
}

.reset-color-btn {
  flex: 1;
  height: var(--input-size2);
  margin-top: var(--input-gap);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1;
  background-color: var(--shade1);
  border: solid var(--input-border) var(--color1);
  border-radius: 200px;
  transition: 0.15s;
  cursor: pointer;
}

.reset-color-btn:hover {
  color: #FFF;
  background-color: var(--color1);
}

/* Section 7 - media */
@media screen and (1200px < width <= 1440px), screen and (width <= 768px) {
  :where(.page-setup-section, .color-section, .text-section) .design-item {
    width: calc((100% - var(--size1)) / 2);
  }
}
@media screen and (1200px < width <= 1440px), screen and (440px < width <= 768px) {
  .text-section .design-item:has(.text-size-input) {
    order: 1;
  }
  .text-section .design-item:has(.text-balance-input) {
    order: 2;
  }
  .text-section .design-item:has(.heading-size-input) {
    order: 3;
  }
  .text-section .design-item:has(.heading-case-input) {
    order: 4;
  }
  .text-section .design-item:has(.line-height-input) {
    order: 5;
  }
  .text-section .design-item:has(.subhead-switch) {
    order: 6;
  }
}
@media screen and (1024px < width <= 1200px) {
  .general-appearance .design-item {
    width: calc((100% - var(--size1) * 3) / 4);
    min-width: 0;
  }
  .general-appearance .design-item:nth-of-type(3) {
    margin-right: 0;
  }
}
@media screen and (width <= 440px) {
  .design-item,
  .text-section .design-item:has(.pdf-select-input) {
    width: 100%;
  }
  .design-item:has(.pdf-switch-input) {
    justify-content: center;
  }
  .switch-info {
    width: 46px;
    text-align: center;
  }
}
/* Section 7 - Heading */
.head-design-item {
  --head-height:calc(1em * var(--line-height-input));
  flex: 40%;
}

.pdf-head-design {
  width: 100%;
  height: 48px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  transition: 0.05s;
  cursor: pointer;
}

.curr-head-design {
  box-shadow: var(--box-shadow3) var(--color2);
}

.head-design-txt {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
  text-transform: capitalize;
  line-height: var(--line-height-input);
}

.pdf-head-design .head-design-txt:before,
.pdf-head-design .head-design-txt:after {
  content: "";
  height: 3px;
  background-color: var(--pdf-color-main);
  border-radius: calc(3px * var(--general-round-input) / 2);
  display: none;
}

/* Style 2 */
.pdf-head-design2 .head-design-txt {
  justify-content: center;
}

/* Style 3 & 4 */
.pdf-head-design4 .head-design-txt {
  justify-content: center;
}

:is(.pdf-head-design3, .pdf-head-design4) .head-design-txt:after {
  width: 100%;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  display: block;
}

/* Style 5 & 6 */
:is(.pdf-head-design5, .pdf-head-design6) .head-design-txt {
  gap: 6%;
}

.pdf-head-design6 .head-design-txt:before,
:is(.pdf-head-design5, .pdf-head-design6) .head-design-txt:after {
  flex: 1;
  display: block;
}

/* Style 7 */
.pdf-head-design7 .head-design-txt {
  width: 90%;
  height: var(--head-height);
  justify-content: center;
  border: solid 3px var(--pdf-color-main);
  border-radius: calc((var(--head-height) + 6px) * var(--general-round-input) / 2);
}

/* Style 8 */
.pdf-head-design8 {
  overflow: hidden;
}

.pdf-head-design8 .head-design-txt {
  width: 90%;
  height: var(--head-height);
  justify-content: center;
  border: solid 3px var(--pdf-color-main);
  border-radius: calc((var(--head-height) + 6px) * var(--general-round-input) / 2);
}

.pdf-head-design8 .head-design-txt:before,
.pdf-head-design8 .head-design-txt:after {
  content: "";
  height: calc((var(--head-height) + 4px) * 1.4);
  aspect-ratio: 1/1;
  box-sizing: border-box;
  position: absolute;
  display: block;
  background-color: var(--shade1);
  z-index: 100;
}

.pdf-head-design8 .head-design-txt:before {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: solid 3px var(--pdf-color-main);
}

.pdf-head-design8 .head-design-txt:after {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%) rotate(45deg);
  border-left: solid 3px var(--pdf-color-main);
}

/* Style 9 & 10 */
:where(.pdf-head-design9, .pdf-head-design10) .head-design-txt {
  width: 90%;
  height: var(--head-height);
  justify-content: center;
  color: #FAFAFA;
  background-color: var(--pdf-color-main);
}

.pdf-head-design9 .head-design-txt {
  border-radius: calc(var(--head-height) * var(--general-round-input) / 2);
}

.pdf-head-design10 .head-design-txt:before,
.pdf-head-design10 .head-design-txt:after {
  content: "";
  height: var(--head-height);
  aspect-ratio: 1/1;
  box-sizing: border-box;
  position: absolute;
  display: block;
  z-index: 100;
}

.pdf-head-design10 .head-design-txt:before {
  top: 0;
  left: 0;
  border: solid calc(var(--head-height) / 2) var(--shade1);
  border-right: solid calc(var(--head-height) / 2) transparent;
  border-bottom: solid calc(var(--head-height) / 2) transparent;
}

.pdf-head-design10 .head-design-txt:after {
  bottom: 0;
  right: 0;
  border: solid calc(var(--head-height) / 2) var(--shade1);
  border-left: solid calc(var(--head-height) / 2) transparent;
  border-top: solid calc(var(--head-height) / 2) transparent;
}

/* Heading - media */
@media screen and (width <= 440px) {
  .head-design-item {
    flex: 100%;
  }
}
/* Section 7 - Language */
.lang-design-item {
  --lvl-height:8px;
  flex: 30%;
}

.lang-design-item:has(.pdf-lang-design1, .pdf-lang-design2) {
  flex: 40%;
}

.pdf-lang-design {
  width: 100%;
  height: 48px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  transition: 0.05s;
  cursor: pointer;
}

.curr-lang-design {
  box-shadow: var(--box-shadow3) var(--color2);
}

.pdf-lang-spans {
  width: 100%;
  height: var(--lvl-height);
  position: relative;
  display: flex;
  overflow: hidden;
}

.pdf-lang-design span {
  flex: 1;
  height: 100%;
  position: relative;
  display: block;
  background-color: var(--pdf-color-main);
}

.pdf-lang-design span:is(:nth-last-child(1), :nth-last-child(2)) {
  background-color: rgb(var(--general-shade-input), var(--general-transpar-input));
}

:is(.pdf-lang-design3, .pdf-lang-design4, .pdf-lang-design5) span:is(:nth-last-child(1), :nth-last-child(2)) {
  background-color: transparent;
}

/* Style 1 & 2 */
:is(.pdf-lang-design1, .pdf-lang-design2) .pdf-lang-spans {
  display: none;
}

/* Style 3 & 4 */
.pdf-lang-design3 .pdf-lang-spans {
  border: solid 2px var(--pdf-color-main);
  border-radius: calc((var(--lvl-height) + 4px) * var(--general-round-input) / 2);
}

.pdf-lang-design4 .pdf-lang-spans {
  background-color: rgb(var(--general-shade-input), var(--general-transpar-input));
  border-radius: calc(var(--lvl-height) * var(--general-round-input) / 2);
}

:is(.pdf-lang-design3, .pdf-lang-design4) span:nth-child(4) {
  border-radius: 0 calc(var(--lvl-height) * var(--general-round-input) / 2) calc(var(--lvl-height) * var(--general-round-input) / 2) 0;
}

:is(.pdf-lang-design3, .pdf-lang-design4) span:is(:nth-last-child(1), :nth-last-child(2)) {
  background-color: transparent;
}

/* Style 5 & 7 */
.pdf-lang-design5 .pdf-lang-spans {
  background-color: rgb(var(--general-shade-input), var(--general-transpar-input));
}

.pdf-lang-design5 .pdf-lang-spans:before,
.pdf-lang-design5 .pdf-lang-spans:after,
.pdf-lang-design5 span:before,
.pdf-lang-design5 span:after,
.pdf-lang-design7 span:before,
.pdf-lang-design7 span:after {
  content: "";
  width: var(--lvl-height);
  aspect-ratio: 1/1;
  box-sizing: border-box;
  position: absolute;
  z-index: 100;
}

.pdf-lang-design5 .pdf-lang-spans:before,
.pdf-lang-design5 span:nth-child(5):before,
.pdf-lang-design7 span:before {
  top: 0;
  left: 0;
  border: solid calc(var(--lvl-height) / 2) var(--shade1);
  border-right: solid calc(var(--lvl-height) / 2) transparent;
  border-bottom: solid calc(var(--lvl-height) / 2) transparent;
}

.pdf-lang-design5 span:nth-child(5):before {
  border: solid calc(var(--lvl-height) / 2) var(--pdf-color-main);
  border-right: solid calc(var(--lvl-height) / 2) transparent;
  border-bottom: solid calc(var(--lvl-height) / 2) transparent;
}

.pdf-lang-design5 .pdf-lang-spans:after,
.pdf-lang-design7 span:after {
  bottom: 0;
  right: 0;
  border: solid calc(var(--lvl-height) / 2) var(--shade1);
  border-top: solid calc(var(--lvl-height) / 2) transparent;
  border-left: solid calc(var(--lvl-height) / 2) transparent;
}

/* Style 6 */
.pdf-lang-design6 .pdf-lang-spans {
  gap: 3%;
}

.pdf-lang-design6 span {
  border-radius: calc(var(--lvl-height) * var(--general-round-input) * 0.5);
}

/* Style 8 */
.pdf-lang-design8 .pdf-lang-spans {
  height: auto;
  justify-content: center;
  gap: 3%;
  overflow: visible;
}

.pdf-lang-design8 span {
  flex: none;
  width: calc(var(--lvl-height) * 1.5);
  height: calc(var(--lvl-height) * 1.5);
  border-radius: 50%;
}

/* Language - media */
@media screen and (width <= 768px) {
  .subsection .lang-design-item {
    flex: 40%;
  }
}
@media screen and (width <= 440px) {
  .subsection .lang-design-item {
    flex: 100%;
  }
}
/* Section 7 - Main Sections */
.main-design-item {
  --design-size:3px;
  --design-indicator:12px;
  flex: 30%;
}

.main-design-item:has(.pdf-main-design1, .pdf-main-design2) {
  flex: 40%;
}

.pdf-main-design {
  width: 100%;
  height: 144px;
  padding: 12px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius1);
  box-shadow: var(--box-shadow3) var(--txt-faded3);
  transition: 0.05s;
  cursor: pointer;
}

.curr-main-design {
  box-shadow: var(--box-shadow3) var(--color2);
}

/* Basic Design */
.pdf-main-inner {
  padding: 0 10px;
  padding-bottom: calc(var(--design-size) * 3);
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: 10px;
}

.pdf-main-inner:nth-last-child(1) {
  padding-bottom: 0;
}

.pdf-design-elem {
  width: var(--design-size);
  height: calc(100% + 12px + var(--design-size) * 3.5);
  position: relative;
  top: calc(20px * var(--line-height-input) / 2 - var(--design-indicator) / 2);
  background-color: var(--pdf-color-main);
}

.pdf-main-inner:nth-last-child(1) .pdf-design-elem {
  height: calc(100% - (20px * var(--line-height-input) / 2 - var(--design-indicator) / 2));
}

.pdf-design-elem:before,
.pdf-design-elem:after {
  content: "";
  width: var(--design-indicator);
  aspect-ratio: 1/1;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: var(--shade1);
  border: solid var(--design-size) var(--pdf-color-main);
  border-radius: calc(100% * var(--general-round-input) / 2);
}

.pdf-design-elem:after {
  top: auto;
  bottom: 0;
  display: none;
}

.pdf-main-content {
  flex: 1;
  height: 100%;
}

.pdf-main-head {
  font-size: 20px;
}

.pdf-main-txt {
  padding-left: 8px;
  font-size: 16px;
}

/* Style 1 & 2 */
:is(.pdf-main-design1, .pdf-main-design2) .pdf-design-elem {
  display: none;
}

.pdf-main-design2 .pdf-main-inner:not(:nth-last-child(1)) .pdf-design-elem {
  width: calc(100% - 20px);
  height: var(--design-size);
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
}

.pdf-main-design2 .pdf-main-inner:not(:nth-last-child(1)) .pdf-design-elem:before {
  display: none;
}

/* Style 4 - 8 */
:is(.pdf-main-design4, .pdf-main-design6, .pdf-main-design8) .pdf-design-elem:before {
  background-color: var(--pdf-color-main);
}

:is(.pdf-main-design5, .pdf-main-design6) .pdf-design-elem {
  top: 0;
}

:is(.pdf-main-design5, .pdf-main-design6) .pdf-main-inner:nth-last-child(1) .pdf-design-elem {
  height: 100%;
}

:is(.pdf-main-design5, .pdf-main-design6) .pdf-design-elem:before {
  height: calc(20px * var(--line-height-input));
  aspect-ratio: auto;
  border-radius: calc(20px * var(--line-height-input) * var(--general-round-input) / 4);
}

:is(.pdf-main-design7, .pdf-main-design8) .pdf-design-elem {
  height: calc(100% - 16px * var(--line-height-input) / 2) !important;
}

:is(.pdf-main-design7, .pdf-main-design8) .pdf-design-elem:after {
  display: block;
}

.pdf-main-design8 .pdf-design-elem:after {
  background-color: var(--pdf-color-main);
}

/* Main Sections - media */
@media screen and (width <= 768px) {
  .main-design-item {
    flex: 40%;
  }
}
@media screen and (width <= 540px) {
  .pdf-main-design2 .pdf-main-inner:not(:nth-last-child(1)) .pdf-design-elem {
    width: 100%;
  }
}
@media screen and (width <= 440px) {
  .main-design-item,
  .main-design-item:has(.pdf-main-design1, .pdf-main-design2) {
    flex: 100%;
  }
}