body{
background: linear-gradient(145deg,black,gray);}

h1{
  color: white;
  font-size: 2.3rem;
  font-weight: 200;
  text-align: center;
}

#gameArea {
  margin: auto;
  width: 90vw;              
  max-width: 400px;         
  height: 70vh;            
  max-height: 500px;   
  border: 4px solid rgb(255, 255, 255);
  position: relative;
  overflow: hidden;
  background-color: rgba(240, 248, 255, 0.541);
}

#ball {
  width: 5vw;               
  max-width: 20px;
  height: 5vw;
  max-height: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  position: absolute;
  border: solid 3px rgb(138, 255, 255);
}

#paddle {
  width: 20vw;           
  max-width: 80px;
  height: 2vh;
  max-height: 10px;
  background-color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
}

#score{
  color: white;
  font-size: 2rem;
    color: white;
  font-size: 2rem;
  text-align: center;
  margin-top: 10px;
}

#controls{
  color: white;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
gap: 30px;
}

#controls button{

  width: 30vw;
  max-width: 150px;
  height: 50px;
  border-radius: 30px;
  border: none;
  color:rgb(0, 0, 0);
  font-size: 1.5rem;
  font-weight: 200;
  background-color: bisque;
  transition: all .2s ease;
}


#controls button:hover{
  transform: scale(1.1);

  background-color: rgb(235, 246, 255);
}