body {
background-color: black;
}

#main {
position: absolute;
top: 50%;
left: 50%;
margin: -15% 0 0 -15%;
width: 30%;
padding-top: 30%;
overflow: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.box {
display: block;
width: 45%;
height: 45%;
position: absolute;
}

.curves {
border: 2px solid white;
border-radius: 15px;
transition: 1s;
}

.top {
top: 0;
left: 0;
background: url(../img/aboutme.png);
background-position: center;
background-size: contain;
}

.top:hover {
background-color: #f4c20d;
border: 20px solid white;
box-shadow: 0 0 50px #00cec9;
border-radius: 200px;
}

.right {
top: 0;
right: 0;
background: url(../img/portfolio.png);
background-position: center;
background-size: contain;
}

.right:hover {
background-color: #db3236;
border: 20px solid white;
box-shadow: 0 0 50px #ffa502;
border-radius: 200px;
}

.bottom {
bottom: 0;
right: 0;
background: url(../img/contact.png);
background-position: center;
background-size: contain;
}

.bottom:hover {
background-color: #4885ed;
border: 20px solid white;
box-shadow: 0 0 50px #e84393;
border-radius: 200px;
}

.left {
bottom: 0;
left: 0;
background: url(../img/resume.png);
background-position: center;
background-size: contain;
}

.left:hover {
background-color: #3cba54;
border: 20px solid white;
box-shadow: 0 0 50px #a29bfe;
border-radius: 200px;
}