body{
  display: grid; 
  margin: auto; 
  margin-top: calc(50vh - 170px); 
  width: 300px; height: 300px;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url("font.woff2") format('woff2');
}
fieldset{
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 2; 
  padding: 20px; 
  width: 136px; 
  border-radius: 10px;
}
fieldset:nth-of-type(1){ 
      background: content-box center/contain no-repeat url("sphere.svg");
}
fieldset:nth-of-type(1){ transform: rotate(22.5deg); }
fieldset:nth-of-type(2){ transform: rotate(67.5deg); }
fieldset:nth-of-type(3){ transform: rotate(112.5deg); }
fieldset:nth-of-type(4){ transform: rotate(157.5deg); }
fieldset:nth-of-type(5){ transform: rotate(-22.5deg); }
fieldset:nth-of-type(6){ transform: rotate(-67.5deg); }
fieldset:nth-of-type(7){ transform: rotate(-112.5deg); }
fieldset:nth-of-type(8){ transform: rotate(-157.5deg); }
legend{
  font: 20pt/14px 'Averia Serif Libre'; 
  background: white;
  margin: auto; 
  padding: 0 4px;
} 

body {
  user-select: none;
  -webkit-user-select: none;
}