style.css

body {
  background: #0C0043; }

.center-block {
  border-radius: 2%; }

.center-block img {
  border-radius: 30px;
  background: #fff;
  margin-bottom: 30px; }

.progress-bar {
  background-color: #00FF87; }

.label {
  width: 20%;
  margin: 0 auto;
  padding: 7px; }

.btn-primary {
  background-color: #FF015B;
  border-color: #FF015B; }

.label-danger {
  background-color: #FF015B; }

.label-success {
  background-color: #00FF87; }

.logo {
  background: url("./imgs/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-position-x: center; }

.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #FF015B;
  border-color: #FF015B; }

.header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 300px; }

h5 {
  color: #f0ad4e; }

.progress p {
  color: #337ab7; }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding-left: 0px;
  padding-right: 0px; }

.thumb {
  height: 106.5px;
  width: 106.5px;
  margin: 5px;
  margin-bottom: 16px; }

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
  background-color: #D6D4D4 !important;
  border-color: #fff !important; }

.card-container {
  perspective: 800px;
  position: relative;
  height: 106.5px;
  width: 106.5px;
  margin: 5px;
  margin-bottom: 16px; }

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s; }

.card a {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }

.btn {
  width: 50%;
  margin: 0 auto; }

.card .back {
  transform: rotateY(180deg); }

.flipped {
  transform: rotateY(180deg); }

.chosen {
  box-shadow: 0 0 50px #ffd700,0 0 150px #ffd700 !important; }

.matched {
  visibility: hidden; }

.center-block {
  text-align: center; }

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
  border-color: #0C0043 !important; }