<!-- Article:  http://www.tipue.com/blog/center-a-div/ -->
<!-- Original image idea: https://miro.medium.com/max/1466/1*0kTbcUFaURTF7F9L_oxSyQ.png -->

- var n = 0;

// We are creting below 20 elements with a while loop
.container
  .row.mt-5
     while n < 20
      - li= n++
      div.neomorph.m-5(class="size-" + n)

//variables
grey = #ECEDF1
white-shadow = #FAFBFF
dark-shadow = #A6ABBD
shadow-up = -10px
shadow-down = 10px
blur = 20px

body
  background-color: grey

// the instresting part that creates the neomorphic design
.neomorph 
  background-color: grey
  border-radius: 3em
  box-shadow: shadow-up shadow-up blur 5px white-shadow, shadow-down shadow-down blur 0px dark-shadow

// a loop to create elements of various sizez
for item in (1..20)
  .size-{item}
    width: 1em * item
    height: 1em * item