body {
    margin: 0;

    overflow: hidden;
}

.container {
    height: 100vh;

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main-text {
    color: red;
    
    font-family: 'Manrope', sans-serif;
    font-size: clamp(48px, 15vw, 150px);
    font-weight: 500;
}

.six-seven {
    position: absolute;
    z-index: 1;

    color: blue;
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;

    user-select: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Первые 67 */
.six-seven:nth-of-type(1) {
    top: 12%;
    left: 12%;
    animation: rotateOne 3s linear infinite;
    font-size: clamp(36px, 11vw, 160px);
}

/* Вторые 67 */
.six-seven:nth-of-type(2) {
    top: 20%;
    right: 15%;
    animation: rotateTwo .5s linear infinite;
    font-size: clamp(36px, 15vw, 160px);
}

/* Третьи 67 */
.six-seven:nth-of-type(3) {
    bottom: 12%;
    left: 45%;
    animation: rotateThree 1s linear infinite;
    font-size: clamp(36px, 21vw, 160px);
}


/* Разные направления и скорости */

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

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

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

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

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

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Мобильные устройства */
@media (max-width: 600px) {
    .six-seven:nth-of-type(1) {
        top: 15%;
        left: 8%;
    }

    .six-seven:nth-of-type(2) {
        top: 25%;
        right: 10%;
    }

    .six-seven:nth-of-type(3) {
        bottom: 20%;
        left: 42%;
    }
}