@font-face {
  font-family: Montserrat;
  src: url('Montserrat-Medium.ttf');
}

:root {
  --front-color: #2980b9;
  --back-color: #019875;

  --card-width: 300px;
  --card-height: 300px;
}

.btn-fcards {
  width: 100%;
  text-transform: uppercase !important;
}

.border-radius {
  border-radius: 10px;
}

.middle-center {
  align-content: center;
}

/* Flip-card container: sets perspective */
.flip-card {
  background-color: transparent;
  width: var(--card-width);
  height: var(--card-height);
  perspective: 1000px;
  margin-left: calc(50% - 150px); /* centers a 300px card */
}

/* The "inner" that we rotate */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Instead, flip when the .flip-card container has .flipped */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Front / back faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 1rem;
}

.flip-card-front {
  background-color: var(--front-color);
  color: white;
}

.flip-card-back {
  background-color: var(--back-color);
  color: white;
  transform: rotateY(180deg);
  text-transform: none;
}