:root { --main-color: #0947e3; }
html { overflow: hidden; }
body, #App {
  height: 100vh; background: #F6F8F8; color: var(--main-color);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  user-select: none; cursor: default;
}
#App { max-height: 500px; }
#App .layout-1 { flex-grow: 3; }
#App .layout-2 { flex-grow: 1; }
#App .font-comfortaa { font-family: "Comfortaa", cursive; }
#atom { width: 400px; height: 400px; margin-top: 10%; position: relative; }
.electrosphere {
  width: var(--size); height: var(--size);
  margin-top: calc((var(--size) + 5.3%) * -1);
  margin-left: calc((100% - var(--size)) / 2);
  border: 1px solid #CCC; border-radius: 50%; transition: 0.3s;
}
.electrosphere.layer-7 { margin: 0; }
.electrosphere.empty { visibility: hidden; opacity: 0; }
.electron {
  width: 100%; height: 100%; margin-top: -100%;
  transform: rotate(calc(360deg * var(--index) / var(--base)));
  transition: 0.3s;
}
.electron::before {
  content: ""; position: absolute; padding: 3px; border-radius: 50%;
  background: var(--main-color); outline: 3px solid #F6F8F8;
  margin: -3px 0 0 calc(50% - 1px);
}
.nucleus {
  width: 20%; height: 20%; margin: -30% 0 0 40%;
  background: var(--main-color); border-radius: 50%; color: #FFF;
  display: flex; justify-content: center; align-items: center; z-index: 99; position: relative;
}
.nucleus.match-error { background: #FFEB3B; color: #333; }
.notation-display { width: 300px; height: 60px; display: flex; justify-content: space-evenly; flex-wrap: wrap; cursor: pointer; }
.notation-display .middle { display: none; }
.notation-display.show-full-notation .middle { display: inline-block; }
.notation-display.show-full-notation .truncate { display: none; }