body {
        background-color: #2c2c2c;
        height: 100vh;
        width: 100vw;
        margin: 0px;
    }

    .main-content {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.4s ease-out;
    }

    img {
        width: 100px;
        height: 100px;
        position: absolute;
        border-radius: 20px;
    }

    .loader {
        position: relative;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
        animation: animate 1.2s linear infinite;
    }

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

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

    .loader span {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 60%;
        background: linear-gradient(#2c2c2c, #808080, #EECB0F);
    }

    .loader span:nth-child(1) {
        filter: blur(5px);
    }

    .loader span:nth-child(2) {
        filter: blur(10px);
    }

    .loader span:nth-child(3) {
        filter: blur(25px);
    }

    .loader span:nth-child(4) {
        filter: blur(50px);
    }

    .loader:after {
        content: "";
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: #191919;
        border-radius: 50%;
    }