body{
    background-color: whitesmoke;
    font-size: 1.2vw;
}

.flip-card {
    background-color: transparent;
    width: 23em;
    height: 14em;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: fixed;
    top: 30vh;
    left: 30vw;
    transform: rotate(-9deg);
  }

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

  #more {
    position: absolute;
    bottom: 3em;
    right: -0.5em;
    transform: rotate(90deg);
  }

  #more:hover {
    color:lavenderblush;
  }

  #next {
    margin-top: -0.4em;
    margin-bottom: -0.8em;
    text-decoration: underline;
  }

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

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

/* Style the front side */
.flip-card-front {
    color: #434625;
    background-color: #03a9f485;
    padding: 10px 20px;
}

/* Style the back side */
.flip-card-back {
    color: #434625;
    background-color: #03a9f485;
    transform: rotateY(180deg);
    padding: 10px 20px;
}

a{
  color:palegreen;
}

a:hover {
  color:crimson; 
}

@media screen and (max-width: 600px) {
  body {
    font-size: 3vw;
  }
    .flip-card {
        top: 15vh;
        left: 5vw;
        padding: 0px 20px;
        transform: rotate(81deg) scale(1.5) translateX(90px);
    }

    .flip-card-back {
        transform: rotateY(180deg) translateX(12%);
    }
}