/**
*,
*:before,
*:after
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body
{
        background-color: #221526 ;
}

div{
    width: 600px;
    height: 300px;  
    border-radius: 600px / 300px;
    
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 0 20px 35px rgba(31, 2, 2, 0.4);
    overflow: hidden;
}

div:before{
    content:"";
    height: 220%;
    width: 150%;
    border-radius: 5;
    position: absolute;
    background: conic-gradient(
        #ff0000,
        #fffb00,
        #00ff11,
        #00ff11,
        #00ffd5,
        #1900ff,
        #ea00ff,
        #ff0000

    );

    left:-25%;
    top:-25%;
    animation:spin 1.5s infinite linear;
}

@keyframes spin{
    100%{
        transform: rotate(-360deg);
    }
}

div:after{

    content: "SITE UNDER CONSTRUCTION";
    position: absolute;
    background-color: #221526;
    height: 90%;
    width: 94%;
    border-radius: 90% / 94%;
    top: 5%;
    left: 3%;
    font-size: 28px;
    color:#ffffff;  
    letter-spacing: 6px;
    display: grid;
    place-items:center;

}
    **/

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

body
{
    background-color: #221526;
}

div{
    width: 400px;
    height: 400px;  
    border-radius: 50%; /* This creates a perfect circle */
    
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 0 20px 35px rgba(31, 2, 2, 0.4);
    overflow: hidden;
}

div:before{
    content:"";
    height: 220%;
    width: 220%; /* Increased to ensure full coverage */
    border-radius: 50%; /* Make this a circle too */
    position: absolute;
    background: conic-gradient(
        #ff0000,
        #fffb00,
        #00ff11,
        #00ff11,
        #00ffd5,
        #1900ff,
        #ea00ff,
        #ff0000
    );

    left:-60%; /* Adjusted to center the gradient */
    top:-60%;
    animation:spin 1.5s infinite linear;
}

@keyframes spin{
    100%{
        transform: rotate(-360deg);
    }
}

div:after{
    content: "SITE UNDER CONSTRUCTION";
    position: absolute;
    background-color: #221526;
    height: 90%;
    width: 90%; /* Made equal to height for a circle */
    border-radius: 50%; /* Perfect circle */
    top: 5%;
    left: 5%;
    font-size: 28px;
    color:#ffffff;  
    letter-spacing: 6px;
    display: grid;
    place-items: center;
    text-align: center; /* Center the text */
}