main.scss

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg, rgb(30,30,40), rgb(50,50,60) );
    overflow: hidden;
}
canvas{
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
}

svg{
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}


.cloud{
    transform: translate(0,0);
    animation-name: cloudSlide;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: both;
    animation-timing-function: linear;    
}

@keyframes cloudSlide{
    from{
        transform: translate(0px, 0px)
    }
    to{
        transform: translate(30px, 0px);
    }
}


@media( max-width: 750px ){
    svg{
        position: absolute;
        z-index: 1;
        top: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
}