/* Canvas */
.webgl {
  position: absolute;
  top: 0;
  outline: none;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  /* border: 1px solid red; */
}

/* Color Dots */
.colorDotsContainer {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: min(1rem, 2vw);
}

.colorBorder {
  width: min(5rem, 10vw);
  height: min(5rem, 10vw);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.colorDot {
  width: min(5rem, 10vw);
  height: min(5rem, 10vw);
  border-radius: 100%;
}

#colorDot1 {
  background-color: #6bc7c8;
}

#colorDot2 {
  background-color: #00b4e0;
}

#colorDot3 {
  background-color: #1f4494;
}

#colorDot4 {
  background-color: #d45180;
}

/* Cursor Follower */
.cursorFollowerSection {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 99999999999;
  pointer-events: none;
}

.cursorFollower {
  position: absolute;
}

.circleFollowerContainer1,
.circleFollowerContainer2,
.circleFollowerContainer3,
.circleFollowerContainer4 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleFollowerPlacer1 {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleFollowerPlacer2 {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleFollowerPlacer3 {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleFollowerPlacer4 {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleFollower1 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #6bc7c8;
  transform: translateY(-15px);
}

.circleFollower2 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #00b4e0;
  transform: translateY(-15px);
}

.circleFollower3 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #1f4494;
  transform: translateY(-15px);
}

.circleFollower4 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #d45180;
  transform: translateY(-15px);
}

/* Responsive */
@media screen and (max-width: 800px) {
  .cursorFollowerSection {
    display: none !important;
  }
}

.scrollDown {
  z-index: 5 !important;
}