body {
    padding: 0;
    margin: 0;
}

.container {
    height: 280px;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
}

.video {
    width: 100%;
    height: 100%;
}

.gif {
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
}

h1 {
    display: inline-block;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: visible;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    text-shadow: -1px 0px 1px rgb(0, 0, 0), 0px 0px 2px rgb(0, 0, 0), 0px 0px 3px rgb(0, 0, 0), 0px 0px 4px #000, 0px 0px 5px rgb(0, 0, 0);
}

h2 {
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0px 0px 1px rgb(0, 0, 0), 0px 0px 2px rgb(0, 0, 0), 0px 0px 3px rgb(0, 0, 0), 0px 0px 4px #000, 0px 0px 5px rgb(0, 0, 0);
}

/* H1 uchun harflarni individual tebratish animatsiyasi */
.shake-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    white-space: pre;
}

.shake-span {
    display: inline-block;
    position: relative;
    animation: shake 0.5s infinite alternate;
}

@keyframes shake {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(-1px) rotate(-1deg);
    }

    50% {
        transform: translateX(1px) rotate(1deg);
    }

    75% {
        transform: translateX(-1px) rotate(-1deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}

/* H2 uchun to‘lqin animatsiyasi */
.wave-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wave-word {
    display: inline-block;
    margin-right: 7px;
}


.wave-span {
    display: inline-block;
    position: relative;
    animation: wave 0.5s infinite ease-in-out;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0);
    }
}