Neomorphismus in CSS

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
            *{
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
                  background-color: gray;
            }
            .first,.second, .third, .Fourth {
                  width: 200px;
                  height: auto;
                  border-radius: 25px;
                  box-shadow: 5px 5px 15px rgb(0, 0, 0), -7px -7px 15px white;
                  text-align: center;
                  text-transform: capitalize;
                  color: white;
                  font-family: cursive;
                  padding: 10px;
                  margin: 30px;
            }
            .flexbox{
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               margin-top: 50px;
               
          
               
            }
      </style>
      <title>node mon</title>
</head>
<body>
  <div class="flexbox">
      <div class="first">
            <h3>first neo</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, similique.</p>
      </div>
      <div class="second">  
            <h3>second neo</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, similique.</p></div>
      <div class="third">  
            <h3>second neo</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, similique.</p></div>
      <div class="Fourth"> 
             <h3>Fourth neo</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, similique.</p></div>
  </div>

</body>
</html>
husseinpenart