body {
  margin: 0;
  background-color: rgb(70, 70, 206);
}

h1 {
  text-align: center;
  color: white;
}

.main-container {
  display: flex;
  height: 100vh;
  color: white;
}
.main-container .inner-container {
  margin: auto;
}
.main-container .example-container {
  display: grid;
  grid-template-columns: auto;
  row-gap: 0.3rem;
}
.main-container .example-container code {
  width: 100%;
  margin-left: auto;
  color: white;
  text-align: center;
  font-size: 2rem;
}

.nice-digit-code-container-view {
  display: grid;
  grid-template-columns: auto;
}
.nice-digit-code-container-view .digit-code-container {
  display: grid;
  row-gap: 0.75rem;
  column-gap: 0.5rem;
  justify-content: center;
  grid-auto-flow: column;
}
.nice-digit-code-container-view .digit-code-container input {
  text-align: center;
  width: 1em;
  padding-top: 0.39rem;
  padding-bottom: 0.39rem;
  font-size: 3em;
  background-color: rgb(50, 50, 50);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-family: monospace;
}
.nice-digit-code-container-view .digit-code-container input:focus {
  outline: 0.2rem solid lime;
}
.nice-digit-code-container-view .digit-code-container input:hover {
  background-color: rgb(80, 80, 80);
}
@media only screen and (min-width: 45.15rem) {
  .nice-digit-code-container-view .digit-code-container input:nth-child(3n+0) {
    margin-right: 0.625rem;
  }
  .nice-digit-code-container-view .digit-code-container input:last-child {
    margin: 0 0 0 0;
    padding: 0;
  }
}
@media only screen and (max-width: calc(45.15rem - 0.001em)) {
  .nice-digit-code-container-view .digit-code-container {
    grid-template-columns: auto auto auto;
    grid-auto-flow: row;
  }
}