.s-content-box-artists {
  position: relative;
}

.s-content-box-artists * {
  font-family: Edu Monument Grotesk;
  font-size: 1rem;
  color: white;
  background-color: black;
  font-family: "lores-9-plus-wide-bold-alt", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 120%;
}

.m-h1 {
  font-family: "lores-9-plus-wide-bold-alt", sans-serif;
  font-size: 7rem;
  color: white;
  text-shadow: var(--title-shadow-green);
  text-align: right;
  margin: 1rem 2rem;
}
.m-h2 {
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem;
  color: var(--green-light);}
.m-h3 { 
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem;
  color: var(--pink-light);}
.m-h4 {
  position: relative; 
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem;
  color: var(--green-light);
  background-color: transparent;
  top: 2rem; 
}
.m-h5 {
  font-size: 2rem;
  color: var(--pink-light); 
}

.m-img {
  width: 56rem;
}

.Kusamabox { 
  position: relative;
  left: 14%;

  width: 56rem; 
  height: 38rem;
  border-style: dashed;
  border-color: var(--pink-light);
  border-width: 6px;
   
}
.Yayoi_Kusama { 
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem; 
  color: var(--pink-light);
}
.animationkusama {
  position: absolute; 
  background-color: black;
  opacity: 100%; 
  box-sizing: border-box;
  border-color: var(--green-light);
  border-width: 6px;
  border-style: dashed;
  width: 31rem;
  height: 31rem;
  position: relative;
  left: 17rem;
  top: -1.25rem;
  margin: 3rem;
}
.kusama {
  height: 4.4rem;
  width: 4.4rem;
  border-radius: 100%;
  position: absolute;
  background-color: azure;
}
.mcircle-1 {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 17.7rem;
  margin-left: 6.25rem;
  background-color: blue;
  opacity: 60%;
  animation-name: mcircle-1move;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes mcircle-1move {
  0% {
    transform: translateX(20%);
    opacity: 40%;
  }

  100% {
    transform: translateX(50%);
    opacity: 100%;
  }
}
.mcircle-2 {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 14.4rem;
  margin-left: 15.5rem;
  background-color: #32cd32;
  opacity: 70%;
  animation-name: mcircle-2move;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}
@keyframes mcircle-2move {
  0% {
    transform: translateX(20%);
    opacity: 20%;
  }
  50% {
    transform: translateX(40%) translateY(60%);
    opacity: 80%;
  }
  100% {
    transform: translateX(60%) translateY(80%);
    opacity: 100%;
  }
}
.mcircle-3 {
  background-color: #ff840f;
  opacity: 100%;
  margin-top: 5rem;
  margin-left: 5rem;
  animation-name: mcircle-3move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
}
@keyframes mcircle-3move {
  0% {
    transform: translateX(20%);
    opacity: 0%;
  }
  100% {
    opacity: 100%;
    height: 6.25rem;
    width: 6.25rem;
  }
}
.mcircle-4 {
  height: 5.3rem;
  width: 5.3rem;
  margin-top: 5rem;
  margin-left: 14.4rem;
  background-color: #c10fff;
  opacity: 70%;
  animation-name: mcircle-4move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-duration: 6s;
}
@keyframes mcircle-4move {
  0% {
    opacity: 100%;
  }
  100% {
    transform: translateX(70%) translateY(20%);
    opacity: 10%;
  }
}
.mcircle-5 {
  height: 2rem;
  width: 2rem;
  margin-top: 18rem;
  margin-left: 12.5rem;
  background-color: #fffe0f;
  animation-name: mcircle-5move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 4s;
}
@keyframes mcircle-5move {
  0% {
    opacity: 30%;
  }
  50% {
    transform: translateX(10%) translateY(100%);
  }
  100% {
    width: 2.8rem;
    height: 2.8rem;
    opacity: 100%;
  }
}
.mcircle-6 {
  height: 3.75rem;
  width: 3.75rem;
  margin-top: 20rem;
  margin-left: 22rem;
  background-color: #c71585;
  opacity: 60%;
  animation-name: mcircle-6move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
}
@keyframes mcircle-6move {
  0% {
    opacity: 30%;
  }
  100% {
    opacity: 100%;
  }
}
.mcircle-7 {
  height: 2.2rem;
  width: 2.2rem;
  margin-top: 9.4rem;;
  margin-left: 12.2rem;
  background-color: #7b68ee;
  opacity: 90%;
  animation-name: mcircle-7move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 6s;
  animation-delay: 5s;
}
@keyframes mcircle-7move {
  0% {
    opacity: 100%;
  }
  50% {
    height: 0.6rem;
    width: 0.6rem;
  }
  100% {
    transform: translateY(-40%) translateX(-1600%);
    opacity: 50%;
    height: 2.2rem;
    width: 2.2rem;
  }
}
.mcircle-8 {
  height: 3.1rem;
  width: 3.1rem;
  margin-top: 23.75rem;
  margin-left: 5.6rem;
  background-color: rgb(35, 231, 205);
  animation-name: mcircle-8move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
}
@keyframes mcircle-8move {
  0% {
    transform: translateX(20%);
    opacity: 50%;
  }
  50% {
    transform: translateX(40%) translateY(60%);
    opacity: 75%;
  }
  100% {
    transform: translateX(60%) translateY(80%);
    opacity: 100%;
  }
}
.mcircle-9 {
  height: 1.5rem;
  width: 1.5rem;
  margin-top: 6.25rem;
  margin-left: 23rem;
  background-color: rgb(250, 0, 92);
  opacity: 40%;
  animation-name: mcircle-9move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-direction: alternate;
}
@keyframes mcircle-9move {
  0% {
    opacity: 40%;
  }
  100% {
    transform: translateX(-80%) translateY(-150%);
    opacity: 80%;
    width: 2.5rem;
    height: 2.5rem;
  }
}
.mcircle-10 {
  background-color: pink;
  opacity: 100%;
  margin-top: 5.6rem;
  margin-left: 9.4rem;
  height: 3.1rem;
  width: 3.1rem;
  animation-name: mcircle-10move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-delay: 5s;
}
@keyframes mcircle-10move {
  0% {
    opacity: 50%;
  }

  100% {
    transform: translateY(-150%);
    opacity: 100%;
    height: 2.2rem;
    width: 2.2rem;
  }
}
.mcircle-11 {
  height: 3.75rem;
  width: 3.75rem;
  margin-top: 9.4rem;
  margin-left: 19.4rem;
  background-color: #ff4500;
  opacity: 80%;
  animation-name: mcircle-11move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes mcircle-11move {
  0% {
    opacity: 30%;
  }

  100% {
    transform: translateX(100%) translateY(200%);
    opacity: 100%;
    height: 1.25rem;
    width: 1.25rem;
  }
}
.mcircle-12 {
  height: 6.25rem;
  width: 6.25rem;
  margin-top: 17rem;
  margin-left: 18.75rem;
  background-color: #6495ed;
  opacity: 60%;
  animation-name: mcircle-12move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 4s;
}
@keyframes mcircle-12move {
  0% {
    opacity: 60%;
  }
  50% {
    height: 1.25rem;
    width: 1.25rem;
  }

  100% {
    transform: translateX(50%) translateY(600%);
    opacity: 100%;
    height: 6.25rem;
    width: 6.25rem;
  }
}
.mcircle-13 {
  height: 5rem;
  width: 5rem;
  margin-top: 14rem;
  margin-left: 0.6rem;
  background-color: khaki;
  opacity: 60%;
  animation-name: mcircle-13move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}
@keyframes mcircle-13move {
  0% {
    opacity: 60%;
  }

  100% {
    transform: translateX(75%) translateY(100%);
    opacity: 100%;
  }
}
.mcircle-14 {
  background-color: #cd1e30;
  opacity: 100%;
  margin-top: 25rem;
  margin-left: 6.25rem;
  height: 3rem;
  width: 3rem;
  animation-name: mcircle-14move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}
@keyframes mcircle-14move {
  0% {
    opacity: 50%;
  }

  100% {
    transform: translateY(-150%);
    opacity: 100%;
    height: 35px;
    width: 35px;
  }
}
.mcircle-15 {
  height: 4.4rem;
  width: 4.4rem;
  margin-top: 23.75rem;
  margin-left: 25rem;
  background-color: #0d67c0;
  opacity: 60%;
  animation-name: mcircle-15move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 6s;
}
@keyframes mcircle-15move {
  0% {
    opacity: 40%;
  }
  100% {
    transform: translateX(-450%) translateY(-450%);
    opacity: 100%;
  }
}
.mcircle-16 {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 24rem;
  margin-left: 11.25rem;
  background-color: #00ff4caf;
  animation-name: mcircle-16move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 0.75s;
}
@keyframes mcircle-16move {
  0% {
    opacity: 30%;
  }
  50% {
    transform: translateX(-200%) translateY(30%);
  }
  100% {
    width: 2.8rem;
    height: 2.8rem;
    opacity: 100%;
  }
}
.mcircle-17 {
  height: 5rem;
  width: 5rem;
  margin-top: 14rem;
  margin-left: 1.25rem;
  background-color: rgb(172, 25, 170);
  opacity: 60%;
  animation-name: mcircle-17move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: reverse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
@keyframes mcircle-17move {
  0% {
    opacity: 30%;
  }
  50% {
    transform: translateX(200%) translateY(-30%);
  }
  100% {
    width: 3rem;
    height: 3rem;
    opacity: 100%;
  }
}
.mcircle-18 {
  height: 3.75;
  width: 3.75;
  margin-top: 8.1rem;
  margin-left: 0.6rem;
  background-color: #07f8e8;
  opacity: 60%;
  animation-name: mcircle-18move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
@keyframes mcircle-18move {
  0% {
    opacity: 100%;
  }
  50% {
    transform: translateX(200%) translateY(100%);
  }
  100% {
    width: 2rem;
    height: 2rem;
    opacity: 100%;
  }
}
.mcircle-19 {
  height: 4.7rem;
  width: 4.7rem;
  margin-top: 9.4rem;
  margin-left: 22rem;
  background-color: #eeff57;
  opacity: 80%;
  animation-name: mcircle-19move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-duration: 1s;
}
@keyframes mcircle-19move {
  0% {
    opacity: 70%;
  }

  100% {
    transform: translateX(150%) translateY(100%);
    opacity: 100%;
    height: 3rem;
    width: 3rem;
  }
}
.mcircle-20 {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 6.25rem;
  margin-left: 16.25rem;
  background-color: #0043fa;
  opacity: 70%;
  animation-name: mcircle-20move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
}
@keyframes mcircle-20move {
  0% {
    transform: translateX(20%);
    opacity: 20%;
  }
  40% {
    transform: translateY(-400%);
    opacity: 100%;
    width: 0.6rem;
    height: 0.6rem;
    background-color: blue;
  }
  100% {
    transform: translateX(60%) translateY(-750%);
    opacity: 100%;
    width: 3rem;
    height: 3rem;
    background-color: #0043fa;
  }
}
.mcircle-21 {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 25rem;
  margin-left: 16.25rem;
  background-color: #f4ead1;
  opacity: 70%;
  animation-name: mcircle-21move;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}
@keyframes mcircle-21move {
  0% {
    transform: translateX(20%);
    opacity: 20%;
  }
  100% {
    transform: translateX(-80%) translateY(-150%);
    opacity: 100%;
  }
}

.Alicebox {
  position: relative;
  border-color: var(--green-light);
  border-width: 6px;
  border-style: dashed;
  width: 56.25rem;
  height: 86rem;
  background-attachment: scroll;
  font-size: 2rem;
  color: var(--pink-light);
  left: 30%; 
}
.AlicePicContainerOP {
  position: absolute;
  width: 55rem; 
  height: 25rem; 
  top: 9.4rem; 
}
.alicelink { 
  position: absolute; 
  top: 25rem; 
  left: 22.5rem;
  opacity: 100%; 
}
.AlicePic1 {
  position: absolute;
    max-height: 25rem;
    max-width: 55rem;
    z-index: 1;
    top: 50px; 
    opacity: 50%;
}
.AlicePic2 {
  position: absolute;
    max-height: 8.2rem;
    max-width: 15.5rem;
    left: 2.5rem; 
    top: 3.2rem; 
    opacity: 70%;
    z-index: 2;
}
.plantanimation {
  position: absolute;
  top: 0;
  left: 50%; 
  animation-duration: 6s;
  animation-iteration-count: infinite;
  margin-top: 10rem;
  mix-blend-mode: difference;
  z-index: 9;
}

.weed {
  position: absolute;
  width: .4rem;
  height: 6.25rem;
  background-color: #48fb28;
  transform-origin: bottom;
  animation-iteration-count: infinite;
}
.weed--1 {
  left: 50%;
  animation: weedGrows 4s infinite, weedFadesOut 8s;
}
.weed__leaf {
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  background-color: #48fb28;
  border: 0;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 100%;
}
.weed__leaf--top-left {
  top: -1.2rem;
  left: -1rem;
  width: 1.3rem;
  height: 1.3rem;
}
.weed__leaf--top-right {
  top: -1.2rem;
  right: -1rem;
  width: 1.3rem;
  height: 1.3rem;
  transform: rotate(90deg);
}
.weed__leaf--left {
  top: 1.3rem;
  left: -1.9rem;
}
.weed__leaf--right {
  top: 2.5rem;
  right: -1.9rem;
  transform: rotate(90deg);
}
@keyframes weedGrows {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.5);
  }
  25% {
    transform: scale(1.5);
  }
  40% {
    transform: scale(2);
  }
  50% {
    transform: scale(2);
  }
  65% {
    transform: scale(2.5);
  }
  75% {
    transform: scale(2.5);
  }
  90% {
    transform: scale(3);
  }
  100% {
    transform: scale(3);
  }
}
@keyframes weedFadesOut {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.VIRTUAL_CARE_LAB { 
  max-height: 12.6rem; 
  max-width: 55rem; 
  position: absolute; 
  top: 41rem; 
}

.AlicePicContainerVC {
  position: absolute;
  width: 55rem; 
  height: 31.25rem;  
}

.AlicePic3 {
  position: absolute;
  top: 3.1rem;
  max-height: 25rem;
  max-width: 55rem;
  opacity: 50%;
  z-index: 2;
}
.AlicePic4 {
  position: absolute;
  max-height: 9.4rem;
  max-width: 18.75rem;
  left: 37.5rem; 
  top: 9.4rem; 
  transform:rotate(90deg);
  z-index: 1;
}

.vincentcontainer {
  position: relative; 
  height: 12.5rem;
  width: 56.25rem;
  left: 10%;
  box-sizing: border-box;
  border-style: dashed;
  border-color: var(--pink-light);
  border-width: 6px;
  background-attachment: scroll;
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem;
  color: var(--pink-light);
  background-image: url("https://vincent.computer/wp-content/uploads/2023/02/MarJ-Trip-Lettering-265x265.jpg");
  width: 55rem; 
  height: 25rem; 
}

.vinz { 
  position: absolute; 
  top: 6.25rem; 
  background-color: transparent;
}
.HannahContainer {
  position: relative; 
  height: 38.75rem;
  width: 56.25rem;
  left: 20%;
  border-width: 6px;
  box-sizing: border-box;
  border-style: dashed;
  color: var(--green-light);
  margin-left: 12.5rem;
  background-attachment: scroll;
}

.Hannah { 
  font-size: 2rem; 
  color: var(--green-light); 
}

.HannahContainer textarea {
  overflow: hidden;
}


.Judithbox {
  border-color: var(--green-light);
  border-width: 6px;
  border-style: dashed;
  width: 56.25rem;
  height: 37.5rem;
  left: 16%;
  position: relative;
  background-attachment: scroll;
  font-size: 2rem;
  color: var(--pink-light);
  margin-bottom: 2rem;
  overflow: hidden;
}
.m-h6 {
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 3rem;
  color: var(--pink-light);
}
.typewriter-m-h6 {
  font-family: lores-9-plus-wide-bold-alt, sans-serif;
  font-size: 2rem;
  color: var(--pink-light);

  overflow: hidden; /* Ensures text doesn't overflow */
  border-right: .15em solid var(--pink-light); /* Adds the blinking cursor effect */
  /* white-space: nowrap; */
  margin: 0 auto; /* Centers the element horizontally */
  letter-spacing: .15em; /* Adjust the spacing between characters */
  bottom: 50px; 

  /* Animation settings */
  animation: typewriter 4.5s steps(30) infinite;
}
  
@keyframes typewriter {
  0% { width: 0; }
  70% { width: 100%; }
  100% { width: 100%; }
}