html {
   height: 100%;
}
body {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.content{
   margin-top: 9%;
}
.background-image {
/*                background-image: url('https://media.cnn.com/api/v1/images/stellar/prod/231108150241-01-diwali-celebrations-card-image.jpg?c=16x9');*/
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
position: absolute;
background-color: #e63986;
top: 0;
left: 0;
}
.rainbow-button {
    display: inline-block;
    padding: 5px 28px;
    font-size: 1.5em;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    background-image: linear-gradient(45deg, #606060, #606060, #606060, #949494, #949494, #606060, #606060);
    background-size: 200%;
    transition: 0.4s;
}

.rainbow-button:hover {
    background-position: right;
    color: white;
}
.flip-clock {
   text-align: center;
   perspective: 400px;
   margin: 20px auto;
}
.flip-clock *, .flip-clock *:before, .flip-clock *:after {
   box-sizing: border-box;
}
.flip-clock__piece {
   display: inline-block;
   margin: 0 5px;
}
.flip-clock__slot {
   font-size: 2vw;
   color: #fff;
   font-weight: bold;
}
.card {
   display: block;
   position: relative;
   padding-bottom: 0.72em;
   font-size: 7vw;
   line-height: 0.95;
   background: transparent;
   border: none !important;
}
.card__top, .card__bottom, .card__back::before, .card__back::after {
   display: block;
   height: 0.72em;
   color: #fff;
   background: #cb9346;
   padding: 0.25em 0.25em;
   border-radius: 0.15em 0.15em 0 0;
   backface-visiblity: hidden;
   transform-style: preserve-3d;
   width: 1.8em;
   transform: translateZ(0);
}
.card__bottom {
   color: #FFF;
   position: absolute;
   top: 50%;
   left: 0;
   border-top: solid 1px #cb9346;
   background: #cb9346;
   border-radius: 0 0 0.15em 0.15em;
   pointer-events: none;
   overflow: hidden;
}
.card__bottom::after {
   display: block;
   margin-top: -0.72em;
}
.card__back::before, .card__bottom::after {
   content: attr(data-value);
}
.card__back {
   position: absolute;
   top: 0;
   height: 100%;
   left: 0%;
   pointer-events: none;
}
.card__back::before {
   position: relative;
   z-index: -1;
   overflow: hidden;
}
.flip .card__back::before {
   animation: flipTop 0.3s cubic-bezier(.37,.01,.94,.35);
   animation-fill-mode: both;
   transform-origin: center bottom;
}
.flip .card__back .card__bottom {
   transform-origin: center top;
   animation-fill-mode: both;
   animation: flipBottom 0.6s cubic-bezier(.15,.45,.28,1);
}
@keyframes flipTop {
   0% {
       transform: rotateX(0deg);
       z-index: 2;
   }
   0%, 99% {
       opacity: 0.99;
   }
   100% {
       transform: rotateX(-90deg);
       opacity: 0;
   }
}
@keyframes flipBottom {
   0%, 50% {
       z-index: -1;
       transform: rotateX(90deg);
       opacity: 0;
   }
   51% {
       opacity: 0.99;
   }
   100% {
       opacity: 0.99;
       transform: rotateX(0deg);
       z-index: 5;
   }
}
.header-page{
    font-weight: bold;
}
@media screen and (max-width: 992px) {
    .card {
     font-size: 10vw;
   }
   .flip-clock__slot {
    font-size: 4vw;
   }
   .content{
      margin-top: 30%;
   }
}
.modal-content{
    background-color: #d9d7d7d4 !important;
}