* {
	padding:0;
	margin:0 auto;
}
body,html {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(73,73,73);
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
}
main {
	width:150px;
	height:550px;
	/* border:1px solid black;
	*/
 transform:scale(0.8);
}
#button {
	width:100%;
	height:60px;
	cursor:pointer;
	position:relative;
	color:white;
	text-align:center;
	line-height:60px;
	font-size:25px;
	margin-bottom:20px;
	transition:0.5s;
	top:0;
}
#button a {
	width:100%;
	height:100%;
	display:block;
	position:relative;
	z-index:5;
	color:white;
	text-decoration:none;
	transition:0.2s;
	top:0;
}
.one::before {
	content:'';
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	transition:0.5s;
	background:rgb(93,131,243);
	z-index:1;
}
.one:hover:before {
	filter:blur(15px);
}
.one:hover a {
	transform:scale(1.1);
	text-shadow:0 0 10px white;
}
.two::before {
	content:'';
	width:100%;
	height:60px;
	background:rgb(93,243,198);
	position:absolute;
	left:0;
}
@keyframes move {
	0% {
	box-shadow:0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198);
}
50% {
	box-shadow:-1px -1px 0 rgb(93,243,198),-2px -2px 0 rgb(93,243,198),-3px -3px 0 rgb(93,243,198),-4px -4px 0 rgb(93,243,198),-5px -5px 0 rgb(93,243,198);
}
100% {
	box-shadow:1px 1px 0 rgb(93,243,198),2px 2px 0 rgb(93,243,198),3px 3px 0 rgb(93,243,198),4px 4px 0 rgb(93,243,198),5px 5px 0 rgb(93,243,198);
}
}@keyframes moves {
	0% {
	left:0;
	top:0;
}
50% {
	left:-5px;
	top:-5px;
	transform:scale(1.2)
}
100% {
	left:5px;
	top:5px;
	transform:scale(0.9)
}
}.two:hover::before {
	animation:move 0.4s ease 2 alternate;
}
.two:hover a {
	animation:moves 0.4s ease 2 alternate;
}
.three::before {
	content:'';
	width:100%;
	height:60px;
	background:rgba(255,255,255,0.748);
	position:absolute;
	left:0;
}
@keyframes move3 {
	0% {
	text-shadow:0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46);
}
50% {
	text-shadow:5px 5px 5px rgb(46,46,46),15px 10px 5px rgb(46,46,46),25px 15px 5px rgb(46,46,46),35px 20px 5px rgb(46,46,46),45px 25px 5px rgb(46,46,46);
}
100% {
	text-shadow:-5px -5px 5px rgb(46,46,46),-15px -10px 5px rgb(46,46,46),-25px -15px 5px rgb(46,46,46),-35px -20px 5px rgb(46,46,46),-45px -25px 5px rgb(46,46,46);
}
}@keyframes moves3 {
	0% {
	left:0;
	top:0;
}
50% {
	left:25px;
	top:15px;
	filter:blur(10px);
}
100% {
	left:-25px;
	top:-15px;
	filter:blur(10px);
}
}.three:hover {
	animation:move3 0.4s ease 2 alternate;
}
.three:hover::before {
	animation:moves3 0.5s linear 2 alternate;
}
.four {
	overflow:hidden;
	background:rgb(243,171,93);
}
.four::before {
	content:'Button';
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	top:-3px;
	transform:scale(2);
	z-index:1;
	color:rgb(42,42,42);
	opacity:0;
	transition:0.5s;
}
.four::after {
	content:'Button';
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	top:-3px;
	transform:scale(2);
	z-index:1;
	color:black;
	opacity:0;
	transition:0.5s;
}
.four:hover::before {
	transition-delay:0.2s;
	opacity:1;
	top:0;
	transform:scale(1);
}
.four:hover::after {
	opacity:1;
	top:0;
	transform:scale(1);
}
.five a {
	background:rgb(243,93,93);
}
.five::before {
	content:'';
	width:5px;
	height:5px;
	border-radius:50%;
	position:absolute;
	left:0;
	top:25px;
	transition:0.5s ease;
	opacity:1;
	box-shadow:0px 0 0px red,0px -25px 0px red,0px 30px 0px red,0px -9px 0px red;
}
.five::after {
	content:'';
	width:5px;
	height:5px;
	border-radius:50%;
	position:absolute;
	right:0;
	top:25px;
	transition:0.5s ease;
	opacity:1;
	box-shadow:0px 0 0px red,0px -15px 0px red,0px 25px 0px red,0px -9px 0px red;
}
.five:hover::before {
	opacity:1;
	transform:translateX(-30px);
	box-shadow:10px 0 2px red,-20px -30px 7px red,-15px 30px 5px red,-8px -9px 5px red;
}
.five:hover::after {
	opacity:1;
	transform:translateX(30px);
	box-shadow:-5px 0 2px red,20px -15px 7px red,10px 25px 5px red,8px -9px 5px red;
}
.five:hover a {
	background:none;
	box-shadow:0 0 50px rgba(253,77,77,0.857) inset;
}
.six a {
	background:rgb(214,231,99);
}
.six::before {
	content:'';
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	transition:0.5s;
	opacity:0;
	box-shadow:0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99);
}
.six::after {
	content:'';
	width:100%;
	height:60px;
	position:absolute;
	top:0;
	right:0;
	transition:0.5s;
	opacity:0;
	box-shadow:0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99);
}
.six:hover::before {
	opacity:0.5;
	box-shadow:-5px 0 5px rgb(121,127,80),-15px 0 5px rgb(170,182,93),-25px 0 5px rgb(171,182,99),-35px 0 5px rgb(217,225,165),-45px 0 5px rgb(227,230,213);
}
.six:hover::after {
	opacity:0.5;
	box-shadow:5px 0 5px rgb(121,127,80),15px 0 5px rgb(170,182,93),25px 0 5px rgb(171,182,99),35px 0 5px rgb(217,225,165),45px 0 5px rgb(227,230,213);
}
.six:hover a {
	filter:blur(1px)
}
.seven {
	}.seven::before {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	background:rgb(132,133,132);
}
.seven::after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	opacity:0.7;
	background:rgb(141,233,116);
}
.seven a {
	}@keyframes move7 {
	0% {
	text-shadow:0px 0px 0px black,0px 0px 0px black,0px 0 0px black,0px 0 0px black;
}
50% {
	text-shadow:0px 0px 2px black,5px 0px 2px black,10px 0 2px black,15px 0 2px black;
}
100% {
	text-shadow:0px 0px 2px black,-5px 0px 2px black,-10px 0 2px black,-15px 0 2px black;
}
}@keyframes moves7 {
	0% {
	transform:translateX(0);
}
50% {
	filter:blur(5px);
	transform:translateX(10px);
}
100% {
	transform:translateX(-10px);
	filter:blur(5px);
}
}.seven:hover a {
	animation:move7 0.2s linear 2 alternate;
}
.seven:hover::before {
	animation:moves7 0.15s linear 2 alternate;
}
.seven:hover::after {
	animation:moves7 0.15s linear 2 alternate-reverse;
}