html,
body {
        height: 100%;
        margin: 0px;
        padding: 0px;
}

.main {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #fdfdfd;
}

.title {
        font-family: 'Roboto', sans-serif;
        color: #6400ff;
}

.description {
        font-family: 'Noto Sans Arabic', sans-serif;
        text-decoration: none;
}

.main img {
        width: 100px;
}

.mb-1 {
        margin-bottom: 1rem;
}

#countdown {
        font-size: 20px;
        font-weight: bold;
        color: #6400ff;
        font-family: 'Roboto';
}

.bounce-in-top {
        -webkit-animation: bounce-in-top 2s both;
        animation: bounce-in-top 2s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-1-23 14:32:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
        0% {
                -webkit-transform: translateY(-500px);
                transform: translateY(-500px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                opacity: 0;
        }

        38% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
                opacity: 1;
        }

        55% {
                -webkit-transform: translateY(-65px);
                transform: translateY(-65px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        72% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        81% {
                -webkit-transform: translateY(-28px);
                transform: translateY(-28px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        90% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        95% {
                -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }
}

@keyframes bounce-in-top {
        0% {
                -webkit-transform: translateY(-500px);
                transform: translateY(-500px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                opacity: 0;
        }

        38% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
                opacity: 1;
        }

        55% {
                -webkit-transform: translateY(-65px);
                transform: translateY(-65px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        72% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        81% {
                -webkit-transform: translateY(-28px);
                transform: translateY(-28px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        90% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        95% {
                -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }
}