*, *::after, *::before{
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    background-color:hsla(36,51%,54%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(15,18%,33%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(15,10%,15%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(19,4%,13%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(36,51%,54%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(15,18%,33%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(19,4%,13%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgb(255, 188, 0) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgb(255, 188, 0) 0px, transparent 50%),
    radial-gradient(at -2% 100%, rgb(252, 246, 60) 0px, transparent 0%),
    radial-gradient(at 0% 0%, hsla(36,51%,54%,1) 0px, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Inter', sans-serif;

    background-size: 200%;
    /* transition: background-size 5s; */
    animation: backgroundAnimation 5s alternate infinite ease-in-out;
}
@keyframes backgroundAnimation{
    0%{
        background-size: 400%;
        background-position: top left;
    }
    100%{
        background-size: 100%;
        background-position: bottom right;
    }
}
body::after{
    content: "";
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color: hsla(20, 4%, 14%, 0.8);
    z-index: -1;
}
img {
    opacity: 0;
}
img[src] {
    opacity: 1;
}