@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Asap", sans-serif;

}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.img img{
    width: 50%;

}
.one{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    padding: 2rem;
}
h1{
    font-size: 5rem;
    color: aliceblue;
}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    font-size: 2rem;
    color: aliceblue;
}

a{
    text-decoration: none;
    margin-left: 3rem;
    font-size: 2rem;
    color: yellow;
}




.main{
    height: 200vh;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0);
    align-items: center;

}
.container{
    margin-left: 20px;
    height: 200vh;
    width: 1436px;
    display: flex;
    position: relative;
    overflow: hidden;
   /* background:rgb(44, 44, 44);*/
   /*background-color: rgba(255, 255, 255, 0.15);*/
    background-color: tranparent;
   backdrop-filter: blur(5px);
    border-radius: 1rem;
    z-index: 10;
   /* border: 1px solid rgba(255,255,255,0.2);
    color: whitesmoke;*/
    transition: 0.3s;
    

}
.scroll{
    margin-top: 550px;
    color: white;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    z-index: 9000;
    opacity: 1;

}
/*.card{
    width: 100vh;
    min-height: 700px;
    background-color: rgba(255, 255, 255, 0.15);
    background-color: tranparent;
    backdrop-filter: blur(5px);
    border-radius: 1rem;
    padding: 1.5rem;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.2);
    color: whitesmoke;
}*/
.blob{
    position: absolute;
    width: 500px;
    height: 500px;
    background:linear-gradient(
        180deg,rgb(113, 103, 9) 31.77%,#c8a92f 100% 
    );
   /*mix-blend-mode: color-dodge;*/
    animation: move 20s infinite alternate;
    filter: blur(100px);
    z-index: 999;
    top: 0;
    left: 0;
    transition: 10s cubic-bezier(0.07 0.8 0.16 1);
}

.blob2{
    position: absolute;
    width: 580px;
    height: 580px;
    background:linear-gradient(
        180deg,rgb(62, 27, 7) 31.77%,#4e2a0f 100% 
    );
    /*mix-blend-mode: color-dodge;*/
    animation: movee 18s infinite alternate;
    filter: blur(120px);
    z-index: 999;
    transition: 1s cubic-bezier(0.07 0.8 0.16 1);
}

.blob:hover{
    box-shadow:inset 0 0 0 5px #330f4e,
    inset 100px 100px 0 0px #070b1b8f,
    inset 200px 200px 0 0px #36104500,
    inset 300px 300px 0 0px #0000;
    
    
}
.blob2:hover{
    box-shadow:inset 0 0 0 5px #330f4e,
    inset 100px 100px 0 0px #070b1b8f,
    inset 200px 200px 0 0px #36104500,
    inset 300px 300px 0 0px #0000;
    
    
}

@keyframes move{
   /* from{
        transform: translate(-1100px, -500px,)rotate(180deg);
        
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;

    }
    to{
        transform: translate(1200px,500px)rotate(-180deg);
        
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;

    }*/
    0%{
        transform: translate(-20%,90vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    12.5%{
        transform: translate(95vw,-12%) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    25%{
        transform: translate(-20%,50vh) scale(1.75) rotateZ(-20deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    37.5%{
        transform: translate(-20%,-12%) rotateZ(-40deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    50%{
        transform: translate(100vw,50vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    62.5%{
        transform: translate(20vw,95vh) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    75%{
        transform: translate(20%,93vh) rotateZ(20deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    87.5%{
        transform: translate(50vw,-12%) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    100%{
        transform: translate(-20%,90vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }

    
}
@keyframes movee{
    /*from{
        transform: translate(1100px, 500px,)rotate(-180deg);
        
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;

    }
    to{
        transform: translate(-100px,-500px)rotate(-10deg);
        
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;

    }*/

    0%{
        transform: translate(-20%,90vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    12.5%{
        transform: translate(95vw,-12%) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    25%{
        transform: translate(-20%,50vh) scale(1.75) rotateZ(-20deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    37.5%{
        transform: translate(-20%,-12%) rotateZ(-40deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    50%{
        transform: translate(100vw,50vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    62.5%{
        transform: translate(20vw,95vh) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    75%{
        transform: translate(20%,93vh) rotateZ(20deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
    87.5%{
        transform: translate(50vw,-12%) rotateZ(20deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
    100%{
        transform: translate(-20%,90vh) rotateZ(0deg);
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    }
}