@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@700&display=swap');

.font-redHatText{
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.text-grayishBlue{
  color: hsl(218, 41%, 11%);
}
.text-softRed{
  color: hsl(345, 100%, 53%);
}

.bg-darkDesaturatedBlue {
  background-color: hsl(236, 21%, 26%);
}

.bg-slightlyDarkerDesBlue {
  background-color: hsl(236, 21%, 20%);
}

.bg-veryDarkBlue{
  background-color: hsl(235, 16%, 14%);
}

.bg-light {
  background-color: hsl(300, 2%, 90%);
}

.text-release-date {
  font-size: 2.5rem; /* Larger font size for desktop */
  color: hsl(345, 100%, 53%); /* A vibrant red color */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Text shadow for depth */
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.container-shadow{
    -webkit-box-shadow: 0px 17px 12px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 17px 12px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 17px 12px 1px rgba(0,0,0,0.75);
}

.bottom-flip-shadow{
    -webkit-box-shadow: inset 0px -2px 1px 0px rgba(0,0,0,0.42);
    -moz-box-shadow: inset 0px -2px 1px 0px rgba(0,0,0,0.42);
    box-shadow: inset 0px -2px 1px 0px rgba(0,0,0,0.42);
}

.top-flip-shadow{
    -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.42);
    -moz-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.42);
    box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.42);
}

.flip-card-top {
    animation: flip-top 350ms ease-in;
    transform-origin: bottom;
}

@keyframes flip-top {
    100% {
        transform: rotateX(90deg);
    }
}

.flip-card-bottom {
    animation: flip-bottom 350ms ease-in-out 350ms;
    transform-origin: top;
    transform: rotateX(90deg);
}

@keyframes flip-bottom {
    100% {
        transform: rotateX(0deg);
    }
}