style.css

/* INSTRUCTIONS:
First, apply rules to the body tag to set the elements in a row.
Solve each dice seperately and then move onto the next.
 */

/* MAIN STYLES */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}


body {
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(top, #222, #333);
  /*Add some your code here.*/
}

/*The [attribute$=value] selector matches every element whose attribute value ends with a specified value.*/
[class$="face"] {
  margin: 16px;
  padding: 4px;

  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;

  box-shadow:
    inset 0 5px white,
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;

  border-radius: 10%;
}

.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;

  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}