body {
  min-height: 100vh;
  background-color: #FFF5FA;
  display: flex;
  align-items: center;
  justify-content: center;
}

#main {
  width: 22rem;
}

.first-screen, .second-screen {
  height: 8em;
  color: #c4c4c4;
  background: #ffffff;
  border: 1px solid #a6a6a6;
}

pre {
  color: #7d7d7d;
}

.first-screen {
  border-bottom: none;
  border-radius: 15px 15px 5px 5px;
  box-shadow: inset 10px 0px 6px -10px #cfcfcf, inset -10px 0px 6px -10px #cfcfcf, inset 0px 10px 6px -10px #cfcfcf, inset 0px -10px 6px -10px #ffffff;
}

.middle {
  height: 1em;
  background: #ffffff;
  border: 1px solid #a6a6a6;
  border-radius: 5px;
  box-shadow: inset 10px 0px 6px -10px #cfcfcf, inset -10px 0px 6px -10px #cfcfcf, inset 0px 10px 6px -11px #cfcfcf, inset 0px -10px 6px -11px #cfcfcf;
}

.second-screen {
  border-top: none;
  border-radius: 5px 5px 15px 15px;
  box-shadow: inset 10px 0px 6px -10px #cfcfcf, inset -10px 0px 6px -10px #cfcfcf, inset 0px 10px 6px -10px #ffffff, inset 0px -10px 6px -10px #cfcfcf;
}

.white-circle {
  width: 4rem;
  height: 4rem;
  background: #ffffff;
  border: 1px solid #b0b0b0;
  border-radius: 50%;
}

.pink-circle {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(#ffffff, #fff0f7);
  box-shadow: inset 10px 0px 6px -10px #ebc3d6, inset -10px 0px 6px -10px #ebc3d6, inset 0px 10px 6px -10px #ebc3d6, inset 0px -10px 6px -10px #e8d3dd;
  border: 1px solid #b0b0b0;
  border-radius: 50%;
}