:root {
	--circlesize: 15px;
	--circlesize1: 15px;
	--circlesize2: 35px;

	--textShadowSize: 4px;

	--manual-glass: linear-gradient(20deg, black 5%, white 10%, grey 15%, black 35%, grey 55%, black 60%, white 70%, black 80%);
	--glass: linear-gradient(9deg,rgba(138, 138, 138, 0.59) 0%, rgba(255, 255, 255, 0.41) 27%, rgba(209, 209, 209, 0.38) 30%, rgba(255, 255, 255, 0.45) 36%, rgba(219, 219, 219, 0.22) 64%, rgba(240, 240, 240, 0.5) 76%, rgba(191, 191, 191, 0.38) 84%, rgba(207, 207, 207, 0.71) 100%);
  

  --primaryBG: #ff0051;
  --secondary: #232b40;
  --secondaryDarker: #1a1f26;
  --secondaryLighter: rgb(64, 86, 131);
  --secondaryLightest: rgb(150, 170, 200);
  --neat: #eb4034; /*no use i just thought this color was cool*/
  --outlines: #ffffff9b;
  --darkoutlines: #1d2647;
}



.bg {
	position: absolute;
	width: 100%;
	min-height: 100dvh;
	top: 0; left: 0;
}

#bg0 {

	display: grid;
 	place-items: center;
 	gap: 25px;

	background-color: green;
	z-index: -11;

	perspective-origin: 50% 50%;
	perspective: 600px;
	transform-style: flat;

	overflow: hidden;
}


#circleMaskGradient {
	z-index: -11;
	background: linear-gradient(0deg, #757575 -5%, white)
}

#circlecircle {
	background: radial-gradient(black 0%, transparent 75%);
	background-size: var(--circlesize) var(--circlesize);

	z-index: -10;
	animation: LFO1 1s linear infinite, LFO2 10s ease-in-out alternate infinite, LFO3 120s linear infinite;

	transform: rotateX(var(--circRotY)) rotateY(var(--circRotX)) scale(4);
	clip-path: circle(50%);

}

#contrastFilter {
	z-index:-9;
	backdrop-filter: blur(8px) contrast(25);
}

#darkenBG {
  z-index: -8;
  background: linear-gradient(20deg, var(--primaryBG), var(--neat), var(--primaryBG));
  mix-blend-mode: darken;
}
#lightenBG {
  z-index: -7;
  background: linear-gradient(70deg, var(--secondary), var(--secondaryDarker), var(--secondary));
  mix-blend-mode: exclusion;
}


#rotatingplane {
	width: 70vmin;
	height: 70vmin;
	transform: rotateX(var(--planeRotY)) rotateY(var(--planeRotX));
	z-index: 10;

	background: var(--glass);
	outline: .25em solid var(--outlines);
	backdrop-filter: blur(8px) contrast(1) brightness(60%);
	filter: contrast(5);

	border-radius: 10px;
}

#rotatingplaneFG {
	width: 60vmin;
	height: 60vmin;
	transform: rotateX(var(--planeRotY)) rotateY(var(--planeRotX)) translateZ(35px);
	z-index: 11;
	position: absolute;

	overflow-y: scroll;
}



@keyframes LFO1 {
	0% {background-position: 0, 0}
	100% {background-position: var(--circlesize1), 0}
}
@keyframes LFO2 {
	0% {background-size: var(--circlesize1) var(--circlesize1)}
	100% {background-size: var(--circlesize1) var(--circlesize2)}
}
@keyframes LFO3 {
	0% {rotate: 0deg}
	100% {rotate: 360deg}
}








body {
	color: white;
}
span {
	text-shadow: 1px 1px 5px grey, 1px 1px 5px grey;
	filter: contrast(5);
}
a:hover {
	color: cyan;
}

li {background: linear-gradient(180deg, transparent 30%, rgba(100,100,100,0.3) );}