body {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(245, 245, 245);
}

.topview {
  width: 400px;
  height: 230px;
}

.replaydiagram,
.diagram,
.roll {
  width: 400px;
  border: 1px solid black;
  border-radius: 4px;
  padding: 4px;
  margin: 4px;
  background-color: white;
  box-shadow: 2px 2px 2px lightgray;
}

.mathavendiagram {
  width: 600px;
  height: 400px;
  border: 1px solid black;
  border-radius: 4px;
  padding: 4px;
  margin: 4px;
  background-color: white;
  box-shadow: 2px 2px 2px lightgray;
}

.roll {
  width: 800px;
}

.title,
.label {
  font-size: small;
  font-weight: lighter;
}

.small {
  font-size: xx-small;
  text-align: center;
  margin: auto;
}

.child {
  position: absolute;
  top: 32px;
  left: 0;
}

.child:nth-child(4) {
  opacity: 0.25;
}

.child:nth-child(3) {
  opacity: 0.33;
}

.child:nth-child(2) {
  opacity: 0.5;
}

.child:nth-child(1) {
  opacity: 1;
}

.parent {
  width: 411px;
  position: relative;
}

#R,
#m,
#e,
#mu,
#muS,
#muC,
#s,
#rho {
  width: 75%;
}

canvas {
  margin: auto;
  display: block;
}

p {
  text-align: center;
  margin: auto;
}

input {
  width: 6ch;
  block-size: fit-content;
  font-size: xx-small;
}

button {
  margin-left: 6px;
  font-size: smaller;
}