/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jun 18, 2024, 11:11:06 PM
    Author     : aj
*/

/*-------DEFAULT-------------*/
h3 {
    position: relative;
    left: 45%;
    text-decoration: underline;
    font-size: 30px;
}


.Box {
    
    border: 10px solid black;
    background-color: white;
  
   
}


.Box img{
    width: 100%;
    height: 100%;
}

.word{
    position: absolute;
    background-color: white;
    border: 5px solid black;
    
    display: flex;
            align-items: center; /*Pushes items into the center line but not the center of the container*/
            justify-content: center; /*pushes items into the center of the container but not the center line*/
            
            
    font-size:20px;
   
}






/*Position of boxes*/
#complete{
    position: relative;
    width: 1000px;
    height: 550px;
    left: 17%;
    width: 800px;
    height: 600px;
    left: 25%;
}



.banana{
    border: none; 
            height: 5px; 
            background-color: black; 
            width: 100%; 
            margin: 20px auto;
}






#container2{
    position: relative;
    margin-top: 100px;
    
    left: 7%;
    width: 1630px;
    height: 3000px;
   
    
}







#complete2{
    position: absolute;
    
    width: 500px;
    height: 300px;
    
    
}

#word1{
    width: 100px;
    height: 50px;
    top: 11%;
    left: 12%;
    
}





#complete3{ 
    position: absolute;
    width: 550px;
    height: 300px;
    left: 50%;  
}

#word2{
    width: 100px;
    height: 50px;
    top: 11%;
    left: 64%;
    
    
}





#Movement1{
    position: absolute;
    top: 13%;
    width: 90%;
}






#complete4{
    position: absolute;
    
    width: 500px;
    height: 400px;
 
   
   top: 15%;
   
  

    
}

#word3{
    width: 170px;
    height: 50px;
    top: 29.5%;
    left: 10%;
    
    
    
}

#complete5{
    position: absolute;
    
    width: 600px;
    height: 400px;
 
   
   top: 15%;
   left: 50%; 
   
  

    
}

#word4{
    width: 150px;
    height: 50px;
    top: 29.5%;
    left: 64%;
    
    
}


#complete6{
    position: absolute;
    
    width: 550px;
    height: 400px;
 
   
   top: 33%;
  

    
}

#word5{
    width: 200px;
    height: 50px;
    top: 47.5%;
    left: 10%;
    
}




#Movement2{
    position: absolute;
    top: 50%;
    width: 90%;
}



#complete7{
    position: absolute;
    
    width: 600px;
    height: 400px;
 
   
   top: 52%;
  

    
}

#word6{
    width: 300px;
    height: 50px;
    top: 66.5%;
    left: 9%;
    
}



#complete8{
    position: absolute;
    
    width: 500px;
    height: 450px;
 
   top: 52%;
   left: 50%;
  

    
}

#word7{
    width: 200px;
    height: 50px;
    top: 68%;
    left: 59%;
    
}




#complete9{
    position: absolute;
    
    width: 500px;
    height: 450px;
 
   top: 72%;
   
  

    
}

#word8{
    width: 200px;
    height: 50px;
    top: 88%;
    left: 8%;
    
}