.face{display:grid;grid-template-areas:"a . c" "e g f" "d . b";padding:4%;margin:auto;grid-gap:2px;gap:2px;aspect-ratio:1;background-color:#ff5b5b;box-shadow:inset 0 .1vh #fff,inset 0 -.1vh #bbb,inset .1vh 0 #d7d7d7,inset -.1vh 0 #d7d7d7;border-radius:10%}.face,.pip{position:relative;width:100%}.pip{display:flex;align-self:center;justify-self:center;height:100%;border-radius:50%;background-color:#333;box-shadow:inset 0 3px #111,inset 0 -3px #555}.pip:nth-child(2){grid-area:b}.pip:nth-child(3){grid-area:c}.pip:nth-child(4){grid-area:d}.pip:nth-child(5){grid-area:e}.pip:nth-child(6){grid-area:f}.pip:nth-child(odd):last-child{grid-area:g}