.gift-card{
    transition: transform 0.6s;
    transform-style: preserve-3d;
    perspective: 500px;
}

.gift-content {
    transition: transform 1s;
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
}

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

.front,
.back {
    /*
    line-height: 300px;
    color: #03446A;
    text-align: center;
    border-radius: 5px;
     */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    backface-visibility: hidden;
    
}

.ag .back {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  transform: rotateY( 180deg ) translateX(50%) translateY(-50%);
  border-radius: 15px;
  position: absolute;
  height: 101%;
  width: 101%;
  background-color: #101010;
  background-image: none;
  display: flex;
  flex-direction: column;
}

.ag .back h3 {
  padding-left: 20px;
}

.ag .back p {
  padding-top: 0px;
  padding-left: 20px;
  font-weight: 600;
}

.ag .back textarea {
  justify-self: center;
  margin-top: 10px;
  font-size: 0.8em;
  padding: 5px;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 5px;
  width: 80%;
  margin: 10%;
  height: 37px;
  background-color: #222;
  color: white;
  resize: none;
  border: 1px solid #5835f3;
}

.ag .back button {
  justify-self: center;
  align-self: center;
  font-size: 0.8em;
  padding: 10px;
  padding-bottom: 20px;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 5px;
  width: 80%;
  height: 37px;
  background-color: #5835f3;
  color: white;
  border: none;
  cursor: pointer;
}
.ag .back button:hover {
  background-color: #7a4df3;
}
.ag .copy-container {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
}

.ag .back a {
  visibility: hidden;
  position: relative;
  align-self: flex-end;
  padding-right: 21px;
  font-size: 0.6em;  
  color: #5835f3;
}

.valo .back {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  transform: rotateY( 180deg ) translateX(50%) translateY(-50%);
  border-radius: 15px;
  position: absolute;
  height: 101%;
  width: 101%;
  background-image: url("/static/img/valo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.valo .back h3 {
  padding-left: 20px;
}

.valo .back p {
  padding-top: 0px;
  padding-left: 20px;
  font-weight: 600;
}

.valo .back textarea {
  justify-self: center;
  margin-top: 10px;
  font-size: 0.7em;
  padding: 5px;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 5px;
  width: 80%;
  margin: 10%;
  height: 37px;
  background-color: #222;
  color: white;
  resize: none;
  border: 1px solid #ff5454;
}

.valo .back button {
  justify-self: center;
  align-self: center;
  font-size: 0.8em;
  padding: 10px;
  padding-bottom: 20px;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 5px;
  width: 80%;
  height: 37px;
  background-color: #fa4943;
  color: white;
  border: none;
  cursor: pointer;
}
.valo .back button:hover {
  background-color: #ff6a6a;
}
.valo .copy-container {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
}

.valo .back a {
  visibility: hidden;
  position: relative;
  align-self: flex-end;
  padding-right: 21px;
  font-size: 0.6em;  
  color: #ffffff;
}

.hint .back {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  transform: rotateY( 180deg ) translateX(50%) translateY(-50%);
  border-radius: 15px;
  position: absolute;
  height: 101%;
  width: 101%;
  background-image: url("/static/img/gift3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.steam-gift .back{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  transform: rotateY( 180deg ) translateX(50%) translateY(-50%);
  border-radius: 15px;
  position: absolute;
  height: 101%;
  width: 101%;
  background-image: url("/static/img/steam-gift.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}