/* screen - animation */

.animation {
  background-color: #a4ccee;
  height: 2019px;
  overflow: hidden;
  overflow-x: hidden;
  position: relative;
  width: 1920px;
}

.animation .widget-wrapper-780YIi {
  background-color: transparent;
  height: 1080px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: 378px;
  width: 1920px;
}

.animation .haha-im-stupid-bg10bgextended-2DTMWv {
  background-color: transparent;
  object-fit: cover;
  width: 100%;
}

.animation .path-8-780YIi {
  background-color: transparent;
  height: 1683px;
  left: -16px;
  object-fit: cover;
  position: absolute;
  top: -40px;
  width: 1964px;
}

.animation .rectangle-2-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 10px;
  left: -689px;
  position: absolute;
  top: 663px;
  transform: rotate(-90deg);
  width: 1858px;
}

.animation .rectangle-3-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 6px;
  left: -666px;
  position: absolute;
  top: 662px;
  transform: rotate(-90deg);
  width: 1835px;
}

.animation .rectangle-42-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 10px;
  left: 751px;
  position: absolute;
  top: 641px;
  transform: rotate(-90deg);
  width: 1858px;
}

.animation .rectangle-43-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 6px;
  left: 750px;
  position: absolute;
  top: 640px;
  transform: rotate(-90deg);
  width: 1835px;
}

.animation .rectangle-1-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 219px;
  left: -828px;
  position: absolute;
  top: 595px;
  transform: rotate(90deg);
  width: 1898px;
}

.animation .rectangle-40-780YIi {
  background-color: var(--ocean-blue-pearl);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 219px;
  left: 851px;
  position: absolute;
  top: 622px;
  transform: rotate(90deg);
  width: 1898px;
}

.animation .gilbertbackup2_1-frame-at-0m19s-780YIi {
  background-color: transparent;
  border-radius: 114px;
  height: 148px;
  left: 828px;
  object-fit: cover;
  position: absolute;
  top: 32px;
  width: 263px;
}

.animation .haha-im-stupid-bg10grass-780YIi {
  background-color: transparent;
  height: 1100px;
  left: -17px;
  object-fit: cover;
  position: absolute;
  top: 347px;
  width: 1955px;
}

.animation .cavemanredditbckp-780YIi {
  background-color: transparent;
  height: 149px;
  left: 1334px;
  object-fit: cover;
  position: absolute;
  top: 115px;
  width: 265px;
}

.animation .wind-frame-at-0m25s-780YIi {
  background-color: transparent;
  border-radius: 114px;
  height: 148px;
  left: 392px;
  object-fit: cover;
  position: absolute;
  top: 309px;
  width: 263px;
}

.animation .john-daugherty-780YIi {
  background-color: transparent;
  color: #2811e1;
  font-family: var(--font-family-cambria-regular);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 292px;
  letter-spacing: 0.00px;
  line-height: 85px;
  position: absolute;
  text-align: center;
  text-shadow: 6px 6px 6px #0000004d;
  top: 34px;
  white-space: nowrap;
  width: auto;
}

.animation .makes-780YIi {
  background-color: transparent;
  color: #2811e1;
  font-family: var(--font-family-cambria-regular);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 400;
  height: 88px;
  left: 496px;
  letter-spacing: 0.00px;
  line-height: 90px;
  position: absolute;
  text-align: left;
  text-shadow: 6px 6px 6px #0000004d;
  top: 98px;
  white-space: nowrap;
  width: 436px;
}

.animation .blim-blam-gif-780YIi {
  background-color: transparent;
  height: 211px;
  left: 236px;
  object-fit: cover;
  position: absolute;
  top: 75px;
  width: 343px;
}

.animation .stephen-the-sniffer-780YIi {
  background-color: transparent;
  border-radius: 67px;
  height: 143px;
  left: 1453px;
  object-fit: cover;
  position: absolute;
  top: -28px;
  width: 250px;
}

.animation .component-62-1-780YIi {
  background-color: transparent;
  height: 134px;
  left: 1252px;
  position: absolute;
  top: 283px;
  width: 239px;
}

.animation .why-frame-at-0m11s-bbgRWx {
  background-color: transparent;
  border-radius: 162px;
  height: 100%;
  left: 0px;
  object-fit: cover;
  position: absolute;
  top: 1px;
  width: 100%;
}

.animation .when-a-carrot-finds-bbgRWx {
  background-color: transparent;
  border-radius: 162px;
  height: 100%;
  left: 0px;
  object-fit: cover;
  position: absolute;
  top: 0px;
  width: 100%;
}

.animation .title-780YIi {
  -webkit-text-stroke: 4px #97b3f3;
  background-color: transparent;
  color: var(--ocean-blue-pearl);
  font-family: var(--font-family-cambria-regular);
  font-size: 180px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 682px;
  letter-spacing: 0.00px;
  line-height: 199px;
  position: absolute;
  text-align: left;
  text-decoration: underline;
  text-shadow: -16px 16px 10px #00000029;
  top: 82px;
  white-space: nowrap;
  width: auto;
}

.animation .rectangle-41-780YIi {
  background-color: #c9f8db;
  border-radius: 23px;
  box-shadow: -16px 16px 10px #00000029;
  height: 160px;
  left: 583px;
  position: absolute;
  top: 360px;
  width: 755px;
}

.animation .here-is-a-small-list-780YIi {
  background-color: transparent;
  height: 112px;
  left: 604px;
  letter-spacing: 0.00px;
  line-height: 36px;
  position: absolute;
  text-align: center;
  top: 380px;
  width: 714px;
}

.animation .here-780YIi {
  color: var(--perano);
}

.animation .span0-b2SD4f {
  font-family: var(--font-family-cambria-regular);
  font-style: normal;
  text-decoration: underline;
}

.animation .span1-b2SD4f {
  font-family: var(--font-family-cambria-regular);
  font-style: normal;
}

.animation .here-HHedWP {
  color: var(--venetian-red);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .span0-TTZgj9 {
  text-decoration: underline;
}

.animation .span1-TTZgj9 {
}

.animation .here-HHedWP:hover {
  opacity: 0;
}

.animation .component-58-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 316px;
  position: absolute;
  top: 1125px;
  width: 415px;
}

.animation .icecream3-ex7MNR {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .icecream3-9ugLjh {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .ice-cream-tragedy-ex7MNR {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.30% - 99px);
  text-align: center;
  top: calc(43.69% - 14px);
  white-space: nowrap;
  width: 200px;
}

.animation .icecream3-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 316px;
  object-fit: cover;
  pointer-events: auto;
  top: 1125px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .icecream3-780YIi:hover {
  opacity: 0;
}

.animation .component-52-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 316px;
  position: absolute;
  top: 573px;
  width: 415px;
}

.animation .cant-find-my-keys-fin-frame-at-0m19s-DuUbq7 {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .cant-find-my-keys-fin-frame-at-0m19s-WyUSna {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .cant-find-my-keys-DuUbq7 {
  background-color: transparent;
  color: var(--mona-lisa);
  font-family: var(--font-family-cambria-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.23% - 108px);
  text-align: center;
  top: calc(43.69% - 14px);
  white-space: nowrap;
  width: 220px;
}

.animation .cant-find-my-keys-fin-frame-at-0m19s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 316px;
  object-fit: cover;
  pointer-events: auto;
  top: 573px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .cant-find-my-keys-fin-frame-at-0m19s-780YIi:hover {
  opacity: 0;
}

.animation .component-55-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 316px;
  position: absolute;
  top: 831px;
  width: 415px;
}

.animation .goes-to-the-store-frame-at-0m2s-L1nJUh {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .goes-to-the-store-frame-at-0m2s-qXWE9r {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .blim-blam-goes-to-bleebmart-L1nJUh {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(48.39% - 156px);
  text-align: center;
  top: calc(43.69% - 14px);
  white-space: nowrap;
  width: 322px;
}

.animation .goes-to-the-store-frame-at-0m2s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 316px;
  object-fit: cover;
  pointer-events: auto;
  top: 831px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .goes-to-the-store-frame-at-0m2s-780YIi:hover {
  opacity: 0;
}

.animation .component-54-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 1189px;
  position: absolute;
  top: 574px;
  width: 415px;
}

.animation .stanley-fell-into-a-pit_1-frame-at-0m57s-QxN628 {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .stanley-fell-into-a-pit_1-frame-at-0m57s-5Kcczh {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .stanley-loves-his-job-QxN628 {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.20% - 112px);
  text-align: center;
  top: calc(43.41% - 14px);
  white-space: nowrap;
  width: 228px;
}

.animation .stanley-fell-into-a-pit_1-frame-at-0m57s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 1189px;
  object-fit: cover;
  pointer-events: auto;
  top: 574px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .stanley-fell-into-a-pit_1-frame-at-0m57s-780YIi:hover {
  opacity: 0;
}

.animation .component-57-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 1189px;
  position: absolute;
  top: 827px;
  width: 415px;
}

.animation .baby-boomer-frame-at-0m2s-OYLdux {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .baby-boomer-frame-at-0m2s-exOVGQ {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .baby-boomer-OYLdux {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.44% - 72px);
  text-align: center;
  top: calc(43.53% - 14px);
  white-space: nowrap;
  width: 146px;
}

.animation .baby-boomer-frame-at-0m2s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 1189px;
  object-fit: cover;
  pointer-events: auto;
  top: 827px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .baby-boomer-frame-at-0m2s-780YIi:hover {
  opacity: 0;
}

.animation .component-53-2-780YIi {
  background-color: transparent;
  height: 225px;
  left: 760px;
  position: absolute;
  top: 576px;
  width: 400px;
}

.animation .haha-im-stupid-frame-at-0m7s-EczIRT {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .haha-im-stupid-frame-at-0m7s-WUQbLy {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .haha-im-stupid-EczIRT {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.38% - 79px);
  text-align: center;
  top: calc(43.30% - 14px);
  white-space: nowrap;
  width: 160px;
}

.animation .haha-im-stupid-frame-at-0m7s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 225px;
  left: 760px;
  object-fit: cover;
  pointer-events: auto;
  top: 576px;
  transition: all 0.2s ease;
  width: 400px;
}

.animation .haha-im-stupid-frame-at-0m7s-780YIi:hover {
  opacity: 0;
}

.animation .component-56-2-780YIi {
  background-color: transparent;
  height: 227px;
  left: 758px;
  position: absolute;
  top: 834px;
  width: 403px;
}

.animation .the-red-40-stare-frame-at-0m47s-9y87PH {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .the-red-40-stare-frame-at-0m47s-3GPL7a {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .the-red-40-stare-9y87PH {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 58px;
  position: absolute;
  right: calc(49.54% - 92px);
  text-align: center;
  top: calc(43.11% - 14px);
  white-space: nowrap;
  width: 186px;
}

.animation .the-red-40-stare-frame-at-0m47s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 227px;
  left: 758px;
  object-fit: cover;
  pointer-events: auto;
  top: 834px;
  transition: all 0.2s ease;
  width: 403px;
}

.animation .the-red-40-stare-frame-at-0m47s-780YIi:hover {
  opacity: 0;
}

.animation .component-59-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 752px;
  position: absolute;
  top: 1125px;
  width: 415px;
}

.animation .jimjim-D7Go1z {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .jimjim-wDEWEd {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .when-a-carrotfinds-its-purpose-D7Go1z {
  background-color: transparent;
  height: 57px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: calc(49.56% - 93px);
  text-align: center;
  top: calc(45.06% - 26px);
  white-space: nowrap;
  width: 188px;
}

.animation .jimjim-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 752px;
  object-fit: cover;
  pointer-events: auto;
  top: 1125px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .jimjim-780YIi:hover {
  opacity: 0;
}

.animation .component-60-2-780YIi {
  background-color: transparent;
  height: 233px;
  left: 1189px;
  position: absolute;
  top: 1125px;
  width: 415px;
}

.animation .caveman-reddit-frame-at-0m5s-jkt1Zk {
  background-color: transparent;
  height: 100%;
  left: 0px;
  object-fit: cover;
  top: 0px;
  width: 100%;
}

.animation .caveman-reddit-frame-at-0m5s-Djyyx3 {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  opacity: 0.2;
  top: 0px;
  width: 100%;
}

.animation .caveman-reddit-jkt1Zk {
  background-color: transparent;
  bottom: calc(48.12% - 15px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: calc(49.58% - 87px);
  text-align: center;
  white-space: nowrap;
  width: 175px;
}

.animation .caveman-reddit-frame-at-0m5s-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 233px;
  left: 1189px;
  object-fit: cover;
  pointer-events: auto;
  top: 1125px;
  transition: all 0.2s ease;
  width: 415px;
}

.animation .caveman-reddit-frame-at-0m5s-780YIi:hover {
  opacity: 0;
}

.animation .group-42-780YIi {
  background-color: transparent;
  height: 71px;
  left: 1757px;
  position: fixed;
  top: 76px;
  width: 114px;
}

.animation .rectangle-152-JguJ7o {
  background-color: var(--ocean-blue-pearl);
  border: 2px solid;
  border-color: var(--perano);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.animation .rectangle-153-JguJ7o {
  background-color: var(--ocean-blue-pearl);
  border: 2px solid;
  border-color: var(--perano);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: calc(50.00% - 8px);
  width: 100%;
}

.animation .rectangle-154-JguJ7o {
  background-color: var(--ocean-blue-pearl);
  border: 2px solid;
  border-color: var(--perano);
  border-radius: 8px;
  bottom: 0px;
  height: 15px;
  left: 0px;
  position: absolute;
  width: 100%;
}

.animation .group-41-780YIi {
  background-color: transparent;
  cursor: pointer;
  height: 102px;
  left: 1740px;
  pointer-events: auto;
  position: fixed;
  top: 62px;
  transition: all 0.2s ease;
  width: 138px;
}

.animation .group-41-780YIi:hover {
  opacity: 0;
}

.animation .rectangle-155-HsNY5C {
  background-color: var(--ocean-blue-pearl);
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.animation .rectangle-102-HsNY5C {
  background-color: var(--perano);
  border-radius: 8px;
  height: 15px;
  left: 17px;
  position: absolute;
  top: calc(19.54% - 3px);
  width: calc(100% - 24px);
}

.animation .rectangle-103-HsNY5C {
  background-color: var(--perano);
  border-radius: 8px;
  height: 15px;
  left: 17px;
  position: absolute;
  top: calc(48.28% - 7px);
  width: calc(100% - 24px);
}

.animation .rectangle-104-HsNY5C {
  background-color: var(--perano);
  border-radius: 8px;
  bottom: calc(22.99% - 3px);
  height: 15px;
  left: 17px;
  position: absolute;
  width: calc(100% - 24px);
}

.animation .component-99-36-780YIi {
  background-color: transparent;
  height: 616px;
  left: 0px;
  position: absolute;
  top: 1403px;
  width: 1920px;
}

.animation .rectangle-116-urxKdG {
  background-color: var(--vista-white);
  bottom: 0px;
  box-shadow: inset 0px 16px 10px #00000029;
  height: 474px;
  left: 0px;
  position: absolute;
  width: 100%;
}

.animation .home-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .home-XPNkvO:hover {
  opacity: 0;
}

.animation .instagram-urxKdG {
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  right: 224px;
  text-align: left;
  top: calc(48.54% - 16px);
  white-space: nowrap;
  width: 111px;
}

.animation .instagram-XPNkvO {
  cursor: pointer;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  pointer-events: auto;
  right: 224px;
  text-align: left;
  top: calc(48.54% - 16px);
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 111px;
}

.animation .instagram-XPNkvO:hover {
  opacity: 0;
}

.animation .johndmakesthingscom-urxKdG {
  background-color: transparent;
  bottom: calc(39.81% - 13px);
  height: 32px;
  left: 149px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  width: 275px;
}

.animation .span0-1wKgVk {
}

.animation .span1-1wKgVk {
}

.animation .span2-1wKgVk {
}

.animation .you-tube1-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .span0-OPX5wP {
}

.animation .span1-OPX5wP {
}

.animation .span2-OPX5wP {
}

.animation .you-tube1-XPNkvO:hover {
  opacity: 0;
}

.animation .jump-to-urxKdG {
  background-color: transparent;
  height: 43px;
  left: calc(40.11% - 50px);
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  text-align: left;
  top: calc(39.79% - 17px);
  white-space: nowrap;
  width: 125px;
}

.animation .animated-projects-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .animated-projects-XPNkvO:hover {
  opacity: 0;
}

.animation .musical-projects-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .musical-projects-XPNkvO:hover {
  opacity: 0;
}

.animation .written-projects-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .written-projects-XPNkvO:hover {
  opacity: 0;
}

.animation .social-urxKdG {
  background-color: transparent;
  height: 43px;
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  right: 235px;
  text-align: left;
  top: calc(39.79% - 17px);
  white-space: nowrap;
  width: 90px;
}

.animation .span0-fgQkge {
}

.animation .span1-fgQkge {
}

.animation .you-tube2-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .span0-CccQid {
}

.animation .span1-CccQid {
}

.animation .you-tube2-XPNkvO:hover {
  opacity: 0;
}

.animation .contact-me-urxKdG {
  bottom: calc(46.76% - 15px);
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  text-align: left;
  white-space: nowrap;
  width: 122px;
}

.animation .contact-me-XPNkvO {
  bottom: calc(46.76% - 15px);
  cursor: pointer;
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  pointer-events: auto;
  text-align: left;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 122px;
}

.animation .contact-me-XPNkvO:hover {
  opacity: 0;
}

.animation .about-me-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .about-me-XPNkvO:hover {
  opacity: 0;
}

.animation .email-XPNkvO {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.animation .email-XPNkvO:hover {
  opacity: 0;
}

.animation .reach-out-urxKdG {
  background-color: transparent;
  height: 43px;
  letter-spacing: 0.00px;
  line-height: 35px;
  position: absolute;
  right: calc(36.41% - 56px);
  text-align: left;
  top: calc(39.79% - 17px);
  white-space: nowrap;
  width: 154px;
}

.animation .house-urxKdG {
  background-color: transparent;
  height: 22px;
  left: calc(38.15% - 8px);
  object-fit: cover;
  position: absolute;
  top: calc(47.81% - 11px);
  width: 22px;
}

.animation .contact-me-OEloWW {
  bottom: calc(46.33% - 14px);
  height: 31px;
  left: calc(36.65% - 11px);
  object-fit: cover;
  width: 31px;
}

.animation .mail-urxKdG {
  background-color: transparent;
  height: 22px;
  object-fit: cover;
  position: absolute;
  right: calc(40.09% - 9px);
  top: calc(48.48% - 11px);
  width: 22px;
}

.animation .youtube-urxKdG {
  bottom: calc(46.80% - 10px);
}

.animation .youtube-XPNkvO {
  bottom: calc(41.58% - 9px);
}

.animation .instagram-OEloWW {
  height: 22px;
  object-fit: cover;
  right: calc(18.18% - 4px);
  top: calc(47.98% - 11px);
  width: 22px;
}

.animation .animation-urxKdG {
  bottom: calc(42.25% - 20px);
  height: 48px;
  left: calc(34.56% - 17px);
  object-fit: cover;
  width: 48px;
}

.animation .guitar-urxKdG {
  background-color: transparent;
  border-radius: 11px;
  bottom: calc(36.96% - 11px);
  height: 30px;
  left: calc(35.50% - 11px);
  object-fit: cover;
  position: absolute;
  width: 30px;
}

.animation .writing-urxKdG {
  background-color: transparent;
  bottom: calc(30.98% - 7px);
  height: 22px;
  left: calc(36.01% - 8px);
  object-fit: cover;
  position: absolute;
  width: 22px;
}

.animation .dots-urxKdG {
  background-color: transparent;
  bottom: 146px;
  height: 22px;
  left: calc(37.96% - 8px);
  object-fit: cover;
  position: absolute;
  width: 22px;
}

.animation .doodles-urxKdG {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 95px;
  text-align: left;
  top: calc(48.54% - 16px);
  white-space: nowrap;
  width: 111px;
}

.animation .animation-XPNkvO {
  bottom: calc(46.15% - 15px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  right: 72px;
  text-align: left;
  white-space: nowrap;
  width: 130px;
}

.animation .music-urxKdG {
  background-color: transparent;
  bottom: calc(40.84% - 13px);
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 118px;
  text-align: left;
  white-space: nowrap;
  width: 90px;
}

.animation .rectangle-118-urxKdG {
  background-color: var(--ocean-blue-pearl);
  height: 98px;
  left: 0px;
  position: absolute;
  top: 44px;
  width: 100%;
}

.animation .rectangle-119-urxKdG {
  background-color: var(--ocean-blue-pearl);
  height: 8px;
  left: 0px;
  position: absolute;
  top: 11px;
  width: 100%;
}

.animation .rectangle-120-urxKdG {
  background-color: var(--ocean-blue-pearl);
  height: 16px;
  left: 0px;
  position: absolute;
  top: 24px;
  width: 100%;
}

.animation .rectangle-121-urxKdG {
  background-color: var(--ocean-blue-pearl);
  height: 4px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.animation .logo_try1-3-780YIi {
  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;
}

.animation .logo_try1-3-780YIi:hover {
  transform: scale(1.1);
}

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

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

.animation .baby-boomer-frame-at-0m2s {
  border-radius: 70px;
  position: absolute;
}

.animation .cant-find-my-keys-fin-frame-at-0m19s {
  border-radius: 70px;
  position: absolute;
}

.animation .caveman-reddit-frame-at-0m5s {
  border-radius: 70px;
  position: absolute;
}

.animation .contact-me-1 {
  background-color: transparent;
  position: absolute;
}

.animation .email {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: calc(37.05% - 23px);
  text-align: left;
  top: calc(48.54% - 16px);
  white-space: nowrap;
  width: 63px;
}

.animation .goes-to-the-store-frame-at-0m2s {
  border-radius: 70px;
  position: absolute;
}

.animation .haha-im-stupid-frame-at-0m7s {
  border-radius: 75px;
  position: absolute;
}

.animation .here {
  background-color: transparent;
  font-family: var(--font-family-cambria);
  font-size: var(--font-size-l);
  font-weight: 400;
  height: auto;
  left: 928px;
  letter-spacing: 0.00px;
  line-height: 36px;
  position: absolute;
  text-align: center;
  top: 457px;
  white-space: nowrap;
  width: auto;
}

.animation .home {
  background-color: transparent;
  height: 32px;
  left: calc(40.43% - 26px);
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  top: calc(48.54% - 16px);
  white-space: nowrap;
  width: 65px;
}

.animation .icecream3 {
  border-radius: 70px;
  position: absolute;
}

.animation .jimjim {
  border-radius: 70px;
  position: absolute;
}

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

.animation .stanley-fell-into-a-pit_1-frame-at-0m57s {
  border-radius: 70px;
  position: absolute;
}

.animation .the-red-40-stare-frame-at-0m47s {
  border-radius: 70px;
  position: absolute;
}

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

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

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

.animation .youtube {
  background-color: transparent;
  height: 22px;
  object-fit: cover;
  position: absolute;
  right: calc(17.86% - 4px);
  width: 22px;
}