custom.scss

$primary: #f5cfe3;
$secondary: #df99ff;
$info: #fcf4ff;
$warning: #ff0000;
$GrayishSkyBlue: #739db6;
$MinDarkBlue: #59b7e3;
$Gray: #adb5bd;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$custom-colors: (
  "GrayishSkyBlue": $GrayishSkyBlue,
  "MinDarkBlue": $MinDarkBlue,
  "Gray": $Gray,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap.scss";

body {
  background-color: #fcf4ff !important;
  height: 100vh !important;
  display: flex;
  justify-content: center;
}

#root {
  width: 414px !important;
  height: 100;
}

.btn-primary {
  background-color: $primary !important;
  border-color: $primary !important;
  color: #000 !important;
}
.btn-primary:hover {
  background-color: $secondary !important;
  border-color: $secondary !important;
  color: #fff !important;
}

.btn-info {
  background-color: $info !important;
  border-color: $info !important;
}