styles.css

@font-face {
  font-family: "basketball";
  src: url("./images/fonts/basketball-font.ttf") format("truetype");
}
@font-face {
  font-family: "pong";
  src: url("./images/fonts/pong.ttf") format("truetype");
}

@font-face {
  font-family: "pong-normal";
  src: url("./images/fonts/pongnormal.ttf") format("truetype");
}

@font-face {
  font-family: "pongscore";
  src: url("./images/fonts/pongscore2.ttf") format("truetype");
}

@font-face {
  font-family: "soccerscore";
  src: url("./images/fonts/soccer2.ttf") format("truetype");
}

@font-face {
  font-family: "soccer";
  src: url("./images/fonts/EASPORTS15.ttf") format("truetype");
}

@font-face {
  font-family: "bof";
  src: url("./images/fonts/bof.ttf") format("truetype");
}

body {
  margin: 0 50px;
  overflow: hidden;
  /* background-image: url('./images/atari-logo-bg.png');
  background-size: cover;
  background-position: center 250px; */
}

#header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#game-screen {
  width: 100%;
  height: 400px;
  text-align: center;
}

#game-board {
  width: 100%;
  height: 400px;
}

#game-screen-message {
  position: absolute;
  left: 45%;
  top: 135px;
  font-size: 6em;
}

.player-card {
  font-size: 2em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.player-card > .row {
  /* border: 1px black solid; */
  text-align: center;
}

.player-controls {
  font-size: 1.4em;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.player-controls img {
  height: 100px;
  padding: 10px 10px;
}

#game-notification {
  font-size: 2.5em;
  text-align: center;
  padding: 30px;
  height: 140px;
}

.modal img {
  width: 50px;
  height: 50px;
}

.modal ul li {
  list-style-type: none;
  padding: 4px;
}

#instructions {
  border: 1px black solid;
  border-radius: 10px;
  text-align: center;
  font-size: 0.9em;
}

#back-button,
#back-button a {
  padding: 20px 20px 0px 0px;
  font-size: 1.3em;
  color: white;
}

#timer {
  font-size: 2em;
}

.modal,
.options {
  font-size: 1.2em;
  /* padding: 5px 0 ; */
  text-align: center;
}

#rally {
  font-size: 2em;
}

#title {
  font-size: 1.7em;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.modal-content {
  color: black;
}

#start-game {
  max-height: 55px;
  font-size: 30px;
  margin: auto;
}

#footer {
  text-align: center;
  font-size: 1.3em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.submit-score {
  font-size: 0.6em !important;
}

/* Shake animation https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */

.score-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Classic CSS */
.classic,
.modal#classic {
  background-color: black;
  color: white;
  font-family: pong;
}

.classic-theme {
  background-image: url("./images/classic-canvas.png");
  background-size: 100% 400px;
  background-repeat: no-repeat;
  background-position: center center;
  border-top: 4px white solid;
  border-bottom: 4px white solid;
}

.classic-background {
  background-image: url("./images/classic-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.modal#classic img {
  background-color: black;
}

.classic-background:hover {
  -webkit-transform: scale(1.1);
}

.classic #player-score {
  font-size: 3em;
}
/*End Classic CSS */

/* Basketball Theme CSS */
.basketball,
.modal#basketball {
  background-image: url("./images/basketball-bg2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Arial Narrow", Arial, sans-serif;
}

.bball-background {
  background-image: url("./images/basketball-landing.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bball-background:hover {
  -webkit-transform: scale(1.1);
}

.basketball #timer {
  color: white;
}

.basketball #rally {
  color: white;
}

.basketball #timer span {
  font-family: basketball;
  color: yellow;
}

.basketball #rally span {
  font-family: basketball;
  color: yellow;
}

.basketball-theme {
  background-image: url("./images/basketball-canvas.jpg");
  background-size: 100% 400px;
  background-repeat: no-repeat;
  border-radius: 10px;
}

.basketball #game-screen-message {
  font-family: basketball;
}

.basketball .player-card {
  color: white;
  font-size: 3em;
  text-align: center;
  font-weight: 600;
}

.basketball #player-score {
  font-family: basketball;
  font-size: 3em;
  border: white 3px solid;
  background-color: black;
  padding: 20px;
  color: red;
}

.basketball #footer {
  color: black;
}

.basketball #game-notification,
.basketball .player-controls {
  color: white;
}
/* End Basketball CSS */

/* Soccer CSS */
.soccer,
.modal#soccer {
  background-image: url("./images/soccer-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: arial;
}

.soccer-theme {
  background-image: url("./images/soccer-canvas.jpg");
  background-size: 100% 400px;
  background-repeat: no-repeat;
  border-radius: 30px;
  border: 2px white solid;
}

.soccer-background {
  background-image: url("./images/soccer-landing.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.soccer-background:hover {
  -webkit-transform: scale(1.1);
}

.soccer .player-controls {
  /* background-color: rgba(00, 00, 00, 0.4); */
  color: white;
}

.soccer .player-card > .row {
  border: 0;
}

.soccer #player-score {
  font-family: soccerscore;
  font-size: 3em;
  background-color: rgba(00, 00, 00, 0.4);
  padding: 20px;
  color: yellow;
  text-align: center;
  border-radius: 30px;
  border: 1px black solid;
}

.soccer #back-button a {
  color: black;
}

.soccer #timer {
  color: black;
  font-size: 1.5em;
}

.soccer #rally {
  color: black;
  font-size: 1.5em;
}

.soccer #game-notification {
  color: white;
}

.soccer #timer span {
  font-family: basketball;
  color: red;
}

.soccer #rally span {
  font-family: basketball;
  color: red;
}

.soccer #game-screen-message {
  font-family: basketball;
  color: red;
}

/*End Soccer CSS */

/* Balls Of Fury CSS */
.ballsoffury,
.modal#ballsoffury {
  background-image: url("./images/ballsoffury-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: bof;
}

.ballsoffury #game-screen-message,
.ballsoffury #game-notification {
  color: red;
}

.ballsoffury-theme {
  background-image: url("./images/ballsoffury-canvas.png");
  background-size: 100% 400px;
  background-repeat: no-repeat;
}

.ballsoffury-background {
  background-image: url("./images/ballsoffury-landing.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ballsoffury-background:hover {
  -webkit-transform: scale(1.1);
}

.ballsoffury #player-score {
  /* font-family: comic san; */
  font-size: 3em;
  background-color: rgba(00, 00, 00, 0.4);
  color: white;
}

.ballsoffury .player-card,
.ballsoffury #footer,
.ballsoffury #timer {
  /* background-color: rgba(00, 00, 00, 0.4); */
  color: white;
}

.ballsoffury #skip-video-button {
  position: absolute;
  bottom: 80px;
  right: 80px;
  font-size: 3em;
}
/*End Balls of Fury CSS */

/* Landing Page */
#landing {
  background-color: black;
  color: white;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#landing #title {
  font-family: pong;
  font-size: 1em;
  padding: 10px;
}

#landing #title b {
  font-family: pong-normal !important;
}

#landing #sub-title {
  font-size: 2em;
}

#landing #theme-picker {
  display: flex;
  align-content: center;
  justify-content: center;
}

#landing #theme-picker button {
  margin: 20px;
  border-radius: 20px;
  height: 120px;
  color: white;
  font-size: 2em;
  font-family: pong-normal;
}

#landing #instructions {
  text-align: left !important;
}
/* END Landing  */

/* Video CSS */

#myVideo {
  width: 100%;
  padding-left: 20px;
}

/*Logo Flip CSS */

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 320px;
  height: 150px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front,
.back {
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}

.highscores div {
  padding: 5px 0;
}

.highscores #title {
  height: 250px !important;
}

.highscores {
  overflow: scroll !important;
}

.btn-dark, .btn-warning, .btn-success, .btn-danger {
  color: #000000;
  background-color: #ffffff;
  border-color: #343a40;
}