@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Shanti&family=Trade+Winds&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #222222;
  font-family: "Shanti", sans-serif;
}

.main {
  margin: auto;
  height: 100vh;
  width: 80vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (11.11111%)[9];
      grid-template-rows: repeat(9, 11.11111%);
  -ms-grid-columns: (11.11111%)[9];
      grid-template-columns: repeat(9, 11.11111%);
}

.main-title {
  text-align: center;
  margin: 1rem;
  font-family: "Trade Winds", cursive;
  color: #fef1f1;
  font-size: 2rem;
}

#apiWindow {
  height: 100%;
  width: 100%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 9;
  grid-row: 1 / 10;
  padding: 1rem;
  font-family: "Shanti", sans-serif;
}

#apiWindow #apiCard {
  height: 100%;
  width: 100%;
  padding: 2rem;
  -webkit-box-shadow: 0px 0px 5px 1px #ffffff;
          box-shadow: 0px 0px 5px 1px #ffffff;
  border-radius: 5px;
  overflow-y: auto;
  background-color: #fef1f1;
  overflow-x: hidden;
}

#apiWindow #apiCard .api-title {
  text-align: center;
  font-family: "Orbitron", sans-serif;
}

#apiWindow #apiCard .form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#apiWindow #apiCard .form .input {
  width: 100%;
  height: 2rem;
  margin: 3px;
  font-family: "Shanti", sans-serif;
  border-radius: 5px;
  outline: none;
}

#apiWindow #apiCard .form .input:hover {
  background-color: #0e3749;
  color: white;
}

#apiWindow #apiCard .form .playerAndNameDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

#apiWindow #apiCard .form #playerSeason {
  width: 50px;
  text-align: center;
}

#apiWindow #apiCard .form #qBtn:hover {
  background-color: #c4c4b5;
}

#apiWindow #apiCard .showPlayerDiv {
  padding: 1rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 5px 1px #8c8c8c;
          box-shadow: 0px 0px 5px 1px #8c8c8c;
  border-radius: 5px;
  margin-top: 2rem;
}

#apiWindow #apiCard .seasonAverageDiv {
  padding: 0.5rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 5px 1px #8c8c8c;
          box-shadow: 0px 0px 5px 1px #8c8c8c;
  border-radius: 5px;
  margin-top: 1rem;
}

#apiWindow #apiCard .teamLeadersDiv {
  padding: 0.5rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 5px 1px #8c8c8c;
          box-shadow: 0px 0px 5px 1px #8c8c8c;
  border-radius: 5px;
  margin-top: 1rem;
}

#apiWindow #apiCard ul {
  list-style: none;
  padding: 3px;
}

#apiWindow #apiCard li {
  list-style: none;
  color: #982c31;
  margin-left: 10px;
}

#gameWindow {
  min-width: 600px;
  -ms-grid-column: 4;
  -ms-grid-column-span: 6;
  grid-column: 4 / 10;
  -ms-grid-row: 1;
  -ms-grid-row-span: 6;
  grid-row: 1 / 7;
}

#gameWindow #game {
  margin: auto;
  width: 600px;
  height: 337.5px;
  padding: 2rem;
  position: relative;
  background-size: 600px 337.5px;
  background-image: url("./images/basketballcourt.jpg");
  -webkit-box-shadow: 0px 0px 5px 1px #ffffff;
          box-shadow: 0px 0px 5px 1px #ffffff;
  border-radius: 5px;
}

#gameWindow #game #balldiv {
  z-index: 1;
  height: 80px;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  offset-path: path("M100 250 C10-100 300 19 340 190 V300");
  top: 0px;
  left: 0px;
  -webkit-animation: none;
          animation: none;
  position: absolute;
  border-radius: 50%;
}

#gameWindow #game #ball {
  height: 36px;
  width: 36px;
  position: absolute;
  background-color: red;
  border-radius: 50%;
}

#gameWindow #game #hoopdiv {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 95px;
  left: 414px;
  height: 80px;
  width: 80px;
  z-index: 0;
}

#gameWindow #game #hoopimg {
  height: 35px;
  width: 45px;
}

@-webkit-keyframes none {
  100% {
    offset-distance: 0%;
  }
}

@keyframes none {
  100% {
    offset-distance: 0%;
  }
}

@-webkit-keyframes move {
  0% {
    offset-distance: 0%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(-1480deg) scale(0.7);
            transform: rotate(-1480deg) scale(0.7);
  }
  100% {
    offset-distance: 100%;
    -webkit-transform: rotate(-1580deg) scale(0.7);
            transform: rotate(-1580deg) scale(0.7);
  }
}

@keyframes move {
  0% {
    offset-distance: 0%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(-1480deg) scale(0.7);
            transform: rotate(-1480deg) scale(0.7);
  }
  100% {
    offset-distance: 100%;
    -webkit-transform: rotate(-1580deg) scale(0.7);
            transform: rotate(-1580deg) scale(0.7);
  }
}

@-webkit-keyframes bounce {
  0%,
  40%,
  70%,
  85%,
  100% {
    -webkit-transform: translateX(0) scale(0.7);
            transform: translateX(0) scale(0.7);
  }
  20% {
    -webkit-transform: translateX(-50px) scale(0.7);
            transform: translateX(-50px) scale(0.7);
  }
  60% {
    -webkit-transform: translateX(-35px) scale(0.7);
            transform: translateX(-35px) scale(0.7);
  }
  90% {
    -webkit-transform: translateX(-5px) scale(0.7);
            transform: translateX(-5px) scale(0.7);
  }
  95% {
    -webkit-transform: translateX(-2px) scale(0.7);
            transform: translateX(-2px) scale(0.7);
  }
}

@keyframes bounce {
  0%,
  40%,
  70%,
  85%,
  100% {
    -webkit-transform: translateX(0) scale(0.7);
            transform: translateX(0) scale(0.7);
  }
  20% {
    -webkit-transform: translateX(-50px) scale(0.7);
            transform: translateX(-50px) scale(0.7);
  }
  60% {
    -webkit-transform: translateX(-35px) scale(0.7);
            transform: translateX(-35px) scale(0.7);
  }
  90% {
    -webkit-transform: translateX(-5px) scale(0.7);
            transform: translateX(-5px) scale(0.7);
  }
  95% {
    -webkit-transform: translateX(-2px) scale(0.7);
            transform: translateX(-2px) scale(0.7);
  }
}

#gameWindow .controlsCard {
  margin-top: 1rem;
  width: 600px;
  height: 10%;
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  background-color: #ffffff00;
  color: white;
}

#gameWindow .controlsCard .range-container {
  -webkit-box-shadow: 0px 0px 5px 1px #222222;
          box-shadow: 0px 0px 5px 1px #222222;
  border-radius: 20px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: red;
  background: -webkit-gradient(linear, left top, right top, from(red), color-stop(50%, #7adbff), to(red));
  background: linear-gradient(90deg, red 0%, #7adbff 50%, red 100%);
}

#gameWindow .controlsCard .score-container {
  padding: 3px;
  -webkit-box-shadow: 0px 0px 5px 1px #222222;
          box-shadow: 0px 0px 5px 1px #222222;
  border-radius: 5px;
}

#gameWindow .controlsCard .score-title {
  font-family: "Audiowide", cursive;
  font-size: 1.5rem;
}

#gameWindow .controlsCard #button {
  font-size: 1rem;
  padding: 10px 15px;
  margin: 20px;
  width: 100px;
  border-radius: 10px;
  color: white;
  text-transform: uppercase;
  background-color: #0e3749;
  -webkit-box-shadow: 0 4px #222222;
          box-shadow: 0 4px #222222;
}

#infoWindow {
  -ms-grid-column: 4;
  -ms-grid-column-span: 6;
  grid-column: 4 / 10;
  -ms-grid-row: 6;
  -ms-grid-row-span: 4;
  grid-row: 6 / 10;
  padding: 1rem;
}

#infoWindow #infoCard {
  width: 700px;
  height: 100%;
  margin: auto;
  background-color: #fef1f1;
  -webkit-box-shadow: 0px 0px 5px 1px #adadad;
          box-shadow: 0px 0px 5px 1px #adadad;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#infoWindow #infoCard .infoTitle {
  font-family: "Shanti", sans-serif;
  font-size: 1.5rem;
  padding: 0.5rem;
}

#infoWindow #infoCard .instructions {
  list-style: none;
  padding: 0.2rem;
}

#infoWindow #infoCard span {
  border-radius: 5px;
  display: inline-block;
  padding: 0.2rem;
  width: 7rem;
}

#infoWindow #infoCard .easyMode {
  background-color: lime;
}

#infoWindow #infoCard .hardMode {
  background-color: red;
  color: white;
}

#infoWindow #infoCard .aboutCont {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  line-height: 1.6rem;
}

#infoWindow #infoCard .devCont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 1rem;
}

#infoWindow #infoCard .devLinks {
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#infoWindow #infoCard .devLinks a {
  margin: auto;
}

#infoWindow #infoCard .githubsvg {
  width: 48px;
  height: 48px;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

#infoWindow #infoCard .githubsvg:hover {
  fill: #adadad;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

#myRange {
  width: 200px;
  background: url(./images/bball-icon.png);
}
/*# sourceMappingURL=styles.css.map */