@keyframes floatX{0%{transform:translateX(0)}50%{transform:translateX(5vh)}to{transform:translateX(0)}}@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(2vh)}to{transform:translateY(0)}}@keyframes moveLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-100vw);opacity:0}}@keyframes moveRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(100vw);opacity:0}}@keyframes moveLeftBack{0%{transform:translateX(-100vw);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes moveRightBack{0%{transform:translateX(100vw);opacity:0}to{transform:translateX(0);opacity:1}}.clouds-wrapper{z-index:0;position:fixed;overflow:hidden;width:100%;height:100vh;pointer-events:none}.clouds-wrapper img{position:absolute}.clouds-wrapper .cloud1{top:-5.6vh;left:-5vh;width:70vh;filter:opacity(50%);animation-duration:8s,5s}.clouds-wrapper .cloud2{top:-5.6vh;right:0;width:40vh;filter:opacity(50%);animation-duration:10s,6s}.clouds-wrapper .cloud3{bottom:0;right:0;width:70vh;filter:opacity(50%);animation-duration:7s,5s}.clouds-wrapper .cloud4{bottom:0;right:0;width:70vh;filter:opacity(50%);animation-duration:9s,6s}.clouds-wrapper .cloud5{animation-duration:11s,7s}.clouds-wrapper .cloud5,.clouds-wrapper .cloud6{bottom:0;left:-5vh;width:80vh;filter:opacity(50%)}.clouds-wrapper .cloud6{animation-duration:8s,6s}.clouds-wrapper.active img{animation:none}.clouds-wrapper.active .cloud1,.clouds-wrapper.active .cloud5,.clouds-wrapper.active .cloud6{animation:moveLeft 1s ease-in-out forwards}.clouds-wrapper.active .cloud2,.clouds-wrapper.active .cloud3,.clouds-wrapper.active .cloud4{animation:moveRight 1s ease-in-out forwards}.clouds-wrapper:not(.active) .cloud2{animation:moveRightBack .5s ease-in-out forwards,floatX 6s ease-in-out 2s infinite alternate,floatY 10s ease-in-out 2s infinite alternate}.clouds-wrapper:not(.active) .cloud3{animation:moveRightBack .5s ease-in-out forwards,floatY 4s ease-in-out 2s infinite alternate}.clouds-wrapper:not(.active) .cloud4{animation:moveRightBack .5s ease-in-out forwards,floatX 8s ease-in-out 2s infinite alternate}.clouds-wrapper:not(.active) .cloud1{animation:moveLeftBack .5s ease-in-out forwards,floatY 5.7s ease-in-out 2s infinite alternate}.clouds-wrapper:not(.active) .cloud5{animation:moveLeftBack .5s ease-in-out forwards,floatX 6s ease-in-out 2s infinite alternate}.clouds-wrapper:not(.active) .cloud6{animation:moveLeftBack .5s ease-in-out forwards,floatY 5s ease-in-out 2s infinite alternate}