body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.right-triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 15px solid #000000;
  border-bottom: 100vh solid #000000;
  box-sizing: border-box;
  position: absolute;
  left: 19vw;
}

.arectangle {
  width: 200px;
  height: 15px;
  background-color: #000000;
  position: absolute;
  left: calc(19.7vw + 50px); /* Align with the right side of the .right-triangle */
  top: 70px;
}

.brectangle {
  width: 270px;
  height: 120px;
  background-color: #000000;
  position: absolute;
  left: calc(19.7vw + 50px); /* Align with the right side of the .right-triangle */
  top: 190px;
}

.crectangle {
  width: 150px;
  height: 30px;
  background-color: #000000;
  position: absolute;
  left: calc(19.7vw + 50px); /* Align with the right side of the .right-triangle */
  top: 490px;
}
#canvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Adjust z-index as needed to layer properly */
}
.circle {
  width: 75px;
  height: 75px;
  background-color: #fe4b4b;
  border-radius: 50%;
  position: absolute;
  left: calc(19.7vw + 30px);
  top: 290px;
  cursor: pointer;
  transition: transform 0.5s ease-in-out; /* Changed from 2s to 0.5s for quicker expansion */
  z-index: 3;
  user-select: none;
}

.expanded {
  transform: scale(40);
}

.exptext {
  display: none;
  color: #ffffff;
  font-size: 100px;
  position: fixed;
  top: 0;
  left: 0; /* Changed from 50% to 0 for left alignment */
  padding-left: 0; /* Add padding to prevent text from being too close to the edge */
  z-index: 5;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
  animation: fadeIn .5s ease .5s forwards;
  transform: scale(1, 2);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exptext h1 {
  margin: 0;
  font-weight: bold; /* Make text bold */
  text-align: left; /* Align text to the left */
}




/* Keyframes for the animation */
.graphic-designmp {
  color: #4a6cfe; /* Blue color */
  text-decoration: underline; /* Underline */
  font-family: 'Times New Roman', serif; /* Specify Times New Roman or fallback to a generic serif font */
  font-weight: bold; /* Bold */
  font-size: 25px;
  position: absolute;
  left: calc(19.7vw + 90px); /* Align with the right side of the .right-triangle */
  top: 50px; /* Adjust the top position */
  cursor: pointer;
  user-select: none;
}

.falling-text {
  color: #4a6cfe; /* Retain the original text color */
  text-decoration: underline; /* Retain the original underline */
  font-family: 'Times New Roman', serif; /* Retain the original font family */
  font-weight: bold; /* Retain the original font weight */
  font-size: 25px; /* Retain the original font size */
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  opacity: 1;
}

.studio-artmp {
  color: #4a6cfe; /* Blue color */
  text-decoration: underline; /* Underline */
  font-family: 'Times New Roman', serif; /* Specify Times New Roman or fallback to a generic serif font */
  font-weight: bold; /* Bold */
  font-size: 40px;
  position: absolute;
  left: calc(19.7vw + 160px); /* Align with the right side of the .right-triangle */
  top: 165px; /* Adjust the top position */
  cursor: pointer;
  transition: transform 0.5s;
  transform-origin: 100% 5px; /* Specify the rotation origin */
  z-index: 2;
  user-select: none;
}

.shadowstudio {
  color: #777777;
  text-decoration: underline;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  font-size: 40px;
  position: absolute;
  left: calc(19.7vw + 160px);
  top: 165px;
  opacity: 0.7; /* Set the opacity to 0.7 */
  z-index: 1;
  position: absolute;
  user-select: none;
}

.cvmp {
  color: #4a6cfe; /* Blue color */
  text-decoration: underline; /* Underline */
  font-family: 'Times New Roman', serif; /* Specify Times New Roman or fallback to a generic serif font */
  /* Bold */
  font-size: 110px;
  position: absolute;
  left: calc(19.7vw + 100px); /* Align with the right side of the .right-triangle */
  top: 390px; /* Adjust the top position */
  cursor: pointer;
  user-select: none;
}

.cloned-v {
  display: inline-block;
  color: #4a6cfe; /* Match the color */
  text-decoration: underline; /* Match the underline */
  font-family: 'Times New Roman', serif; /* Match the font family */
  font-size: 110px; /* Match the font size */
  position: absolute;
  left: calc(19.7vw + 175px); /* Align with the right side of the .right-triangle */
  top: 390px;
  user-select: none;
}

.cloneddv {
  display: inline-block;
  color: #4a6cfe;
  text-decoration: underline;
  font-family: 'Times New Roman', serif;
  position: relative;
  z-index: -1;
  user-select: none;
  /* Disregard position elements for .cloned-v */
}

#container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 500px; /* Adjust as needed */
  height: 500px; /* Adjust as needed */
}

.feet {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  color: #000000;
}