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

body {
  margin: 0;
  overflow: hidden;
  background-color: black;
}
.welcome {
  display: inline;
  opacity: 1;
  color: rgb(51, 255, 0);
  text-align: center;
  background-color: blue;
}
.platform {
  opacity: 0;
  --position: 50;
  position: absolute;
  top: calc(var(--position) * 1vh);
  background-color: white;
  transform: translateY(-50%);
  width: 1vh;
  height: 10vh;
}
.platform.plr {
  left: 1vw;
}

.platform.cmp {
  right: 1vw;
}
.ball {
  opacity: 0;
  --x: 50;
  --y: 50;
  position: absolute;
  background-color: white;
  width: 2.5vh;
  height: 2.5vh;
  transform: translate(-50%, -50%);
  top: calc(var(--y) * 1vh);
  left: calc(var(--x) * 1vw);
  border-radius: 50%;
}
.score {
  display: flex;
  justify-content: center;
  color: aliceblue;
  font-weight: bold;
  font-size: 4vh;
  margin: 1vh 0;
  opacity: 0;
}
.score > * {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 2vh;
}
.score > :first-child {
  text-align: right;
}
.winner {
  color: rgb(51, 255, 0);
  text-align: center;
  display: grid;
  opacity: 0;
}

/* video ads */
#page-content {
  position: relative;

  /* this element's width controls the effective height */
  /* of the video container's padding-bottom */
  max-width: 640px;
  margin: 10px auto;
  opacity: 0;
}

#video-container {
  position: relative;
  /* forces the container to match a 16x9 aspect ratio */
  /* replace with 75% for a 4:3 aspect ratio, if needed */
  padding-bottom: 56.25%;
}

#video-element {
  /* forces the contents to fill the container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#ad-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}