.cursorWrap {
	display: block;
	width: 0px;
	height: 0px;
	position: fixed;
	left:var(--mouse-x);
	top:var(--mouse-y);
	z-index: 9;
	pointer-events: none;
}

#cursor {
	border-radius: 100%;
	border-width: 3px;
	border-style: solid;

	transform-origin: center center 0;
	
	transition: 0.3s, transform 0s;
}






/* -------------base------------- */
.cursor {
	width: 7px;
	height: 7px;
	background-color: var(--accent);
	font-size: calc(min(8vw, 12vh)*0);
	color: transparent;
	border-color: transparent;
}
/* ----------------------------- */


.cursor.cursor-link {
	width: calc(min(8vw, 12vh)*0.4);
	height: calc(min(8vw, 12vh)*0.4);
	background-color: transparent;
	border-color: white;
	transition: 0.3s;
}
.cursor.cursor-scroll {
	background-color: var(--accent);
	width: calc(min(8vw, 12vh)*0.8);
	height: calc(min(8vw, 12vh)*0.8);
	font-size: calc(min(8vw, 12vh)*0.2);
	border-color: transparent;
	color: white;
	transition: 0.3s;
}
.cursor.cursor-view {
	background-color: var(--accent);
	width: calc(min(8vw, 12vh)*0.6);
	height: calc(min(8vw, 12vh)*0.6);
	font-size: calc(min(8vw, 12vh)*0.15);
	border-color: transparent;
	color: white;
	transition: 0.3s;
}






#cursorText {
	display: inline-flex;
	width: fit-content;
	height: fit-content;
	position: absolute;
  top: 50%;
  left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}


/* ----------base-text---------- */
.cursor .cursorText:before {

	content: "";
}
/* ----------------------------- */




.cursor.cursor-scroll .cursorText:after{
	content:"SCROLL";
}
.cursor.cursor-view .cursorText:after{
	content:"VIEW";
}