.page--error {
    background: #221034;
    color: #fff;
    height:600px
}
.page--error h1{ color: #fff; margin: 50px 0}
.anim404{
	font-size:30px;
	font-family: 'Ranga', cursive;
 	position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.four{
			fill:none;
			fill-opacity:1;
			stroke:#e81d25;
			stroke-width:4.48801327;
			stroke-linecap:butt;
			stroke-linejoin:miter;
			stroke-miterlimit:4;
			stroke-opacity:1

		}

		.cube{
			fill:none;
			stroke:#e81d25;
			stroke-width:1;
			stroke-linecap:round;
			stroke-linejoin:round;
			stroke-miterlimit:4;
			stroke-opacity:1
		}	

		.four {
			animation: drawf 3s  forwards ease-out;
		}

        .cube {
			animation: drawf 8s  forwards ease-out;
		}
		@keyframes drawf{
			to{
				stroke-dashoffset: 0;
			}
		}

.color_anim{
	animation: color_a 4.5s infinite alternate ;
}

@keyframes color_a{
	0%{
		stroke:#e81d25;
	}
	20%{
		stroke:#c41717;
	}
	40%{
		stroke:#a8871c;
	
	}
	60%{
		stroke:#e658eb;
		
	}
	80%{
		stroke:#1252ba;	
	}
	100%{
		stroke:#b512af;
	}
	
}
	.hang{
		animation: hang-a 6s infinite alternate; 
	}

@keyframes hang-a{
	
		0%{
		 transform: translate(-50%, -50%) rotatez(0deg);
						
		}
	20%{
				 transform: translate(-50%, -50%) rotatez(15deg); 
	}	
	40%{
		 
		transform: translate(-50%, -50%) rotatez(0deg); 
	}
		
	50%{
		 transform: translate(-50%, -50%) rotatez(0deg); 
			}
	80%{
		 transform: translate(-50%, -50%) rotatez(-15deg); 
		}
	90%{
		 transform: translate(-50%, -50%) rotatez(0deg); 
			}
	100%{
		 transform: translate(-50%, -50%) rotatez(0deg); 
			}

	}
	
.me{
	margin:0 ;
	font-weight: 600;
	font-family:cursive;
	color:#75787c;
}