styles.css

*, *::after, *::before {
  box-sizing: border-box;
}

@font-face{
  font-family: 'bit5x3';
  src: url("bit5x3.ttf") format('truetype');
}

body{
  margin: 0;
  background-color: var(--background);
  overflow: hidden;
}

:root{
  --hue: 200;
  --saturation: 50%;
  --foreground: #f90;
  --background: black;
}

.paddle {
  --position: 50;
  
  position: absolute;
  background-color: var(--foreground);
  top: calc(var(--position) * 1vh);
  transform: translateY(-50%);
  width: 1vh;
  height: 10vh;
  box-shadow: 0 0 25px 1px #fbcd62;  /* inner white */
}

.paddle.left{
  left: 1vw;
}

.paddle.right{
  right: 1vw;
}

.ball {
  --x: 50;
  --y: 50;
  
  position: absolute;
  background-color: var(--foreground);
  left: calc(var(--y) * 1vw);
  top: calc(var(--x) * 1vh);
  transform: translate(-50%, -50%);
  width: 2.5vh;
  height: 2.5vh;
  border-radius: 0%;
  box-shadow: 0 0 25px 1px #fbcd62; 
}

.score{
  display: flex;
  justify-content: center;
  font-size: 7vh;
  color: var(--foreground);
}

.score > *{
  flex-grow: 1;
  flex-basis: 0;
  padding: 2vh;
  margin: 1vh 0;
  font-family: 'bit5x3';
  text-shadow: #fbcd62 1px 4px 18px;
}


.score > :first-child{
  text-align: right;
  border-right: .5vh solid;
}