body {
    margin: 0;
}

.splash-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(45deg, #5C2483, #754C9C, #826AA4, #693890);
    background-size: 600% 100%;
    animation: gradient 4s linear infinite;
    animation-direction: alternate;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes gradient {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

/* Fade in and out repeatedly */
.splash-wrapper img {
    opacity: 0;
    animation: fadeLoop 4s ease-in-out infinite;
}

@keyframes fadeLoop {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Tablet/Desktop */
@media only screen and (min-width: 600px) {
    .splash-wrapper img {
        width: 152px;
    }
}

/* Phone */
@media only screen and (max-width: 599px) {
    .splash-wrapper img {
        width: 116px;
    }
}