/* Set the size of the flip card, 
   center a div horizontally on a page 
   and make a 3D effect */
.flip-card {
  margin: 0 auto;
  width: 300px;
  height: 250px;
  perspective: 1000px;
}

/* Container for position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 #141c3a;
  border-radius: 12px;
}

/* rotateY do an horizontal flip when you move the mouse over the flip box container. */
.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
}

/* Style the front side */
.flip-card-front {
  background-image: url("https://github.com/RuslYusupov/CodePen/blob/main/images/dog.jpg?raw=true");
  background-size: cover;
  text-align: left;
}

.flip-card-front p {
  margin-left: 5px;
  margin-top: 0px;
  font-size: 1.5rem;
  color: #141c3a;
  width: 60%;
}

/* Style the back side */
.flip-card-back {
  text-align: center;
  background-color: #141c3a;
  color: white;
  transform: rotateY(180deg);
}

/* Style link */
a {
  color: gold;
  text-decoration: none;
}