body {
	background-color : black;
}
h1 {
	color : white;
}
ul {
	margin : 0px;
	padding : 0px;
}
li {
	width : 250px;
	height : 150px;
	float : left;
	margin-left : 50px;
	list-style-type : none;
	text-align : center;
	background-color : pink;
}
.wrapper {
	width : 80px;
	height : 30px;
	margin : 0px auto;
	margin-top : 50px;
	position : relative;
}
a {
	width : 100%;
	height : 100%;
	display : block;
	border : 3px solid white;
	text-decoration : none;
	line-height : 30px;
	font-size : 20px;
	color : black;
	border-radius : 2px;
	transition : all 0.2s linear 0s;
	-ms-transition : all 0.2s linear 0s;
	-moz-transition : all 0.2s linear 0s;
	-webkit-transition : all 0.2s linear 0s;
	-o-transition : all 0.2s linear 0s;
}
a:hover {
	color : black;
	background-color : white;
}
.line {
	position : absolute;
	background-color : white;
	transition : all 0.2s ease-in 0s;
	-ms-transition : all 0.2s ease-in 0s;
	-moz-transition : all 0.2s ease-in 0s;
	-webkit-transition : all 0.2s ease-in 0s;
	-o-transition : all 0.2s ease-in 0s;
	opacity : 0;
}
a:hover ~ .line {
	opacity : 1;
}
.left, .right {
	width : 3px;
	height : 30px;
}
.top, .bottom {
	width : 80px;
	height : 3px;
}
.left {
	left : 0px;
	top : -30px;
}
a:hover ~ .left {
	top : 0px;
}
.right {
	left : 83px;
	top : 36px;
}
a:hover ~ .right {
	top : 0px;
}
.top {
	left : 86px;
	top : 0px;
}
a:hover ~ .top {
	left : 0px;
}
.bottom {
	left : -80px;
	top : 33px;
}
a:hover ~ .bottom {
	left : 0px;
}