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

body{
    background-image: url(https://wallpapers.com/images/hd/calming-beach-vacation-jqktljawpehu8rxi.jpg) !important;
}

.font-redHatText{
  font-family: 'Red Hat Text', sans-serif;
}
.bg-grayishBlue{
  background-color: hsl(237, 18%, 59%);
}
.text-grayishBlue{
  color: hsl(0, 0%, 100%);
}
.text-softRed{
  color: hsl(203, 95%, 68%);
}

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

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

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

.bgmostlyBlackBlue {
  background-color: hsl(234, 17%, 12%);
}

.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);
    }
}