body {
    margin:0px;
	display:flex;
	flex-direction:column;
}
.mainbody {padding-bottom: 20px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
	height: 100%;
  background: linear-gradient(to bottom, limegreen 50%, black 50%);
}


#myAnimation{
	position: absolute;
   width:80px; 
   height:80px;
}
#pic{
	display:flex;
	justify-content: center;
	width:382px;
	height:380px

}
@media only screen and ( max-width:600px )   {
    #pic{ width:300px;
    height:300px;
    }
    }
}
img{
	display:block;
}
h1 {
	color:purple;
	text-transform: uppercase;
    font-family: sans-serif;
}

 #ball {
	color:green;
	font-size:20px;
}

#demo {
	color:limegreen;
	font-size:36px;
}

footer {
	display:flex;
	color:black;
	flex-direction:column;
	justify-content: center;
    
    align-items: center;
	
}

.ask {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 #ask {
     outline:none;
     font-size:20px;
font-family:sans-serif;
padding:5px;
color:black;
  background-color:limegreen;
  border-radius:30px;}
  
.hidebutton {
    outline:none;
    font-size:20px;
  visibility: hidden;
  color:black;
  background-color:limegreen;
  border-radius:30px;
}

.bottem {
	color:white;
	font-size:36px;
	align-items: center;
    /* justify-content: center; */
    font-family: sans-serif;
   
    display: flex;
    flex-direction: column;
}
.bottem h4{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:white;
	font-size:36px;
}
form #eightballform {
	display:flex;
	justify-content:center;
	align-items:center;
	align-content: center;
	align-self: center;
}




input  {
    margin-bottom:5px;
    height:36px;
    outline:none;
    border-radius:36px;

}




























}