html {
    height: 22vw;
    min-height: 350px;
    margin: 0;
    padding: 0;
}

body {
    min-height: 350px;
    height: clamp(8vw, 9vw, 10vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.flip-clock {
    text-align: center;
    perspective: 2-0px;
    margin: 15px 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: 2.5em;
    font-size: clamp(9px, 3vw, 3vw);
}

.card {
    display: block;
    position: relative;
    padding-bottom: 0.72em;
    font-size: 5vw;
    line-height: 0.95;
}

.card__top,
.card__bottom,
.card__back::before,
.card__back::after {
    display: block;
    height: 0.72em;
    color: #ccc;
    background: #222;
    padding: 0.25em 0.10em;
    border-radius: 0.15em 0.15em 0 0;
    backface-visiblity: hidden;
    transform-style: preserve-3d;
    width: 2.25em;
    transform: translateZ(0);
}

.card__bottom {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    border-top: solid 1px #000;
    background: #393939;
    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(0.37, 0.01, 0.94, 0.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(0.15, 0.45, 0.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;
    }
}

.effect {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    z-index: 1;
}

.shell {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50px;
}

.clockshell {
    position: relative;
    top: 5px;
    width: 100%;
}

.celebrate {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.message {
    position: relative;
    text-align: center;
    font-size: 3.5vw;
    margin: 20px;
}

.card-font-1 {
    font-size: 14.5vw;
}

.card-font-2 {
    font-size: 13.5vw;
}

.card-font-3 {
    font-size: 12.5vw;
}

.card-font-4 {
    font-size: 11.5vw;
}

@media only screen and (max-width:500px) {
    .message {
        font-size: 6.5vw;
    }
    /* .card {
    font-size: 12.5vw;
    } */
    .shell {
        top: 0px;
    }
    body {
        height: 100px;
    }
}


/* CSS for snow - depends on confettiRain */

.snow {
    opacity: 0;
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transition: 500ms ease;
    animation: confettiRain 5s infinite;
}


/* CSS for confetti*/

.confetti {
    opacity: 0;
    position: absolute;
    width: 1rem;
    height: 1.2rem;
    transition: 500ms ease;
    animation: confettiRain 5s infinite;
}

@keyframes confettiRain {
    0% {
        opacity: 1;
        margin-top: -100vh;
        margin-left: -200px;
    }
    100% {
        opacity: 1;
        margin-top: 100vh;
        margin-left: 200px;
    }
}


/*
.confetti-wrapper {
    z-index: 100;
}
*/


/* CSS for fireworks*/

.fireworks>.before,
.fireworks>.after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.fireworks>.after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 124px -99.6666666667px #0073ff, 154px -119.6666666667px #ccff00, 210px -230.6666666667px blue, 214px -411.6666666667px #00d0ff, -235px -27.6666666667px #9500ff, 163px -251.6666666667px #ff4d00, 172px -168.6666666667px #11ff00, 163px -378.6666666667px #0dff00, 217px -351.6666666667px #0084ff, -172px 2.3333333333px #00ffc8, 102px -384.6666666667px #bb00ff, 54px -1.6666666667px #c400ff, 156px 14.3333333333px #fff700, -163px -75.6666666667px #48ff00, -36px 66.3333333333px #00ff91, -92px -8.6666666667px #9900ff, 146px 0.3333333333px #0044ff, 137px -220.6666666667px #ffea00, 36px -90.6666666667px #00ff66, 162px -87.6666666667px #ff006a, -6px -184.6666666667px #00ff80, 24px -259.6666666667px #ff00ee, 176px -110.6666666667px #fffb00, -192px -80.6666666667px #ff00ae, -183px -160.6666666667px #00ffb7, -176px -224.6666666667px #ff00f2, -245px 60.3333333333px #00ff99, -160px -309.6666666667px #ff0059, -43px -71.6666666667px #e600ff, -188px -387.6666666667px #ff2b00, -31px -321.6666666667px #ff00bf, -249px -329.6666666667px #ffbb00, 249px -220.6666666667px #4dff00, 187px 4.3333333333px #00f2ff, -162px -212.6666666667px #0009ff, -116px -147.6666666667px #00ffae, -201px -59.6666666667px #0004ff, -163px 80.3333333333px #eeff00, -220px 75.3333333333px #9100ff, 45px -301.6666666667px #0091ff, -186px -278.6666666667px #ddff00, -24px -127.6666666667px #ffd900, 22px 35.3333333333px #9dff00, 229px -81.6666666667px #ff0400, 239px -335.6666666667px #51ff00, 89px -58.6666666667px #0066ff, 200px -251.6666666667px #5e00ff, 200px -393.6666666667px #00b3ff, 132px 54.3333333333px #0084ff, 205px -222.6666666667px #2bff00, -120px -291.6666666667px #006fff;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 124px -99.6666666667px #0073ff, 154px -119.6666666667px #ccff00, 210px -230.6666666667px blue, 214px -411.6666666667px #00d0ff, -235px -27.6666666667px #9500ff, 163px -251.6666666667px #ff4d00, 172px -168.6666666667px #11ff00, 163px -378.6666666667px #0dff00, 217px -351.6666666667px #0084ff, -172px 2.3333333333px #00ffc8, 102px -384.6666666667px #bb00ff, 54px -1.6666666667px #c400ff, 156px 14.3333333333px #fff700, -163px -75.6666666667px #48ff00, -36px 66.3333333333px #00ff91, -92px -8.6666666667px #9900ff, 146px 0.3333333333px #0044ff, 137px -220.6666666667px #ffea00, 36px -90.6666666667px #00ff66, 162px -87.6666666667px #ff006a, -6px -184.6666666667px #00ff80, 24px -259.6666666667px #ff00ee, 176px -110.6666666667px #fffb00, -192px -80.6666666667px #ff00ae, -183px -160.6666666667px #00ffb7, -176px -224.6666666667px #ff00f2, -245px 60.3333333333px #00ff99, -160px -309.6666666667px #ff0059, -43px -71.6666666667px #e600ff, -188px -387.6666666667px #ff2b00, -31px -321.6666666667px #ff00bf, -249px -329.6666666667px #ffbb00, 249px -220.6666666667px #4dff00, 187px 4.3333333333px #00f2ff, -162px -212.6666666667px #0009ff, -116px -147.6666666667px #00ffae, -201px -59.6666666667px #0004ff, -163px 80.3333333333px #eeff00, -220px 75.3333333333px #9100ff, 45px -301.6666666667px #0091ff, -186px -278.6666666667px #ddff00, -24px -127.6666666667px #ffd900, 22px 35.3333333333px #9dff00, 229px -81.6666666667px #ff0400, 239px -335.6666666667px #51ff00, 89px -58.6666666667px #0066ff, 200px -251.6666666667px #5e00ff, 200px -393.6666666667px #00b3ff, 132px 54.3333333333px #0084ff, 205px -222.6666666667px #2bff00, -120px -291.6666666667px #006fff;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 124px -99.6666666667px #0073ff, 154px -119.6666666667px #ccff00, 210px -230.6666666667px blue, 214px -411.6666666667px #00d0ff, -235px -27.6666666667px #9500ff, 163px -251.6666666667px #ff4d00, 172px -168.6666666667px #11ff00, 163px -378.6666666667px #0dff00, 217px -351.6666666667px #0084ff, -172px 2.3333333333px #00ffc8, 102px -384.6666666667px #bb00ff, 54px -1.6666666667px #c400ff, 156px 14.3333333333px #fff700, -163px -75.6666666667px #48ff00, -36px 66.3333333333px #00ff91, -92px -8.6666666667px #9900ff, 146px 0.3333333333px #0044ff, 137px -220.6666666667px #ffea00, 36px -90.6666666667px #00ff66, 162px -87.6666666667px #ff006a, -6px -184.6666666667px #00ff80, 24px -259.6666666667px #ff00ee, 176px -110.6666666667px #fffb00, -192px -80.6666666667px #ff00ae, -183px -160.6666666667px #00ffb7, -176px -224.6666666667px #ff00f2, -245px 60.3333333333px #00ff99, -160px -309.6666666667px #ff0059, -43px -71.6666666667px #e600ff, -188px -387.6666666667px #ff2b00, -31px -321.6666666667px #ff00bf, -249px -329.6666666667px #ffbb00, 249px -220.6666666667px #4dff00, 187px 4.3333333333px #00f2ff, -162px -212.6666666667px #0009ff, -116px -147.6666666667px #00ffae, -201px -59.6666666667px #0004ff, -163px 80.3333333333px #eeff00, -220px 75.3333333333px #9100ff, 45px -301.6666666667px #0091ff, -186px -278.6666666667px #ddff00, -24px -127.6666666667px #ffd900, 22px 35.3333333333px #9dff00, 229px -81.6666666667px #ff0400, 239px -335.6666666667px #51ff00, 89px -58.6666666667px #0066ff, 200px -251.6666666667px #5e00ff, 200px -393.6666666667px #00b3ff, 132px 54.3333333333px #0084ff, 205px -222.6666666667px #2bff00, -120px -291.6666666667px #006fff;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 124px -99.6666666667px #0073ff, 154px -119.6666666667px #ccff00, 210px -230.6666666667px blue, 214px -411.6666666667px #00d0ff, -235px -27.6666666667px #9500ff, 163px -251.6666666667px #ff4d00, 172px -168.6666666667px #11ff00, 163px -378.6666666667px #0dff00, 217px -351.6666666667px #0084ff, -172px 2.3333333333px #00ffc8, 102px -384.6666666667px #bb00ff, 54px -1.6666666667px #c400ff, 156px 14.3333333333px #fff700, -163px -75.6666666667px #48ff00, -36px 66.3333333333px #00ff91, -92px -8.6666666667px #9900ff, 146px 0.3333333333px #0044ff, 137px -220.6666666667px #ffea00, 36px -90.6666666667px #00ff66, 162px -87.6666666667px #ff006a, -6px -184.6666666667px #00ff80, 24px -259.6666666667px #ff00ee, 176px -110.6666666667px #fffb00, -192px -80.6666666667px #ff00ae, -183px -160.6666666667px #00ffb7, -176px -224.6666666667px #ff00f2, -245px 60.3333333333px #00ff99, -160px -309.6666666667px #ff0059, -43px -71.6666666667px #e600ff, -188px -387.6666666667px #ff2b00, -31px -321.6666666667px #ff00bf, -249px -329.6666666667px #ffbb00, 249px -220.6666666667px #4dff00, 187px 4.3333333333px #00f2ff, -162px -212.6666666667px #0009ff, -116px -147.6666666667px #00ffae, -201px -59.6666666667px #0004ff, -163px 80.3333333333px #eeff00, -220px 75.3333333333px #9100ff, 45px -301.6666666667px #0091ff, -186px -278.6666666667px #ddff00, -24px -127.6666666667px #ffd900, 22px 35.3333333333px #9dff00, 229px -81.6666666667px #ff0400, 239px -335.6666666667px #51ff00, 89px -58.6666666667px #0066ff, 200px -251.6666666667px #5e00ff, 200px -393.6666666667px #00b3ff, 132px 54.3333333333px #0084ff, 205px -222.6666666667px #2bff00, -120px -291.6666666667px #006fff;
    }
}

@keyframes bang {
    to {
        box-shadow: 124px -99.6666666667px #0073ff, 154px -119.6666666667px #ccff00, 210px -230.6666666667px blue, 214px -411.6666666667px #00d0ff, -235px -27.6666666667px #9500ff, 163px -251.6666666667px #ff4d00, 172px -168.6666666667px #11ff00, 163px -378.6666666667px #0dff00, 217px -351.6666666667px #0084ff, -172px 2.3333333333px #00ffc8, 102px -384.6666666667px #bb00ff, 54px -1.6666666667px #c400ff, 156px 14.3333333333px #fff700, -163px -75.6666666667px #48ff00, -36px 66.3333333333px #00ff91, -92px -8.6666666667px #9900ff, 146px 0.3333333333px #0044ff, 137px -220.6666666667px #ffea00, 36px -90.6666666667px #00ff66, 162px -87.6666666667px #ff006a, -6px -184.6666666667px #00ff80, 24px -259.6666666667px #ff00ee, 176px -110.6666666667px #fffb00, -192px -80.6666666667px #ff00ae, -183px -160.6666666667px #00ffb7, -176px -224.6666666667px #ff00f2, -245px 60.3333333333px #00ff99, -160px -309.6666666667px #ff0059, -43px -71.6666666667px #e600ff, -188px -387.6666666667px #ff2b00, -31px -321.6666666667px #ff00bf, -249px -329.6666666667px #ffbb00, 249px -220.6666666667px #4dff00, 187px 4.3333333333px #00f2ff, -162px -212.6666666667px #0009ff, -116px -147.6666666667px #00ffae, -201px -59.6666666667px #0004ff, -163px 80.3333333333px #eeff00, -220px 75.3333333333px #9100ff, 45px -301.6666666667px #0091ff, -186px -278.6666666667px #ddff00, -24px -127.6666666667px #ffd900, 22px 35.3333333333px #9dff00, 229px -81.6666666667px #ff0400, 239px -335.6666666667px #51ff00, 89px -58.6666666667px #0066ff, 200px -251.6666666667px #5e00ff, 200px -393.6666666667px #00b3ff, 132px 54.3333333333px #0084ff, 205px -222.6666666667px #2bff00, -120px -291.6666666667px #006fff;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {
    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {
    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {
    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {
    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {
    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}


/*Balloons*/

.balloon {
    height: 75px;
    width: 55px;
    border-radius: 75% 75% 70% 70%;
    position: relative;
}

.balloon:before {
    content: "";
    height: 75px;
    width: 1px;
    padding: 1px;
    background-color: #FDFD96;
    display: block;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    margin: auto;
}

.balloon:after {
    content: "▲";
    text-align: center;
    display: block;
    position: absolute;
    color: inherit;
    top: 70px;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes float {
    from {
        transform: translateY(100vh);
        opacity: 1;
    }
    to {
        transform: translateY(-300vh);
        opacity: 0;
    }
}