import styled from "styled-components";

export const Page404Style = styled.div`
	@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400");

	display: flex;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: #131313;
	color: #fff;
	font-size: 96px;
	font-family: "Fira Mono", monospace;
	letter-spacing: -7px;

	div {
		animation: glitch 1s linear infinite;
	}

	@keyframes glitch {
		2%,
		64% {
			transform: translate(2px, 0) skew(0deg);
		}
		4%,
		60% {
			transform: translate(-2px, 0) skew(0deg);
		}
		62% {
			transform: translate(0, 0) skew(5deg);
		}
	}

	div:before,
	div:after {
		content: attr(title);
		position: absolute;
		left: 0;
	}

	div:before {
		animation: glitchTop 1s linear infinite;
		clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	}

	@keyframes glitchTop {
		2%,
		64% {
			transform: translate(2px, -2px);
		}
		4%,
		60% {
			transform: translate(-2px, 2px);
		}
		62% {
			transform: translate(13px, -1px) skew(-13deg);
		}
	}

	div:after {
		animation: glitchBotom 1.5s linear infinite;
		clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	}

	@keyframes glitchBotom {
		2%,
		64% {
			transform: translate(-2px, 0);
		}
		4%,
		60% {
			transform: translate(-2px, 0);
		}
		62% {
			transform: translate(-22px, 5px) skew(21deg);
		}
	}
	.backtohome {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-size: 0.6em;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
		transition: all 0.3s ease;
		&:hover {
			color: #111111;
			background: #fff;
		}
	}
`;