.tongue-twister{
    position: absolute;
    user-select:none;
    pointer-events:none;
}

.tongue-twister>p{
    color: rgba(255, 255, 255, 0.20) !important;
    font-size: 16px;
    line-height: 24px;
    font-family: Averta CY;
    font-weight: 300;
    letter-spacing: 0.80px;
    word-wrap: break-word;
}



.tongue-twister-ring {
    position: absolute;
    z-index:1;
    opacity:0.6;

    >span{
        color:white;
        font-weight:lighter;
    }
}
.tongue-twister-ring [style*=--index] {
  font-size: calc(var(--font-size, 2) * 1rem);
  font-family: system-ui;
  font-weight:100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--rotation-start) + 360deg / var(--total) * var(--index)))
    translateY(calc(var(--radius) * -10px));
}

.tongue-twister-ring.twister-ring-0{
    --total: 120;
    --radius: 40;
    --rotation-start: 0deg;
    --font-size: 2;
    left: 38%;
    top: -18%;
}

.tongue-twister-ring.twister-ring-1{
    --total: 160;
    --radius: 48;
    --rotation-start: 250deg;
    --font-size: 2;
    top: 85%;
    left: 82%;
}

.tongue-twister-ring.twister-ring-3{
    --total: 160;
    --radius: 32;
    --rotation-start: 210deg;
    --font-size: 1.7;

    top: 100%;
    left: 83%;
}

@media only screen and (max-width:1280px){
    .tongue-twister-ring.twister-ring-0{
        --total: 130;
        --radius: 42;
        --rotation-start: -30deg;
        --font-size: 2;

        left: 360px;
        top: -210px;
    }

    .tongue-twister-ring.twister-ring-1{
        --total: 160;
        --radius: 42;
        --rotation-start: 250deg;
        --font-size: 2;

        top: 80%;
        left: 80%;
    }

    .tongue-twister-ring.twister-ring-3{
        --total: 150;
        --radius: 38;
        --rotation-start: 180deg;
        --font-size: 2;

        top: 100%;
        left: 83%;
    }
}

@media only screen and (max-width:1024px){
    .tongue-twister-ring.twister-ring-0{
        left:460px;
    }

    .tongue-twister-ring.twister-ring-1{
        --total: 160;
        --radius: 48;
        --rotation-start: 250deg;
        --font-size: 2;

        top: 70%;
        left: calc(1200px - 5%);
    }

    .tongue-twister-ring.twister-ring-3{
        --total: 120;
        --radius: 45;
        --rotation-start: 180deg;
        --font-size: 2;

        top: 100%;
        left: 120%;
    }
}

@media only screen and (max-width:768px){
    .tongue-twister-ring.twister-ring-0{
        --total: 90;
        --radius: 32;
        --rotation-start: -30deg;
        --font-size: 2;
        left: 320px;
        top: -210px;
    }

    .tongue-twister-ring.twister-ring-1{
        --total: 160;
        --radius: 48;
        --rotation-start: 250deg;
        --font-size: 2;
        top: 80%;
        left: 100%;
    }

    .tongue-twister-ring.twister-ring-3{
        display:none;
    }
}

@media only screen and (max-width:560px){
    .tongue-twister-ring.twister-ring-0{
        --total: 90;
        --radius: 26;
        --rotation-start: -30deg;
        --font-size: 2;
        left: 410px;
        top: -120px;
    }

    .tongue-twister-ring.twister-ring-1{
        --total: 160;
        --radius: 48;
        --rotation-start: 250deg;
        --font-size: 2;
        top: 80%;
        left: 100%;
    }

    .tongue-twister-ring.twister-ring-3{
        --total: 120;
        --radius: 44;
        --rotation-start: 180deg;
        --font-size: 2;

        top: 100%;
        left: 150%;
    }
}

@media only screen and (max-width:425px){
    .tongue-twister-ring{
        display:none;
    }
}