* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #ed4672;
}

.containe {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .containe .ring {
        position: relative;
        width: 150px;
        height: 150px;
        margin: -30px;
        border-radius: 50%;
        border: 4px solid transparent;
        border-top: 4px solid #ffdac5;
        animation: animate 4s linear infinite;
    }

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

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

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

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

.containe .ring:nth-child(2) {
    animation: animate2 4s linear infinite;
    animation-delay: -1s;
    border-top: 4px solid transparent;
    border-left: 4px solid #ffb400;
}

.containe .ring:nth-child(3) {
    animation: animate2 4s linear infinite;
    animation-delay: -3s;
    position: absolute;
    top: -66.66px;
    border-top: 4px solid transparent;
    border-left: 4px solid #ff7c15;
}

    .containe .ring:nth-child(3)::before {
        content: '';
        position: absolute;
        top: initial;
        bottom: 12px;
        left: 12px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: #ff7c15;
        box-shadow: 0 0 0 5px #ff7c1533, 0 0 0 10px #ff7c1522, 0 0 0 20px #ff7c1511, 0 0 20px #ff7c15, 0 0 50px #ff7c15;
    }

.containe .ring::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: #ffdac5;
    box-shadow: 0 0 0 5px #ffdac533, 0 0 0 10px #ffdac522, 0 0 0 20px #ffdac511, 0 0 20px #ffdac5, 0 0 50px #ffdac5;
}

.containe .ring:nth-child(2)::before {
    content: '';
    position: absolute;
    top: initial;
    bottom: 12px;
    left: 12px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: #ffb400;
    box-shadow: 0 0 0 5px #ffb40033, 0 0 0 10px #ffb40022, 0 0 0 20px #ffb40011, 0 0 20px #ffb400, 0 0 50px #ffb400;
}

.containe p {
    position: absolute;
    color: #fff;
    font-size: 1.5em;
    font-family: Consolas;
    bottom: -90px;
}

.containe section {
    position: absolute;
    color: #fff;
    font-size: 1.5em;
    font-family: Consolas;
    bottom: -100px;
}

@media screen and (max-width: 768px) {
    .containe {
        width: 80%;
        height: 80%;
    }

        .containe .ring {
            width: 40vw; /* Slightly larger on mobile */
            height: 40vw;
        }

        .containe p {
            font-size: 1.2em; /* Adjust font size */
            bottom: -8vw; /* Adjust position */
        }

        .containe section {
            font-size: 1.2em; /* Adjust font size */
            bottom: -10vw; /* Adjust position */
        }
}