/* screen - index-all-breakpoints */

.index-all-breakpoints {
  background-color: var(--double-colonial-white);
  height: 3008px;
  overflow: hidden;
  overflow-x: hidden;
  position: relative;
  width: 1920px;
}

.index-all-breakpoints .rectangle-105-Xvh7qk {
  background-color: var(--vista-white);
  border-radius: 23px;
  box-shadow: -16px 16px 10px #00000029;
  height: 442px;
  left: 265px;
  position: absolute;
  top: 1163px;
  width: 705px;
}

.index-all-breakpoints .an-alien-tragedy-frame-at-0m6s-Xvh7qk {
  background-color: transparent;
  height: 372px;
  left: 321px;
  object-fit: cover;
  position: absolute;
  top: 1690px;
  width: 649px;
}

.index-all-breakpoints .rectangle-107-Xvh7qk {
  background-color: var(--vista-white);
  border-radius: 23px;
  box-shadow: -16px 16px 10px #00000029;
  height: 331px;
  left: 1021px;
  position: absolute;
  top: 1711px;
  width: 705px;
}

.index-all-breakpoints .if-you-have-any-ques-Xvh7qk {
  background-color: transparent;
  height: 267px;
  left: 1063px;
  letter-spacing: -1.75px;
  line-height: 51px;
  position: absolute;
  text-align: left;
  top: 1736px;
  width: 653px;
}

.index-all-breakpoints .contact-me-Xvh7qk {
  background-color: transparent;
  height: auto;
  left: 1063px;
  letter-spacing: 0.00px;
  line-height: 97px;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 1817px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .contact-me-YJizpo {
  background-color: transparent;
  cursor: pointer;
  height: auto;
  left: 1063px;
  letter-spacing: 0.00px;
  line-height: 97px;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 1817px;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .contact-me-YJizpo:hover {
  opacity: 0;
}

.index-all-breakpoints .welcome-Xvh7qk {
  color: #060040;
  left: 357px;
  opacity: 0.25;
  top: 1138px;
}

.index-all-breakpoints .welcome-YJizpo {
  color: var(--cardinal);
  left: 367px;
  top: 1128px;
}

.index-all-breakpoints .this-is-a-kind-of-re-Xvh7qk {
  background-color: transparent;
  color: var(--cardinal);
  font-family: var(--font-family-cambria);
  font-size: var(--font-size-xl);
  font-weight: 400;
  height: 298px;
  left: 305px;
  letter-spacing: 0.00px;
  line-height: 40px;
  position: absolute;
  text-align: left;
  top: 1260px;
  width: 628px;
}

.index-all-breakpoints .span0-4MEpXo {
}

.index-all-breakpoints .span1-4MEpXo {
}

.index-all-breakpoints .span2-4MEpXo {
}

.index-all-breakpoints .span3-4MEpXo {
}

.index-all-breakpoints .span4-4MEpXo {
}

.index-all-breakpoints .webvidv2-1-Xvh7qk {
  background-color: transparent;
  height: 933px;
  left: 247px;
  overflow: hidden;
  position: absolute;
  top: 69px;
  width: 1659px;
}

.index-all-breakpoints .webvidv2-1-Xvh7qk video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.index-all-breakpoints .webvidv2-1-Xvh7qk img {
  object-fit: cover;
}

.index-all-breakpoints .cant-find-my-keys-fin-frame-at-0m19s-Xvh7qk {
  background-color: transparent;
  height: 516px;
  left: 995px;
  object-fit: cover;
  position: absolute;
  top: 1126px;
  width: 905px;
}

.index-all-breakpoints .rectangle-95-Xvh7qk {
  background-color: transparent;
  border: 8px solid;
  border-color: var(--geraldine);
  box-shadow: -16px 6px 10px #00000029;
  height: 949px;
  left: 128px;
  position: absolute;
  top: 61px;
  width: 1776px;
}

.index-all-breakpoints .rectangle-3-Xvh7qk {
  background-color: var(--geraldine);
  border-radius: 36px;
  height: 5px;
  left: -813px;
  position: absolute;
  top: 1108px;
  transform: rotate(-90deg);
  width: 2125px;
}

.index-all-breakpoints .rectangle-2-Xvh7qk {
  background-color: var(--geraldine);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 10px;
  left: -844px;
  position: absolute;
  top: 1114px;
  transform: rotate(-90deg);
  width: 2163px;
}

.index-all-breakpoints .rectangle-1-Xvh7qk {
  background-color: var(--geraldine);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 219px;
  left: -998px;
  position: absolute;
  top: 1018px;
  transform: rotate(-90deg);
  width: 2224px;
}

.index-all-breakpoints .component-162-2-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 1445px;
  position: fixed;
  top: 800px;
  width: 422px;
}

.index-all-breakpoints .rectangle-23-Evp1qD {
  background-color: var(--carnation);
}

.index-all-breakpoints .music-Evp1qD {
  height: 63px;
  line-height: 90px;
  position: absolute;
  right: calc(49.66% - 66px);
  text-align: center;
  top: calc(23.00% - 14px);
  width: 132px;
}

.index-all-breakpoints .component-162-1-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 1445px;
  pointer-events: auto;
  position: fixed;
  top: 800px;
  transition: all 0.2s ease;
  width: 422px;
}

.index-all-breakpoints .component-162-1-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-23-dzoixe {
  background-color: var(--geraldine);
}

.index-all-breakpoints .music-dzoixe {
  height: 63px;
  line-height: 90px;
  position: absolute;
  right: calc(49.66% - 66px);
  text-align: center;
  top: calc(23.00% - 14px);
  width: 132px;
}

.index-all-breakpoints .component-161-2-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 878px;
  position: fixed;
  top: 800px;
  width: 422px;
}

.index-all-breakpoints .rectangle-23-87S6Qq {
  background-color: var(--cardinal);
}

.index-all-breakpoints .writing-87S6Qq {
  height: 63px;
  left: calc(49.60% - 85px);
  letter-spacing: 0.00px;
  line-height: 90px;
  text-align: center;
  top: calc(7.00% - 4px);
  white-space: nowrap;
  width: 172px;
}

.index-all-breakpoints .component-161-1-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 878px;
  pointer-events: auto;
  position: fixed;
  top: 800px;
  transition: all 0.2s ease;
  width: 422px;
}

.index-all-breakpoints .component-161-1-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-23-jprZ9g {
  background-color: var(--geraldine);
}

.index-all-breakpoints .writing-jprZ9g {
  height: 63px;
  left: calc(49.60% - 85px);
  letter-spacing: 0.00px;
  line-height: 90px;
  text-align: center;
  top: calc(7.00% - 4px);
  white-space: nowrap;
  width: 172px;
}

.index-all-breakpoints .group-40-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 311px;
  pointer-events: auto;
  position: fixed;
  top: 800px;
  transition: all 0.2s ease;
  width: 422px;
}

.index-all-breakpoints .group-40-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-23-dUlDic {
  background-color: var(--ocean-blue-pearl);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .rectangle-23-dUlDic:hover {
  background-color: #4F3AF7
}

.index-all-breakpoints .animation-dUlDic {
  height: 63px;
  left: calc(49.46% - 117px);
  letter-spacing: 0.00px;
  line-height: 90px;
  text-align: center;
  top: calc(7.00% - 4px);
  white-space: nowrap;
  width: 236px;
}

.index-all-breakpoints .group-39-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 113px;
  left: 311px;
  pointer-events: auto;
  position: fixed;
  top: 800px;
  transition: all 0.2s ease;
  width: 422px;
}

.index-all-breakpoints .group-39-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-23-QnbQo1 {
  background-color: var(--geraldine);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .rectangle-23-QnbQo1:hover {
  background-color: #4F3AF7
}

.index-all-breakpoints .animation-QnbQo1 {
  height: 63px;
  left: calc(49.46% - 117px);
  letter-spacing: 0.00px;
  line-height: 90px;
  text-align: center;
  top: calc(7.00% - 4px);
  white-space: nowrap;
  width: 236px;
}

.index-all-breakpoints .rectangle-93-Xvh7qk {
  background-color: var(--double-colonial-white);
  border-radius: 28px;
  height: 107px;
  left: 17px;
  position: fixed;
  top: 415px;
  width: 204px;
}

.index-all-breakpoints .animations-Xvh7qk {
  background-color: transparent;
  color: var(--cardinal);
  font-family: var(--font-family-cambria-regular);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 167px;
  letter-spacing: 0.00px;
  line-height: 50px;
  position: fixed;
  text-align: center;
  top: 435px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .music-Xvh7qk {
  color: var(--cardinal);
  font-family: var(--font-family-cambria-regular);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 179px;
  line-height: 50px;
  position: fixed;
  text-align: center;
  top: 461px;
  width: auto;
}

.index-all-breakpoints .doodles-Xvh7qk {
  cursor: pointer;
  height: 24px;
  left: 62px;
  line-height: 54px;
  pointer-events: auto;
  position: fixed;
  text-align: center;
  text-decoration: underline;
  top: 410px;
  transition: all 0.2s ease;
  width: 62px;
}

.index-all-breakpoints .doodles-Xvh7qk:hover {
  transform: scale(1.1);
}

.index-all-breakpoints .doodles-YJizpo {
  cursor: pointer;
  height: 24px;
  left: 62px;
  line-height: 54px;
  pointer-events: auto;
  position: fixed;
  text-align: center;
  text-decoration: underline;
  top: 410px;
  transition: all 0.2s ease;
  width: 62px;
}

.index-all-breakpoints .doodles-YJizpo:hover {
  opacity: 0;
}

.index-all-breakpoints .john-daugherty-YJizpo {
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .john-daugherty-YJizpo:hover {
  opacity: 0;
}

.index-all-breakpoints .john-daugherty-2-YJizpo {
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .john-daugherty-2-YJizpo:hover {
  opacity: 0;
}

.index-all-breakpoints .instagram-Xvh7qk {
  background-color: transparent;
  height: 22px;
  left: 38px;
  object-fit: cover;
  position: fixed;
  top: 431px;
  width: 22px;
}

.index-all-breakpoints .youtube-Xvh7qk {
  left: 38px;
  position: fixed;
  top: 453px;
}

.index-all-breakpoints .youtube-YJizpo {
  left: 38px;
  position: fixed;
  top: 480px;
}

.index-all-breakpoints .rectangle-141-Xvh7qk {
  background-color: var(--geraldine);
  height: 352px;
  left: 0px;
  position: absolute;
  top: 2149px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-142-Xvh7qk {
  background-color: var(--cardinal);
  height: 40px;
  left: 0px;
  position: absolute;
  top: 2109px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-143-Xvh7qk {
  background-color: var(--cardinal);
  height: 8px;
  left: 0px;
  position: absolute;
  top: 2174px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-144-Xvh7qk {
  background-color: var(--cardinal);
  height: 16px;
  left: 0px;
  position: absolute;
  top: 2153px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-145-Xvh7qk {
  background-color: var(--cardinal);
  height: 4px;
  left: 0px;
  position: absolute;
  top: 2189px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-97-Xvh7qk {
  background-color: var(--cardinal);
  border: 5px solid;
  border-color: var(--geraldine);
  height: 38px;
  left: 639px;
  position: fixed;
  top: 5px;
  width: 134px;
}

.index-all-breakpoints .verywebsite-Xvh7qk {
  background-color: transparent;
  height: 796px;
  left: 314px;
  overflow: hidden;
  position: absolute;
  top: 1938px;
  width: 1414px;
}

.index-all-breakpoints .rectangle-94-Xvh7qk {
  background-color: var(--white);
  border: 8px solid;
  border-color: var(--geraldine);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 191px;
  left: 279px;
  position: fixed;
  top: 38px;
  transform: rotate(180deg);
  width: 1630px;
}

.index-all-breakpoints .blim-blam-walking-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 241px;
  left: 237px;
  overflow: hidden;
  pointer-events: auto;
  position: fixed;
  top: 10px;
  transition: all 0.2s ease;
  width: 429px;
}

.index-all-breakpoints .blim-blam-walking-Xvh7qk:hover {
  opacity: 1;
}

.index-all-breakpoints .component-163-1-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 241px;
  left: 226px;
  pointer-events: auto;
  position: fixed;
  top: 5px;
  transition: all 0.2s ease;
  width: 429px;
}

.index-all-breakpoints .component-163-1-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-146-sWoJAF {
  background-color: var(--white);
  bottom: 28px;
  height: 171px;
  position: absolute;
  right: calc(44.90% - 83px);
  width: 185px;
}

.index-all-breakpoints .blim-blam-idle-sWoJAF {
  background-color: transparent;
  height: 100.00%;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  width: 100.00%;
}

.index-all-breakpoints .rectangle-96-Xvh7qk {
  background-color: var(--cardinal);
  border: 5px solid;
  border-color: var(--geraldine);
  height: 38px;
  left: 444px;
  position: fixed;
  top: 5px;
  width: 200px;
}

.index-all-breakpoints .contact-me-oksHKB {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-cambria-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 486px;
  letter-spacing: 0.00px;
  line-height: 55px;
  position: fixed;
  text-align: center;
  top: -3px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .contact-me-Y6vopc {
  background-color: transparent;
  cursor: pointer;
  height: auto;
  left: 486px;
  letter-spacing: 0.00px;
  line-height: 55px;
  pointer-events: auto;
  position: fixed;
  text-align: center;
  top: -3px;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .contact-me-Y6vopc:hover {
  opacity: 0;
}

.index-all-breakpoints .title-Xvh7qk {
  background-color: transparent;
  color: var(--cardinal);
  font-family: var(--font-family-cambria-regular);
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 633px;
  letter-spacing: -7.50px;
  line-height: 51px;
  position: fixed;
  text-align: center;
  top: 74px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .makes-things-Xvh7qk {
  background-color: transparent;
  color: var(--cardinal);
  font-family: var(--font-family-cambria-regular);
  font-size: 75px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 1278px;
  letter-spacing: -3.75px;
  line-height: 51px;
  position: fixed;
  text-align: center;
  top: 162px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .who-Xvh7qk {
  color: var(--white);
  font-family: var(--font-family-cambria-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.index-all-breakpoints .who-YJizpo {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .who-YJizpo:hover {
  opacity: 0;
}

.index-all-breakpoints .group-38-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 71px;
  left: 1757px;
  pointer-events: auto;
  position: fixed;
  top: 76px;
  transition: all 0.2s ease;
  width: 114px;
}

.index-all-breakpoints .group-38-Xvh7qk:hover {
  transform: scale(1.1);
}

.index-all-breakpoints .rectangle-147-rjXxpo {
  background-color: transparent;
  border: 2px solid;
  border-color: var(--cardinal);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.index-all-breakpoints .rectangle-148-rjXxpo {
  background-color: transparent;
  border: 2px solid;
  border-color: var(--cardinal);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: calc(50.00% - 8px);
  width: 100%;
}

.index-all-breakpoints .rectangle-149-rjXxpo {
  background-color: transparent;
  border: 2px solid;
  border-color: var(--cardinal);
  border-radius: 8px;
  bottom: 0px;
  height: 15px;
  left: 0px;
  position: absolute;
  width: 100%;
}

.index-all-breakpoints .group-37-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 93px;
  left: 1745px;
  pointer-events: auto;
  position: fixed;
  top: 66px;
  transition: all 0.2s ease;
  width: 139px;
}

.index-all-breakpoints .group-37-Xvh7qk:hover {
  opacity: 0;
}

.index-all-breakpoints .rectangle-150-TJ618P {
  background-color: var(--white);
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.index-all-breakpoints .rectangle-102-TJ618P {
  background-color: var(--cardinal);
  border-radius: 8px;
  height: 15px;
  left: 12px;
  position: absolute;
  top: 13px;
  width: calc(100% - 25px);
}

.index-all-breakpoints .rectangle-103-TJ618P {
  background-color: var(--cardinal);
  border-radius: 8px;
  height: 15px;
  left: 12px;
  position: absolute;
  top: calc(48.72% - 7px);
  width: calc(100% - 25px);
}

.index-all-breakpoints .rectangle-104-TJ618P {
  background-color: var(--cardinal);
  border-radius: 8px;
  bottom: calc(19.23% - 3px);
  height: 15px;
  left: 12px;
  position: absolute;
  width: calc(100% - 25px);
}

.index-all-breakpoints .component-99-23-Xvh7qk {
  background-color: transparent;
  height: 558px;
  left: 0px;
  position: absolute;
  top: 2450px;
  width: 1920px;
}

.index-all-breakpoints .rectangle-116-1PaQni {
  background-color: var(--vista-white);
  bottom: 0px;
  box-shadow: inset 0px 16px 10px #00000029;
  height: 416px;
  left: 0px;
  position: absolute;
  width: 100%;
}

.index-all-breakpoints .home-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .home-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .instagram-1PaQni {
  background-color: transparent;
  bottom: calc(46.10% - 15px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 224px;
  text-align: left;
  white-space: nowrap;
  width: 111px;
}

.index-all-breakpoints .instagram-dF7u41 {
  background-color: transparent;
  bottom: calc(46.10% - 15px);
  cursor: pointer;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  pointer-events: auto;
  position: absolute;
  right: 224px;
  text-align: left;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 111px;
}

.index-all-breakpoints .instagram-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .johndmakesthingscom-1PaQni {
  background-color: transparent;
  bottom: calc(33.17% - 11px);
  height: 32px;
  left: 149px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 275px;
}

.index-all-breakpoints .span0-rTvZH7 {
}

.index-all-breakpoints .span1-rTvZH7 {
}

.index-all-breakpoints .span2-rTvZH7 {
}

.index-all-breakpoints .you-tube1-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .span0-O2AyYg {
}

.index-all-breakpoints .span1-O2AyYg {
}

.index-all-breakpoints .span2-O2AyYg {
}

.index-all-breakpoints .you-tube1-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .jump-to-1PaQni {
  background-color: transparent;
  height: 43px;
  left: calc(40.11% - 50px);
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  text-align: left;
  top: calc(44.27% - 19px);
  white-space: nowrap;
  width: 125px;
}

.index-all-breakpoints .animated-projects-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .animated-projects-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .musical-projects-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .musical-projects-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .written-projects-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .written-projects-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .social-1PaQni {
  background-color: transparent;
  height: 43px;
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  right: 235px;
  text-align: left;
  top: calc(44.27% - 19px);
  white-space: nowrap;
  width: 90px;
}

.index-all-breakpoints .span0-Jy2VHi {
}

.index-all-breakpoints .span1-Jy2VHi {
}

.index-all-breakpoints .you-tube2-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .span0-pO7qxU {
}

.index-all-breakpoints .span1-pO7qxU {
}

.index-all-breakpoints .you-tube2-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .contact-me-1PaQni {
  background-color: transparent;
  bottom: calc(40.89% - 13px);
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 122px;
}

.index-all-breakpoints .contact-me-dF7u41 {
  background-color: transparent;
  bottom: calc(40.89% - 13px);
  cursor: pointer;
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  pointer-events: auto;
  position: absolute;
  text-align: left;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 122px;
}

.index-all-breakpoints .contact-me-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .about-me-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .about-me-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .email-dF7u41 {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.index-all-breakpoints .email-dF7u41:hover {
  opacity: 0;
}

.index-all-breakpoints .reach-out-1PaQni {
  background-color: transparent;
  height: 43px;
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  right: calc(36.41% - 56px);
  text-align: left;
  top: calc(44.27% - 19px);
  white-space: nowrap;
  width: 154px;
}

.index-all-breakpoints .house-1PaQni {
  background-color: transparent;
  bottom: calc(47.01% - 10px);
  height: 22px;
  left: calc(38.15% - 8px);
  object-fit: cover;
  position: absolute;
  width: 22px;
}

.index-all-breakpoints .contact-me-xNaDHx {
  background-color: transparent;
  bottom: calc(40.43% - 13px);
  height: 31px;
  left: calc(36.65% - 11px);
  object-fit: cover;
  position: absolute;
  width: 31px;
}

.index-all-breakpoints .mail-1PaQni {
  background-color: transparent;
  bottom: calc(46.27% - 10px);
  height: 22px;
  object-fit: cover;
  position: absolute;
  right: calc(40.09% - 9px);
  width: 22px;
}

.index-all-breakpoints .youtube-1PaQni {
  bottom: calc(41.04% - 9px);
  position: absolute;
  right: calc(17.86% - 4px);
}

.index-all-breakpoints .youtube-dF7u41 {
  bottom: calc(35.26% - 8px);
  position: absolute;
  right: calc(17.86% - 4px);
}

.index-all-breakpoints .instagram-xNaDHx {
  background-color: transparent;
  bottom: calc(46.83% - 10px);
  height: 22px;
  object-fit: cover;
  position: absolute;
  right: calc(18.18% - 4px);
  width: 22px;
}

.index-all-breakpoints .animation-1PaQni {
  bottom: calc(35.69% - 17px);
  height: 48px;
  left: calc(34.56% - 17px);
  object-fit: cover;
  width: 48px;
}

.index-all-breakpoints .guitar-1PaQni {
  background-color: transparent;
  border-radius: 11px;
  bottom: calc(30.03% - 9px);
  height: 30px;
  left: calc(35.50% - 11px);
  object-fit: cover;
  position: absolute;
  width: 30px;
}

.index-all-breakpoints .writing-1PaQni {
  bottom: calc(23.51% - 5px);
  height: 22px;
  left: calc(36.01% - 8px);
  object-fit: cover;
  width: 22px;
}

.index-all-breakpoints .dots-1PaQni {
  background-color: transparent;
  bottom: 88px;
  height: 22px;
  left: calc(37.96% - 8px);
  object-fit: cover;
  position: absolute;
  width: 22px;
}

.index-all-breakpoints .doodles-1PaQni {
  bottom: calc(46.10% - 15px);
  height: 32px;
  line-height: 25px;
  position: absolute;
  right: 95px;
  text-align: left;
  width: 111px;
}

.index-all-breakpoints .animation-dF7u41 {
  bottom: calc(40.21% - 13px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  right: 72px;
  text-align: left;
  white-space: nowrap;
  width: 130px;
}

.index-all-breakpoints .music-1PaQni {
  bottom: calc(34.32% - 11px);
  height: 32px;
  line-height: 25px;
  position: absolute;
  right: 118px;
  text-align: left;
  width: 90px;
}

.index-all-breakpoints .rectangle-118-1PaQni {
  background-color: var(--cardinal);
  height: 98px;
  left: 0px;
  position: absolute;
  top: 44px;
  width: 100%;
}

.index-all-breakpoints .rectangle-119-1PaQni {
  background-color: var(--cardinal);
  height: 8px;
  left: 0px;
  position: absolute;
  top: 11px;
  width: 100%;
}

.index-all-breakpoints .rectangle-120-1PaQni {
  background-color: var(--cardinal);
  height: 16px;
  left: 0px;
  position: absolute;
  top: 24px;
  width: 100%;
}

.index-all-breakpoints .rectangle-121-1PaQni {
  background-color: var(--cardinal);
  height: 4px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.index-all-breakpoints .logo_try1-3-Xvh7qk {
  background-color: transparent;
  cursor: pointer;
  height: 267px;
  left: 28px;
  object-fit: cover;
  pointer-events: auto;
  position: fixed;
  top: 10px;
  transition: all 0.2s ease;
  width: 267px;
}

.index-all-breakpoints .logo_try1-3-Xvh7qk:hover {
  transform: scale(1.1);
}

.index-all-breakpoints .about-me-1 {
  background-color: transparent;
  bottom: calc(16.25% - 5px);
  height: 32px;
  left: calc(41.30% - 43px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 105px;
}

.index-all-breakpoints .animated-projects {
  background-color: transparent;
  bottom: calc(35.46% - 11px);
  height: 32px;
  left: calc(40.36% - 80px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 198px;
}

.index-all-breakpoints .doodles {
  background-color: transparent;
  letter-spacing: 0.00px;
  white-space: nowrap;
}

.index-all-breakpoints .email {
  background-color: transparent;
  bottom: calc(46.10% - 15px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: calc(37.05% - 23px);
  text-align: left;
  white-space: nowrap;
  width: 63px;
}

.index-all-breakpoints .home {
  background-color: transparent;
  bottom: calc(46.10% - 15px);
  height: 32px;
  left: calc(40.43% - 26px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 65px;
}

.index-all-breakpoints .john-daugherty {
  background-color: transparent;
  cursor: pointer;
  height: auto;
  left: 65px;
  letter-spacing: 0.00px;
  line-height: 54px;
  position: fixed;
  text-align: center;
  text-decoration: underline;
  top: 436px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .john-daugherty-2 {
  background-color: transparent;
  cursor: pointer;
  height: auto;
  left: 65px;
  letter-spacing: 0.00px;
  line-height: 54px;
  position: fixed;
  text-align: center;
  text-decoration: underline;
  top: 463px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .music-1 {
  background-color: transparent;
  letter-spacing: 0.00px;
  white-space: nowrap;
}

.index-all-breakpoints .musical-projects {
  background-color: transparent;
  bottom: calc(29.29% - 9px);
  height: 32px;
  left: calc(40.19% - 71px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 176px;
}

.index-all-breakpoints .rectangle-23 {
  border-radius: 57px;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.index-all-breakpoints .welcome {
  background-color: transparent;
  font-family: var(--font-family-cambria-regular);
  font-size: 100px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  letter-spacing: 0.00px;
  line-height: 90px;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .who {
  background-color: transparent;
  height: auto;
  left: 682px;
  letter-spacing: 0.00px;
  line-height: 90px;
  position: fixed;
  text-align: center;
  top: -20px;
  white-space: nowrap;
  width: auto;
}

.index-all-breakpoints .writing-1 {
  background-color: transparent;
  position: absolute;
}

.index-all-breakpoints .written-projects {
  background-color: transparent;
  bottom: calc(22.34% - 7px);
  height: 32px;
  left: calc(41.00% - 73px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 177px;
}

.index-all-breakpoints .you-tube1 {
  background-color: transparent;
  bottom: calc(40.21% - 13px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 220px;
  text-align: left;
  white-space: nowrap;
  width: 109px;
}

.index-all-breakpoints .you-tube2 {
  background-color: transparent;
  bottom: calc(34.32% - 11px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 226px;
  text-align: left;
  white-space: nowrap;
  width: 103px;
}

.index-all-breakpoints .youtube {
  background-color: transparent;
  height: 22px;
  object-fit: cover;
  width: 22px;
}