body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

#rotating-image {
    width: 20px; /* Initial size */
    height: 20px;
    animation: rotateAndScale 6s ease-in-out forwards, fadeOut 2s 6s forwards;
}

@keyframes rotateAndScale {
    0% {
        transform: rotate(0deg) scale(1);
        top: 10px;
        left: 10px;
    }
    25% {
        transform: rotate(72deg) scale(2);
        top: 25%;
        left: 25%;
    }
    50% {
        transform: rotate(144deg) scale(3);
        top: 25%;
        left: 25%;
    }
    75% {
        transform: rotate(288deg) scale(4);
        top: 25%;
        left: 25%;
    }
    100% {
        transform: rotate(360deg) scale(5);
        top: 25%;
        left: 25%;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}