*{
   margin: 0px;
   padding: 0px;
}
h1{
   text-align: center;
   margin-top: 50px;
   text-transform: uppercase;
   color:blue;
   text-decoration: underline;


}
.box{
   width: 100%;
   height: 600px;
   background-color:dimgrey;
   border: 3px solid black;
   position: relative;
}
ul{
   width: auto;
   height: 50px;
   display: flex;
   list-style: none;
   position:absolute;
   left: 30%;
   top: 40%;
   font-weight: 100;
   background-color: white;
   transform: skew(-30deg) ;
   box-shadow: 2px 10px 5px 0px ;
   border-radius: 7px;
  
   
}
ul li{
  
   text-transform: uppercase;
   padding-top: 15px;
   padding-left: 15px;
   padding-right: 15px;
   border-right: 2px solid;
   border-color:dimgrey;
   font-weight:90;
   cursor: pointer;
   
}
ul li:nth-child(4){
   border-right: 0px;
}
ul li:nth-child(1){
 
   border-radius:7px 0px 0px 7px ;
   
}
ul li:nth-child(4){
   
   border-radius:0px 7px 7px 0px ;
   
}
ul li:nth-child(n):hover{
    opacity: 0.5;
    transition: all .4s;
    background-color:blue;
    color: aliceblue;
    font-weight: lighter;

}