#flipCard {
  padding-inline: 32px;
  background-image: linear-gradient(90deg, #fffff0 50%, #849dae 50%); /* ivory | Blue Stone lightness 60% */
}

#flipCard header {
  margin: 60px 0 2px 0;
}

#flipCard h2 {
  font: normal small-caps 400 30px "Raleway", sans-serif; 
  text-transform: capitalize;
  padding: 36px 0 5px 0;
  height: 77px;
}

#flipCard p.description {
  border-top: 3px inset #577284; /* Blue Stone */
}

div.rotateCard { /* flex box */
  padding: 71px 0 101px 0; /* visual effect */
  width: 100%;
}

#flipCard p.alertForMobile {
  font: 400 1.3rem "Raleway", sans-serif;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.6;
  color: #800000;
}

/* link */
#howToFlipCard {
  display: inline-block;
  margin: 0; /* remove property in common */
  padding: 0; /* remove property in common */
}

/* Special button with infinite movement */
/* Shorthand: -name| -duration | -timing-function | -delay: 0s | -iteration-count | -direction */  
div.arrowShapeContainer {
  width: 65px;
  height: 65px;
  margin: 50px 0;
  border-radius: 50%;
  background-color: rgba(255,255,240,0.2);
  position: relative;
  top: -10px;
  left: 0;
  animation: moveUpDown 2s linear infinite alternate;
  -webkit-animation: moveUpDown 2s linear infinite alternate;
  -moz-animation: moveUpDown 2s linear infinite alternate;
}

@keyframes moveUpDown {
  from {top:-10px;}
  to {top: 10px;}
}

@-webkit-keyframes moveUpDown {
  from {top:-10px;}
  to {top: 10px;}
}

@-moz-keyframes moveUpDown {
  from {top:-10px;}
  to {top: 10px;}
}

#arrowShape {
  visibility: visible;
  display: inline-block;
  border: solid #577284;
  border-width: 0 3px 3px 0;
  margin: 20px 0 0 0;
  padding: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* Flip a Card */
div.flip-card {/* boxShadow *//* flex item */
  width: 400px;
  height: 400px;
  background-color: rgba(0,0,0,0);
  border: 4px groove rgba(0,0,0,0.5);
  border-radius: 5px;
  perspective: 1000px; /* the 3D effect */
}

/* This container is needed to position the front and back side. */
div.flip-card-inner {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

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

img.alembic { /* responsive */
  max-width: 500px;
  margin-inline: auto;
}

/* Style the back side */
div.flip-card-back {
  transform: rotateY(180deg); /* Horizontal Flip */
  background-color: #fffff0;
  background-image: repeating-linear-gradient(90deg,rgba(87,114,132,0.8),rgba(255,255,240,0.5) 0.95%);
}

blockquote.flipCardText {/* flex box */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none; /* remove property in common */
  padding: 0; /* remove property in common */
  color: #fffff0;
  background-color: rgba(0,0,0,0.7);
}

blockquote.flipCardText q { /* lex item */
    font: 400 22px 'Raleway', sans-serif;
    line-height: 1.6;
    width: 400px; /* change property in common */
    margin: 0; /* remove propertyin common */
    padding: 20px 15px 0 15px;
  }

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

}

/* BREAKPOINTS WITH */
/* CSS3 MEDIA QUERIES 
*********************
*/
/* Very small devices | Reduce the size of some elements.
********************************************************* */
@media only screen and (max-width: 432px) {
  /* Flip a Card */
  
  div.flip-card {/* boxShadow *//* flex item */
    width: 288px;
    height: 288px;
  }

  blockquote.flipCardText {/* flex box */
    width: 98.5%;
    height: 98.5%;
  }

  blockquote.flipCardText q { /* lex item */
    font: 400 18px 'Raleway', sans-serif;
    width: 270px;
  }
}

@media only screen and (max-width: 599px) {
  #flipCard {
    padding-inline: 16px;
  }

  #flipCard p.alertForMobile {
    text-align: left;
    margin: 0;
    border-left: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up)
******************************************************************/
@media only screen and (min-width: 600px) and (orientation: landscape){
  #flipCard {
    padding-inline: 0;
  }
}

/* Medium devices (landscape tablets, 768px and up)
***************************************************/
@media only screen and (min-width: 768px) and (orientation: landscape){
  #flipCard h2 {
    font: normal small-caps 400 34px "Raleway", sans-serif;
  }

  #flipCard p.description {
    font: 400 24px "Raleway", sans-serif;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up)
******************************************************************/
@media only screen and (min-width: 1200px) {
  #flipCard {
    background-image: linear-gradient(151deg, #849dae 50%, #fffff0 50%); /* blue stone  | ivory */
  }

  div.rotateCard { /* flex box */
    padding: 71px 0 101px 0; /* visual effect */
    flex-direction: row;
  }

  #flipCard p.alertForMobile {
    max-width: 525px;
  }

  #flipCard p.comment {
    max-width: 600px;
  }

  /* Shorthand: -name| -duration | -timing-function | -delay: 0s | -iteration-count | -direction */  
  div.arrowShapeContainer {
    margin: 25px 67px 0 67px;
    background-image: repeating-linear-gradient(90deg,rgba(87,114,132,1),rgba(255,255,240,0.5) 1%);
    position: relative;
    left: -10px;
    animation: moveLeftRight 2s linear infinite alternate; 
    -webkit-animation: moveLeftRight 2s linear infinite alternate; 
    -moz-animation: moveLeftRight 2s linear infinite alternate;
  }

  @keyframes moveLeftRight {
    from {left:-10px;}
    to {left: 10px;}
  }

  @-webkit-keyframes moveLeftRight {
    from {left:-10px;}
    to {left: 10px;}
  }

  @-moz-keyframes moveLeftRight {
    from {left:-10px;}
    to {left: 10px;}
  }

  #arrowShape {
    transform: rotate(-45deg);
    border: solid #fffff0;
    border-width: 0 3px 3px 0;
  }
}