/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,500;0,700;1,300&family=DM+Sans:wght@300&display=swap");

/* CSS Variables */
:root {
  --primary-color: #ff7c00;
  --secondary-color: #acc8d7;
  --secondary-color-dark: #85a5b6;
  --background-color: rgb(252, 243, 243);
  --accent-color: #8a1a40;
  --font-family-heading: "Work Sans", sans-serif;
  --font-family-body: "DM Sans", sans-serif;
  --text-color-dark: #36454f;
  --text-color-light: #ffffff;
}

/* flip card parent is static, sets the size of the card and is transparent, this is what user hovers on  */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 382px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  border-radius: 0.375rem;
}

/* children are not static */

/* here is where the animation takes place */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; /* adds 3D look to the flip */
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.375rem;
}

.flip-card:hover .flip-card-inner,
.flip-card.flip .flip-card-inner {
  /*flip for mobile and desktop */
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /* switches position of the front and back card */
}

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

.flip-card-back {
  border-radius: 0.375rem;
  /* matches card component default border radius */
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*rotates opposite side so that backface hides it when not hovered */
}

#hacks-articles-section h1 {
  text-shadow: none;
}

#hacks-articles-section h2 {
  text-decoration: underline;
}

.card-body {
  overflow: hidden; /* removes overflowing paragraph from sight */
}

.card-title-front {
  text-transform: uppercase;
  font-weight: 900;
}

.card-title-back {
  text-transform: capitalize;
}

#hacks-articles-section .card-title a {
  text-align: center;
}

.card-body p {
  text-align: justify;
}

@media screen and (max-width: 576px) {
  .flip-card {
    max-width: 250px;
    max-height: 360px;
  }

  #hacks-articles-section .row .col-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}