*{margin: 0;padding: 0;box-sizing: border-box;}


body{font-family: Assistant;
display: flex; flex-direction: column;align-items: center;}

#container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}


#abstract{  animation: float 2.3s ease-in-out infinite;
    height: auto; width: 25vw;
    position: absolute;   
    right: 0px;
    top: 0;
    z-index: -1;}

#ball1{  animation: float 2s ease-in-out infinite;
    height: auto; width: 35vw;
    position: absolute;   
    left: -200px;
    top: -90px;
    z-index: -1;}

#ball2{  animation: float 2.5s ease-in-out infinite;
    height: auto; width: 15vw;
    position: absolute;   
    left: 5vw;
    bottom: 5vh;
    z-index: -1;}

#ball3{  animation: float 1.8s ease-in-out infinite;
    height: auto; width: 7vw;
    position: absolute;   
    right: 1vw;
    top: 20vw;}

h1{margin-top: 20px;font-size: 3.2vw;}

h2{color: #F72585;font-size: 3vw;}

a{border: solid 4px #1EADFF; border-radius: 20px; padding: 15px 35px;
display: flex; flex-direction: row-reverse; justify-content: center; gap: 20px;
text-decoration: none; font-size: 18pt; font-weight: 700; color: #1EADFF;
}

#bg-blur
{   z-index: -1;
    position: absolute;
    right: -100px;
    bottom: 0;
    width: 800px;
    height: 600px;
    border-radius: 200px;
    background-image: linear-gradient(#bedbf7, #f7bef7);
    filter: blur(100px);
}
#btngroup{    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}

#btngroup img{mix-blend-mode: darken;}

#button{width: fit-content; height: fit-content;padding: 15px 50px;
    background-image: linear-gradient(50deg, #1EADFF, #F72585);
    font-size: 22pt; font-weight: bold; 
    color: white; border: none; border-radius: 50px;
    transition: 0.2s ease-in-out;
}

#button:hover{background-image: linear-gradient(50deg, #1EADFF, #1EADFF); 
    scale: 1.1; cursor: pointer;
    transition: 0.2s ease-in-out;
}

#btngroup p {
    margin:15px; font-size: 16pt; color: grey;
}

#divider { margin:15px;font-weight: bold; font-size: 20pt; color: rgb(22, 21, 22);}

@media (max-width: 600px) {
    

    #button{padding: 10px 20px;
        font-size: 18pt; transition:none;
    }
    
    #button:hover{ transition:none;}
    
    #btngroup p {
        font-size: 14pt; 
    }

#abstract{  animation: float 2.3s ease-in-out infinite;
    height: auto; width: 55vw;
    position: absolute;   
    right: -80px;
    top: 20px;
    z-index: -1;}

#ball1{  animation: float 2s ease-in-out infinite;
    height: auto; width: 35vw;
    position: absolute;   
    left: -60px;
    top: 260px;
    z-index: -1;}

#ball2{  animation: float 2.5s ease-in-out infinite;
    height: auto; width: 20vw;
    position: absolute;   
    left: 6vw;
    bottom: 2vh;
    z-index: -1;}

#ball3{  
    height: auto; width: 20vw;
   
    right: 1vw;
    top: 55vw;}

    a{ 
        padding: 10px 10px;
         gap: 5px;
         font-size: 12pt; 
         
        }

 a img{width: auto; height: 20px; }

#logo{margin-top: 60px;}

#bg-blur{right:10vw;
    bottom:80vh;


    z-index: -1;
    position: absolute;
  
    width: 800px;
    height: 600px;
    border-radius: 200px;
    background-image: linear-gradient(#bedbf7, #f7bef7);
    filter: blur(100px);}

#btngroup img{width: auto; height: 250px;}



h1{font-size: 4vh;z-index: 2;}
h2{font-size: 4vh;z-index: 2; margin: 10px;}


}



@keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px); /* Move up */
    }
    100% {
      transform: translateY(0);
    }
  }