::selection {
    background: #7777ff50;
}

.mouse-circle {
    position: fixed;
    pointer-events: none;
    width: 3vw; /* 이미지 크기 */
    height: 3vw; /* 이미지 크기 */
    background-image: url("/static/main/images/whalemath_whale_stroke.svg"); /* 이미지 경로 설정 */  /* 장고에서 static 파일은 STATIC_URL 경로(/static/) 아래에 서빙되기 때문에 경로는 /static으로 시작 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* 이미지가 중앙에 위치하도록 */
    z-index: 9999; /* 다른 요소 위에 나타나도록 설정 */
    left: 0;
    top: 0;
    transform: translate(0%, 0%); /* 이미지를 마우스 포인터 우측 하단에 맞추기 */
    opacity: 0.5; /* 0.5로 변경: 숫자 값이어야 함 */
    transition: transform 0.1s, opacity 0.3s ease; /* opacity 트랜지션 추가 */
}

.mouse-circle.left {
    transform: translate(0%, 0%) scaleX(-1); /* 왼쪽을 바라보게 반전 */
}

@media (max-width: 1100px) {
    .mouse-circle {
        all: unset;
    }
}