html {
  scroll-behavior:smooth ;
}

body {
  margin:0 ;
  overflow:hidden ;
  user-select:none ;
}

.screen {
  width:100vw ;
  height:100vh ;
  overflow:hidden ;
}

#menu {
  text-align:center ;
  background-color:rgb(128, 255, 128) ;
}

#menu button {
  font-size:2rem ;
  padding: 10px 20px ;
}

#menu h1 {
  color:rgb(200, 255, 200) ;
}

#paddle {
  width:200px ;
  height:200px ;
  background-image:url("images/paddleFire.gif") ;
  background-size: 100% 100% ;
  position:absolute ;
}

#enemyPaddle {
  width:200px ;
  height:200px ;
  background-image:url("images/paddleFire.gif") ;
  background-size: 100% 100% ;
  position:absolute ;
  transform:rotateY(180deg) ;
}

#ball {
  position:absolute ;
  width:50px ;
  height:50px ;
  background-image:radial-gradient(white, lightgrey) ;
  border-radius:50% ;
}

#gameplay {
  background-color:green ;
}

#score {
  text-align:center ;
  position:absolute ;
  width:100% ;
  z-index:99999 ;
}

.powerBar {
  position:absolute ;
  width:50px ;
  height:75% ;
  border: 1px solid black ;
  margin-left:calc(100% - 100px) ;
  margin-top:12.5vh ;
  z-index:99999 ;
}

.power {
  width:100% ;
  height:50% ;
  background-color:orange ;
}

#net {
  position:absolute ;
  margin-left:calc(50% - 25px) ;
  margin-top:-20px ;
  width:50px ;
  height:100vh ;
  background-image:url("images/net.png") ;
  background-size: 100% 100% ;
}