.flex,
.flex__col {
    display: flex;
    justify-content: center;
}

.flex__col {
    flex-direction: column;
}

.bigText {
    position: relative;
    width: 100vw;
    height: 200vh;
    margin: 0px 0 20px 0;
    font-family: "KHTeka";
}

.bigText .bigText__inner {
    position: absolute;
    top: 70vh;
    left: 0;
    width: auto;
    height: 100vh;
    font-size: 40vh;
    font-weight: 600;
    line-height: 100%;
    white-space: nowrap;
    transform: translateY(-50%);
}

.bigText__sticker {
    position: absolute;
    font-size: 6vh;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: .3vh #000;
    text-shadow: .3vh .3vh 0 #000;
    padding: 1vh 4vh;
    border: .5vh solid #000;
    border-radius: 8px;
    background-image: url(../images/cloud.gif);
    background-blend-mode: difference;
    background-size: cover;
    box-shadow: -.3vh -.3vh 0 #fff, .3vh .3vh 0 #fff, -.3vh .3vh #fff, .3vh -.3vh #fff;
    transition: .25s ease-in-out;
}

.bigText__sticker:hover {
    color: #000;
    -webkit-text-stroke: .3vh #fff;
    text-shadow: .3vh .3vh 0 #fff;
}

.bigText__sticker1 {
    top: 30%;
    left: 25%;

    transform: rotate(5deg);
}

.bigText__sticker2 {
    top: 30%;
    left: 45%;
    transform: rotate(-5deg);
}

.bigText__sticker3 {
    top: 30%;
    left: 60%;
    transform: rotate(5deg);
}

.bigText__sticker4 {
    top: 30%;
    right: 10%;
    transform: rotate(-5deg);
}

:root {
    --purple: rgb(0, 129, 215);
    --violet: rgb(255, 255, 255);
    --pink: rgb(179, 197, 255);
}

@keyframes background-pan {
    from {
        background-position: 0% center;
    }

    to {
        background-position: -200% center;
    }
}

@keyframes scale {

    from,
    to {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

.magic {
    display: inline-block;
    position: relative;
}

.magic>.magic-star {
    --size: clamp(20px, 1.5vw, 30px);

    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
}

.magic>.magic-star>svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
}

.magic>.magic-star>svg>path {
    fill: var(--violet);
}

.magic>.magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(to right,
            var(--purple),
            var(--violet),
            var(--pink),
            var(--purple));
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}