/*@tailwind base;
@tailwind components;
@tailwind utilities;*/

.sglights
{
    animation-duration: 30s;
    animation-iteration-count: infinite;
    background-color:rgba(0,200,200,0.7) !important;
    filter: blur(24px);
    position:absolute;
    border-radius:9999px;
    mix-blend-mode: multiply;
    width:150px;
    height:150px;
    left:0px;
  /*animation-direction: alternate;
  display:block;
  width:70px;
  height:70px;
  border-radius:35px;
  position:absolute;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);*/
}

@keyframes blob{
    0% {
        transform: translate(60vw, 0px) scale(0.5);
    }
    50% {
        transform: translate(90vw, 450px) scale(1.5);
    }
    100% {
        transform: translate(60vw, 0px) scale(0.5);
    }         
}

#light1
{
    animation-name: blob;
    top:0px;
    /*background-color:rgba(50,87,86,0.7);*/
}

@keyframes blob2{
    0% {
        transform: translate(-140px, -80px) scale(0.4);
        opacity: 1;
    }
    25% {
        transform: translate(90vw, 100px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(1px, 130px) scale(1.2);
        opacity: 1;
    }    
    75% {
        transform: translate(90vw, 10px) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-140px, -80px) scale(0.4);
        opacity: 1;
    }         
}

#light2, #light3, #light4
{
    animation-duration: 60s;
    animation-name: blob2;
    /*background-color:rgba(204,173,108, 0.2) !important;*/
    background-color:rgba(20,200,200, 0.2) !important;
    width:350px;
    height:350px;
}

#light3
{
    animation-delay: 20s;
    opacity: 0;
}

#light4
{
    animation-delay: 40s;
    opacity: 0;
}

#light2box
{
    display:block;
    position:relative;
    width:100%;
    height:400px;
    margin-top:-400px;
}