/* screen - writing */

.writing {
  background-color: var(--geraldine);
  height: 1692px;
  overflow: hidden;
  overflow-x: hidden;
  position: relative;
  width: 1920px;
}

.writing .blim-blam-walking-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 241px;
  left: 256px;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  top: 509px;
  transition: all 0.2s ease;
  width: 429px;
}

.writing .blim-blam-walking-43rOeN:hover {
  opacity: 1;
}

.writing .component-163-2-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 241px;
  left: 245px;
  pointer-events: auto;
  position: absolute;
  top: 505px;
  transition: all 0.2s ease;
  width: 429px;
}

.writing .component-163-2-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-146-xTpOr4 {
  background-color: var(--geraldine);
  bottom: 29px;
  height: 171px;
  position: absolute;
  right: calc(43.26% - 80px);
  width: 185px;
}

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

.writing .rectangle-2-43rOeN {
  background-color: var(--cardinal);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 10px;
  left: -689px;
  position: absolute;
  top: 663px;
  transform: rotate(-90deg);
  width: 1858px;
}

.writing .rectangle-3-43rOeN {
  background-color: var(--cardinal);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 6px;
  left: -666px;
  position: absolute;
  top: 662px;
  transform: rotate(-90deg);
  width: 1835px;
}

.writing .rectangle-42-43rOeN {
  background-color: var(--cardinal);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 10px;
  left: 751px;
  position: absolute;
  top: 641px;
  transform: rotate(-90deg);
  width: 1858px;
}

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

.writing .rectangle-1-43rOeN {
  background-color: var(--cardinal);
  border-radius: 36px;
  box-shadow: 0px 3px 2px #00000029;
  height: 219px;
  left: -828px;
  position: absolute;
  top: 595px;
  transform: rotate(90deg);
  width: 1898px;
}

.writing .john-daugherty-43rOeN {
  background-color: transparent;
  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;
}

.writing .makes-43rOeN {
  background-color: transparent;
  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;
}

.writing .path-5-43rOeN {
  background-color: transparent;
  height: 1904px;
  left: 1688px;
  object-fit: cover;
  position: absolute;
  top: -218px;
  width: 225px;
}

.writing .title-43rOeN {
  -webkit-text-stroke: 4px var(--geraldine);
  background-color: transparent;
  color: var(--cardinal);
  font-family: var(--font-family-cambria-regular);
  font-size: 180px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 719px;
  letter-spacing: 0.00px;
  line-height: 199px;
  position: absolute;
  text-align: left;
  text-decoration: underline;
  text-shadow: -16px 16px 10px #00000029;
  top: 87px;
  white-space: nowrap;
  width: auto;
}

.writing .group-36-43rOeN {
  background-color: transparent;
  height: 78px;
  left: 583px;
  position: absolute;
  top: 359px;
  width: 755px;
}

.writing .rectangle-41-OMfRxj {
  background-color: var(--cardinal);
  border-radius: 23px;
  box-shadow: -16px 16px 10px #00000029;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .here-are-some-sample-OMfRxj {
  background-color: transparent;
  height: 45px;
  left: 21px;
  letter-spacing: 0.00px;
  line-height: 36px;
  position: absolute;
  text-align: center;
  top: 15px;
  width: calc(100% - 41px);
}

.writing .component-85-2-43rOeN {
  background-color: transparent;
  height: 131px;
  left: 302px;
  position: absolute;
  top: 718px;
  width: 442px;
}

.writing .rectangle-52-dYrCcv {
  background-color: var(--cardinal);
}

.writing .group-45-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 131px;
  left: 302px;
  pointer-events: auto;
  position: absolute;
  top: 718px;
  transition: all 0.2s ease;
  width: 442px;
}

.writing .group-45-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-52-eC2cj7 {
  background-color: var(--double-colonial-white);
}

.writing .component-76-2-43rOeN {
  background-color: transparent;
  height: 131px;
  left: 761px;
  position: absolute;
  top: 633px;
  width: 442px;
}

.writing .rectangle-53-OruAk2 {
  background-color: var(--cardinal);
}

.writing .editorials-OruAk2 {
  left: 128px;
  width: calc(100% - 254px);
}

.writing .group-44-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 131px;
  left: 761px;
  pointer-events: auto;
  position: absolute;
  top: 633px;
  transition: all 0.2s ease;
  width: 442px;
}

.writing .group-44-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-53-0QVv8w {
  background-color: var(--double-colonial-white);
}

.writing .editorials-0QVv8w {
  right: calc(49.61% - 93px);
  width: 188px;
}

.writing .component-158-2-43rOeN {
  background-color: transparent;
  height: 131px;
  left: 1219px;
  position: absolute;
  top: 718px;
  width: 442px;
}

.writing .rectangle-54-JVfCqE {
  background-color: var(--cardinal);
}

.writing .group-47-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 131px;
  left: 1219px;
  pointer-events: auto;
  position: absolute;
  top: 718px;
  transition: all 0.2s ease;
  width: 442px;
}

.writing .group-47-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-54-Og6WQw {
  background-color: var(--double-colonial-white);
}

.writing .component-72-2-43rOeN {
  background-color: transparent;
  height: 131px;
  left: 760px;
  position: absolute;
  top: 803px;
  width: 442px;
}

.writing .rectangle-55-TtcCkE {
  background-color: var(--cardinal);
}

.writing .group-46-43rOeN {
  background-color: transparent;
  cursor: pointer;
  height: 131px;
  left: 760px;
  pointer-events: auto;
  position: absolute;
  top: 803px;
  transition: all 0.2s ease;
  width: 442px;
}

.writing .group-46-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-55-1qnylx {
  background-color: var(--double-colonial-white);
}

.writing .logo_try1-3-43rOeN {
  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;
}

.writing .logo_try1-3-43rOeN:hover {
  transform: scale(1.1);
}

.writing .group-42-43rOeN {
  background-color: transparent;
  height: 71px;
  left: 1757px;
  position: fixed;
  top: 76px;
  width: 114px;
}

.writing .rectangle-152-7JNytx {
  background-color: var(--cardinal);
  border: 2px solid;
  border-color: var(--geraldine);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .rectangle-153-7JNytx {
  background-color: var(--cardinal);
  border: 2px solid;
  border-color: var(--geraldine);
  border-radius: 8px;
  height: 15px;
  left: 0px;
  position: absolute;
  top: calc(50.00% - 8px);
  width: 100%;
}

.writing .rectangle-154-7JNytx {
  background-color: var(--cardinal);
  border: 2px solid;
  border-color: var(--geraldine);
  border-radius: 8px;
  bottom: 0px;
  height: 15px;
  left: 0px;
  position: absolute;
  width: 100%;
}

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

.writing .group-41-43rOeN:hover {
  opacity: 0;
}

.writing .rectangle-155-XvofMx {
  background-color: var(--cardinal);
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

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

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

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

.writing .component-99-41-43rOeN {
  background-color: transparent;
  height: 478px;
  left: 0px;
  position: absolute;
  top: 1218px;
  width: 1920px;
}

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

.writing .home-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .home-0GisXX:hover {
  opacity: 0;
}

.writing .instagram-YxF5Tl {
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  right: 224px;
  text-align: left;
  top: calc(31.73% - 10px);
  white-space: nowrap;
  width: 111px;
}

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

.writing .instagram-0GisXX:hover {
  opacity: 0;
}

.writing .johndmakesthingscom-YxF5Tl {
  background-color: transparent;
  height: 32px;
  left: 149px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  text-align: left;
  top: calc(46.97% - 15px);
  white-space: nowrap;
  width: 275px;
}

.writing .span0-JKhlMm {
}

.writing .span1-JKhlMm {
}

.writing .span2-JKhlMm {
}

.writing .you-tube1-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .span0-9jFkec {
}

.writing .span1-9jFkec {
}

.writing .span2-9jFkec {
}

.writing .you-tube1-0GisXX:hover {
  opacity: 0;
}

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

.writing .animated-projects-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .animated-projects-0GisXX:hover {
  opacity: 0;
}

.writing .musical-projects-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .musical-projects-0GisXX:hover {
  opacity: 0;
}

.writing .written-projects-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .written-projects-0GisXX:hover {
  opacity: 0;
}

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

.writing .span0-BFGQzx {
}

.writing .span1-BFGQzx {
}

.writing .you-tube2-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .span0-ct0nAS {
}

.writing .span1-ct0nAS {
}

.writing .you-tube2-0GisXX:hover {
  opacity: 0;
}

.writing .contact-me-YxF5Tl {
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  text-align: left;
  top: calc(37.88% - 12px);
  white-space: nowrap;
  width: 122px;
}

.writing .contact-me-0GisXX {
  cursor: pointer;
  height: 32px;
  left: calc(40.37% - 49px);
  letter-spacing: 0.00px;
  line-height: 25px;
  pointer-events: auto;
  text-align: left;
  top: calc(37.88% - 12px);
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 122px;
}

.writing .contact-me-0GisXX:hover {
  opacity: 0;
}

.writing .about-me-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .about-me-0GisXX:hover {
  opacity: 0;
}

.writing .email-0GisXX {
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

.writing .email-0GisXX:hover {
  opacity: 0;
}

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

.writing .house-YxF5Tl {
  background-color: transparent;
  height: 22px;
  left: calc(38.15% - 8px);
  object-fit: cover;
  position: absolute;
  top: calc(31.14% - 7px);
  width: 22px;
}

.writing .contact-me-HtPOB5 {
  height: 31px;
  left: calc(36.65% - 11px);
  object-fit: cover;
  top: calc(38.46% - 12px);
  width: 31px;
}

.writing .mail-YxF5Tl {
  background-color: transparent;
  height: 22px;
  object-fit: cover;
  position: absolute;
  right: calc(40.09% - 9px);
  top: calc(32.02% - 7px);
  width: 22px;
}

.writing .youtube-YxF5Tl {
  top: calc(38.16% - 8px);
}

.writing .youtube-0GisXX {
  top: calc(44.96% - 10px);
}

.writing .instagram-HtPOB5 {
  height: 22px;
  object-fit: cover;
  right: calc(18.18% - 4px);
  top: calc(31.36% - 7px);
  width: 22px;
}

.writing .animation-YxF5Tl {
  height: 48px;
  left: calc(34.56% - 17px);
  object-fit: cover;
  top: calc(43.26% - 21px);
  width: 48px;
}

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

.writing .writing-YxF5Tl {
  background-color: transparent;
  bottom: calc(41.23% - 9px);
  height: 22px;
  left: calc(36.01% - 8px);
  object-fit: cover;
  position: absolute;
  width: 22px;
}

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

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

.writing .animation-0GisXX {
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  right: 72px;
  text-align: left;
  top: calc(38.68% - 12px);
  white-space: nowrap;
  width: 130px;
}

.writing .music-YxF5Tl {
  background-color: transparent;
  height: 32px;
  letter-spacing: 0.00px;
  line-height: 25px;
  position: absolute;
  right: 118px;
  text-align: left;
  top: calc(45.63% - 15px);
  white-space: nowrap;
  width: 90px;
}

.writing .rectangle-118-43rOeN {
  background-color: var(--cardinal);
  height: 98px;
  left: 0px;
  position: absolute;
  top: 1120px;
  width: 1920px;
}

.writing .rectangle-119-43rOeN {
  background-color: var(--cardinal);
  height: 8px;
  left: 0px;
  position: absolute;
  top: 1087px;
  width: 1920px;
}

.writing .rectangle-120-43rOeN {
  background-color: var(--cardinal);
  height: 16px;
  left: 0px;
  position: absolute;
  top: 1100px;
  width: 1920px;
}

.writing .rectangle-121-43rOeN {
  background-color: var(--cardinal);
  height: 4px;
  left: 0px;
  position: absolute;
  top: 1076px;
  width: 1920px;
}

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

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

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

.writing .editorials-1 {
  background-color: transparent;
  height: 55px;
  letter-spacing: 0.00px;
  line-height: 88px;
  position: absolute;
  text-align: center;
  top: calc(28.29% - 16px);
  white-space: nowrap;
}

.writing .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(31.73% - 10px);
  white-space: nowrap;
  width: 63px;
}

.writing .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(31.73% - 10px);
  white-space: nowrap;
  width: 65px;
}

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

.writing .novellas {
  background-color: transparent;
  height: 55px;
  letter-spacing: 0.00px;
  line-height: 88px;
  position: absolute;
  right: calc(49.64% - 82px);
  text-align: center;
  top: calc(28.29% - 16px);
  white-space: nowrap;
  width: 166px;
}

.writing .rectangle-52 {
  border-radius: 60px;
  box-shadow: -16px 16px 10px #00000029;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .rectangle-53 {
  border-radius: 60px;
  box-shadow: -16px 16px 10px #00000029;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .rectangle-54 {
  border-radius: 60px;
  box-shadow: -16px 16px 10px #00000029;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .rectangle-55 {
  border-radius: 60px;
  box-shadow: -16px 16px 10px #00000029;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.writing .screenplays {
  background-color: transparent;
  color: var(--geraldine);
  font-family: var(--font-family-cambria-regular);
  font-size: 52px;
  font-style: normal;
  font-weight: 400;
  height: 63px;
  letter-spacing: 0.00px;
  line-height: 90px;
  position: absolute;
  right: calc(49.43% - 131px);
  text-align: center;
  top: calc(30.15% - 19px);
  white-space: nowrap;
  width: 266px;
}

.writing .short-stories {
  background-color: transparent;
  height: 55px;
  letter-spacing: 0.00px;
  line-height: 88px;
  position: absolute;
  right: calc(49.48% - 124px);
  text-align: center;
  top: calc(28.29% - 16px);
  white-space: nowrap;
  width: 250px;
}

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

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

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

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