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

body { width: 100vw; height: 100vh; direction: rtl;}

#container { width: 100vw; height: 100%; overflow: hidden;
    background: radial-gradient(circle at center, white, #F72585); 
    font-family: Assistant; text-align: center;
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center;
    z-index: -1;
  

}


h1 {width: 80%;  z-index: 1;
    font-size: 5vh; font-weight: bold;
    color: #F72585; opacity: 50%;
}

p { direction: ltr; width: 80%; z-index: 1;
    font-size: 15vh; font-weight: bold;
color: #F72585;opacity: 50%;}


#abstract1 {z-index: 2; position: absolute;
    height: auto; width: 20vw;
right: -15px; top: 10%;
animation: float 3s ease-in-out infinite;transition: 1s;
}


#abstract1:hover{
    width: 22vw; transition: 1s;
}

#abstract2 {z-index: 2; position: absolute; 
    height: auto; width: 15vw;
left: 5%; top: 30%;
animation: float 2s ease-in-out infinite;transition: 1s;
}

#abstract2:hover{
    width: 18vw; transition: 1s;
}



#pinkball {z-index: 2; position: absolute;
    height: auto; width: 10vw;
    right: 25px; top: 50%;
    animation: float 2.5s ease-in-out infinite;transition: 1s;

}

#pinkball:hover{
    width: 12vw; transition: 1s;
}


#girl-icon {z-index: 2; 
    height: auto; width: 10vw;
    
   
}

#bunny {z-index: 2; position: absolute;
    height: auto; width: 30vw;
    right: 10%; bottom: 5%;
    animation: float 3s ease-in-out infinite;transition: 1s;
}

#bunny:hover{
    width: 33vw; transition: 1s;
}

#elephant {z-index: 2; position: absolute;
    height: auto; width:15vw;
    left: 10%; bottom: 10%;
    animation: float 4s ease-in-out infinite;transition: 1s;
}

#elephant:hover{
    width: 18vw; transition: 1s;
}

#unicorn {z-index: 2; position: absolute;
    height: auto; width: 15vw;
    left: 10%; top: 5%;
    animation: float 3s ease-in-out infinite;transition: 1s;
}

#unicorn:hover{
    width: 18vw; transition: 1s;
}

@media (max-width: 500px) {

    body{height: 120vh;}

    #container {  height: 100%;
    }
    
    
    h1 {
    }
    
    p {width: 95%;font-size: 15vw; }
    
    
    #abstract1 {  width: 50vw;
    right: -15px; top: -10px;
    }

    #abstract1:hover{transition: none;}

    #abstract2 { width: 15vw;
    left: 5%; top: 30%;
    }

    #abstract2:hover{transition: none;}
    
    #pinkball { width: 20vw;
        right: 25px; top: 40%;
    }

    #pinkball:hover{transition: none;}
    
    #girl-icon { width: 10vw;
        position: absolute;
        top: 35%;    
    }

    #bunny {  width: 100vw;
        right: -100px; bottom: -160px;
    }
    
    #bunny:hover{transition: none;}

    #elephant { width:55vw;
        left: 5%; bottom: 5px;       
    }
    
    #elephant:hover{transition: none;}

    #unicorn {   width: 45vw;
        left: 10px; top: 5%;
    }

    #unicorn:hover{transition: none;}
    
}

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