html, body {
  margin: 0;
  height: 100%;
  font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;     
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg) }
}


.p1 {
	position: fixed;
	top: 50%;
	left: 30%;
	width: 150px;
	z-index:2;
	transform: translate(-50%, -50%)
}

.forring1 {
	position: fixed;
  	width: 150px;
  	height: 150px; 
 	opacity: 0;
 	border-radius: 50%;
  	position: fixed;
  	top: 50%;
	left: 30%;
  	z-index:6;
  	transform: translate(-50%, -50%)
}


.ring1 {
	position: fixed;
	pointer-events: none; 
	top: 50%;
	left: 30%;
	width: 170px;
	opacity: 0;
	z-index:1;
	transform: translate(-50%, -50%)
}

.forring1:hover ~ .ring1 {
		opacity: 1;
		pointer-events: none; 
}

.p2 {
	position: fixed;
	top: 70%;
	left: 48%;
	width: 100px;
	z-index:2;
	transform: translate(-50%, -50%)
}

.ring2 {
	position: fixed;
	pointer-events: none; 
	top: 70%;
	left: 48%;
	width: 115px;
	opacity: 0;
	z-index:1;
	transform: translate(-50%, -50%)
}

.forring2 {
	position: fixed;
  	width: 115px;
  	height: 115px; 
 	opacity: 0;
 	border-radius: 50%;
  	position: fixed;
  	top: 70%;
	left: 48%;
  	z-index:6;
  	transform: translate(-50%, -50%)
}

.forring2:hover ~ .ring2 {
		opacity: 1;
}

.p3 {
	position: fixed;
	top: 50%;
	left: 70%;
	width: 150px;
	z-index:10;
	animation: spin 2.5s linear infinite;
	animation-duration: 6s;
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%) rotate(0deg)
}

.forhover {
	position: fixed;
	opacity: 0;
  	width: 200px;
  	height: 200px; 
 	background-color: #2E3842;
 	border-radius: 50%;
  	position: fixed;
  	top: 50%;
  	left: 70%;
  	z-index:11;
  	transform: translate(-50%, -50%)
}

.forclick{
	position: fixed;
	opacity: 0;
  	width: 200px;
  	height: 200px; 
 	background-color: #2E3842;
 	border-radius: 50%;
  	position: fixed;
  	top: 50%;
  	left: 70%;
  	z-index:10;
  	transform: translate(-50%, -50%)
}

.circle {
	position: fixed;
  	width: 200px;
  	height: 200px; 
 	background-color: #2E3842;
 	border-radius: 50%;
  	position: fixed;
  	top: 50%;
  	left: 70%;
  	z-index:9;
  	transform: translate(-50%, -50%)
}

.forhover:hover ~ .full {
	opacity: 1;
} 

.full {
	position: fixed;
	width: 100vw;
  	height: 100vh; 
  	opacity: 0;
  	pointer-events: none; 
 	background-color: #2E3842;
 	z-index:4;
}

.one {
	color: #36B7B5;
}

.two {
	color: #B886B6;
}

.three {
	color: #FF5261;
}

.four {
	color: #36B7B5;
}