styles.scss

.app {
  @import "./navbar";
  .rule {
    padding: 0 2rem;
    margin-bottom: 2rem;
  }
  .container {
    margin-top: 8rem;
  }
  .title {
    display: flex;
    justify-content: center;

    h1 {
      font-size: 30px;
      margin-bottom: 1rem;
      box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.02),
        0 8px 64px 0 rgba(10, 14, 29, 0.08);
      border-radius: 3px;
      padding: 0.5rem 1rem;
    }
  }
  margin: 5%;
  .card {
    margin-bottom: 1rem;
    .card-title {
      margin-left: 1.3rem;
    }

    .list-group {
      .list-group-item {
        display: flex;
        margin-bottom: 0.5rem;
        border: none;
        border-bottom: 1px solid #ececec;
        &:last-child {
          border-bottom: none;
        }
        .number {
          margin-right: 1rem;
          padding: 0.3rem;
          padding-left: 0.7rem;
          background: rgb(163, 163, 163);
          border-radius: 50%;
          width: 2rem;
          height: 2rem;
        }
        cursor: pointer;
      }
    }
    box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.02),
      0 8px 64px 0 rgba(10, 14, 29, 0.08);
    border-radius: 3px;
    border: none;
  }
}
.modal {
  .modal-header {
    border: none;
    display: flex;
    justify-content: center;
  }
  .modal-body {
    padding: 3rem;
    padding-top: 0;
    .numbers-container {
      display: flex;
      justify-content: center;
      .numbers {
        margin-top: 1rem;
        box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.02),
          0 8px 64px 0 rgba(10, 14, 29, 0.08);
        border-radius: 1rem;
        font-size: 2em;
        width: 10rem;
        padding: 0.5rem;
        display: flex;
        justify-content: space-around;
        .number {
          &.correct {
            color: #38bb38;
          }
          &.incorrect {
            color: #e24646;
          }
        }
      }
    }
  }
  .modal-footer {
    border: none;
    button {
      width: 100%;
      background: white;
      border: none;
      height: 4rem;
      font-size: 1.2em;
      color: black;
      box-shadow: 0 4px 32px 0 rgba(10, 14, 29, 0.02),
        0 8px 64px 0 rgba(10, 14, 29, 0.08);
      &:hover {
        background: rgb(219, 219, 219);

        color: black;
      }
    }
  }
}