body{
  background-image:url("ssss.jpg"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0%;
  margin: 0%;
}
body{background-color:z;
  display: flex;

  justify-content: center;
  min-height: 100vh;
}
ul{margin-top: 60%;

  text-decoration-line: none;
  list-style: none;
  position: relative;
  display: flex;
  transform: rotate(-25deg) skew(20deg);
  transform-style: preserve-3d;
 
}

.sedad{margin-left: 0%;
  margin-top:20%;
}
ul li{
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0px 20px;
}
ul li:before{
  content: "";
  position: absolute;
  bottom: -10px;
  left: -5px;
  width: 100%;
  height: 10px;
  background: brown;
  transform: skewX(-41deg);

}
ul li :after{
  content: "";
  position: absolute;
  top:5px;
  left:-9px;
  width:9px;
  height: 100%;
  background: brown;
  transform-origin: right;
  transform: skewY(-49deg);
}
ul li span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  background: black;
  justify-content: center;
  align-items: center;
  color: aliceblue;
  transition: 2.5s ease-out;
font-size: 30px !important;

}
ul li:hover span{
  z-index: 1000;
  transition: 1.2s;
  counter-reset: #fff;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0);
}
ul li :hover span:nth-child(5){
  transform: translate(40px,-40px);/*ta2kid ka*/
  opacity: 1;
}ul li :hover span:nth-child(4){
  transform: translate(30px,-30px);/*ta2kid ka*/
  opacity: .8;
}ul li :hover span:nth-child(3){
  transform: translate(20px,-20px);/*ta2kid ka*/
  opacity: .6;
}ul li :hover span:nth-child(2){
  transform: translate(10px,-10px);/*ta2kid ka*/
  opacity: .4;
}ul li :hover span:nth-child(1){
  transform: translate(0px,0px);/*ta2kid ka*/
  opacity: .2;
}
ul li :hover span:nth-child(6){
  transform: translateX(-100px);
  opacity: 1;
}




ul li :nth-child(1):hover span{
  background: #003bec !important;
  box-shadow:0px 5px 12px #003bec;

}
.sedad{

  transform: translateX(400px);
  margin-top: 10%;
  border-radius: 50%;
}
.ss{
  margin-right: 100%;
}
.sedads{height: 220px;
  border-radius: 100%;
}
h1{font-size: 20px;
  font:  sans-serif;
  font-weight: bold;
transform: translateX(0px);
}
.b{margin-top: 2%;
  margin-left: 20%;
  transform: translateX(370px); 
 
}