body {
font-family: poppins;
}
.wrapper {
margin: 0 auto;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
#nav-area {
width: 950px;
}
#menu li {
list-style: none;
display: block;
float: left;
padding: 5px;
}
#menu li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 20px;
margin: 0 15px;
padding: 5px;
text-transform: uppercase;
font-weight: 900;
}
#menu li:hover{
    background: #333;
    transition: .9s;
}
.box {
background: #F70A5D;
height: 50px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500;
margin: 3em 0;
}
.bar-1 {
border-color: #F70A5D transparent transparent;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.bar-2 {
border-color: transparent transparent #F70A5D;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: left;
top: -46px;
left: -150px;
}
.bar-3 {
border-color: #F70A5D transparent transparent;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: right;
right: -49px;
top: -97px;
}
.bar-4 {
border-color: transparent transparent #F70A5D;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: right;
top: -144px;
right: -145px;
}