html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption, figure, main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details, menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

html {
  box-sizing: border-box;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

@font-face {
  font-family: "Pokemon-Solid";
  src: url(../assets/fontsAndTypography/pokemon-solid-font/PokemonSolidNormal-xyWR.ttf);
}
@font-face {
  font-family: "Pokemon-Hollow";
  src: url(../assets/fontsAndTypography/pokemon-hollow-font/PokemonHollowNormal-pyPZ.ttf);
}
@font-face {
  font-family: "game-text";
  src: url(../assets/fontsAndTypography/PressStart2P/PressStart2P-Regular.ttf);
}
.gameBackground {
  width: 100%;
  min-height: 86vh;
  /*washed out version begin*/
  /*washed out version end*/
  /*Full blast gradient begins*/
  background: rgb(6, 103, 4);
  background: linear-gradient(0deg, rgb(6, 103, 4) 0%, rgb(8, 91, 5) 2%, rgb(8, 91, 5) 4%, rgb(11, 76, 6) 5%, rgb(12, 65, 7) 7%, rgb(11, 74, 6) 11%, rgb(13, 60, 7) 13%, rgb(15, 75, 8) 15%, rgb(8, 91, 5) 17%, rgb(17, 85, 9) 17%, rgb(7, 95, 5) 17%, rgb(17, 88, 9) 19%, rgb(14, 71, 8) 20%, rgb(12, 63, 7) 22%, rgb(17, 85, 9) 24%, rgb(15, 80, 8) 26%, rgb(17, 93, 9) 29%, rgb(19, 102, 10) 31%, rgb(18, 97, 10) 33%, rgb(20, 110, 10) 34%, rgb(21, 117, 11) 36%, rgb(21, 117, 11) 37%, rgb(21, 124, 11) 38%, rgb(23, 142, 12) 41%, rgb(29, 110, 12) 45%, rgb(66, 73, 15) 47%, rgb(161, 104, 12) 51%, rgb(232, 240, 48) 52%, rgb(237, 204, 93) 52%, rgb(205, 204, 60) 53%, rgb(173, 204, 26) 56%, rgb(126, 188, 122) 58%, rgb(79, 172, 217) 64%, rgb(57, 179, 242) 69%, rgb(71, 175, 226) 72%, rgb(106, 163, 186) 74%, rgb(141, 151, 145) 78%, rgb(183, 137, 96) 80%, rgb(247, 116, 21) 83%, rgb(243, 114, 20) 87%, rgb(246, 116, 21) 89%, rgb(246, 116, 21) 90%, rgb(233, 108, 17) 93%, rgb(209, 94, 11) 95%, rgb(202, 90, 9) 98%, rgb(182, 78, 3) 100%);
  /*Full blast gradient ends*/
}

.dropdownSection {
  width: 100%;
  height: 75vh;
  background-image: url(../assets/backgroundImages/17070480.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

header {
  background-color: #2a75bb;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding-left: 0;
}
nav ul li {
  padding: 25px;
}
nav a {
  text-decoration: none;
  font-family: "Pokemon-Solid";
  color: #ffcb05;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  line-height: 29px;
  letter-spacing: 7px;
  transition: 0.7s ease;
  cursor: pointer;
}
nav a:hover {
  color: #ff0000;
}
nav a:focus {
  color: #cc0000;
}

:root {
  --sliderImg: url("../assets/placeHolderSprites/snorlax.png");
  --isPlaying:false;
}

.dropdownSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dropdownSection .headerText {
  font-family: "Pokemon-Solid";
  text-transform: capitalize;
  font-size: 2.5rem;
  letter-spacing: 10px;
  margin: 0 auto;
  position: absolute;
  top: 140px;
  color: #ffcb05;
  text-shadow: -1.5px -1.5px 0 #2a75bb, 1.5px -1.5px 0 #2a75bb, -1px 2px 0 #2a75bb, 1px 2px 0 #2a75bb;
  text-align: center;
}
.dropdownSection .headerText h2 {
  font-size: 1.6rem;
  font-family: "game-text";
  text-transform: none;
  letter-spacing: 2px;
  color: #ffcb05;
}
.dropdownSection .contentContainer {
  max-width: 75%;
  display: flex;
}
.dropdownSection .contentContainer img {
  width: 150px;
  height: auto;
}
.dropdownSection .contentContainer .dropdownMenu {
  width: 50vw;
}
.dropdownSection .contentContainer .dropdownMenu select {
  background-color: #c7a008;
  font-family: "Pokemon-Solid";
  font-size: 24px;
}

.difficultyRange {
  height: 10vw;
  width: 90%;
}
.difficultyRange::-moz-range-thumb {
  width: 15rem;
  height: 15rem;
  background: var(--sliderImg);
  background-size: contain;
  border: none;
}
.difficultyRange::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background: #205928;
}

.difficultyRangeMini {
  height: 5vw;
  width: 80%;
  background: #ff0000;
}
.difficultyRangeMini::-moz-range-thumb {
  width: 10rem;
  height: 10rem;
  background: var(--sliderImg);
  background-size: contain;
  border: none;
}
.difficultyRangeMini::-moz-range-track {
  width: 70%;
  height: 0.5rem;
  background: #205928;
}

.goButton {
  display: flex;
  justify-content: center;
}

.pokeBallButton {
  display: block;
  padding: 5vw;
  font-size: 2rem;
  background: url(../assets/placeHolderSprites/pokeball.jpg);
  background-size: contain;
  border: none;
  color: white;
  transition: 0.1s;
}
.pokeBallButton:active {
  transform: scale(1.2);
}

:root {
  --blurMultiplier:1;
  --userBlur:1;
}

.pokeWrapper {
  width: 450px;
  height: 690px;
  margin: 2rem 0;
  border-radius: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}
@media (max-width: 420px) {
  .pokeWrapper {
    max-width: 95vw;
    height: 100%;
  }
}

.quizContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 10;
  background-color: #ff0000;
  border-style: groove;
  border-radius: 1.5rem;
  padding: 1.5rem 4rem 3rem 4rem;
}

.screenBorder {
  background-color: lightgray;
  border: 10px ridge lightgray;
  border-radius: 1.5rem;
  height: 295px;
}
.screenBorder .screenFooter {
  display: flex;
  justify-content: space-between;
}
.screenBorder .counter {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 35px;
  height: 35px;
  background-color: lightblue;
  color: black;
  border: 2px inset black;
  margin: 3px 0;
}
.screenBorder .speakerContainer {
  display: flex;
  justify-content: end;
  padding-right: 2rem;
  max-width: 40px;
}
.screenBorder .speakerContainer .bar {
  display: block;
  width: 40px;
  height: 2px;
  margin: 5px auto;
  background-color: black;
}
.screenBorder .redCircle {
  background-color: #cc0000;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid;
  margin: 10px;
  list-style: none;
}

.spriteContainer {
  display: flex;
  align-items: center;
  border: 5px inset;
  background: rgb(194, 203, 241);
  background: radial-gradient(circle, rgb(229, 231, 242) 0%, rgb(122, 133, 226) 48%, rgba(230, 77, 77, 0.9791193008) 100%);
  width: 300px;
  height: 240px;
  transition-duration: 0.05s;
  box-shadow: 0px 0px calc(5rem * var(--blurMultiplier)) 0px white;
}
.spriteContainer img {
  width: 100%;
  height: auto;
  padding: 25px;
  filter: brightness(0);
}

.pokedexHeader .pokedexLights ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
}
.pokedexHeader .pokedexLights .blueCircle {
  background-color: #3c5aa6;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  list-style: none;
  border: 1px solid;
  transition-duration: 0.05s;
  box-shadow: 0px 0px calc(2rem * var(--blurMultiplier)) 0px lightblue;
}
.pokedexHeader .pokedexLights .redCircle {
  background-color: #cc0000;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid;
  margin-left: 21px;
  list-style: none;
  transition-duration: 0.05s;
  box-shadow: 0px 0px calc(1rem * var(--blurMultiplier)) 0px orange;
}
.pokedexHeader .pokedexLights .yellowCircle {
  background-color: #c7a008;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid;
  margin-left: 21px;
  list-style: none;
  transition-duration: 0.05s;
  box-shadow: 0px 0px calc(1rem * var(--blurMultiplier)) 0px yellow;
}
.pokedexHeader .pokedexLights .greenCircle {
  background-color: #008000;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid;
  margin-left: 21px;
  list-style: none;
  transition-duration: 0.05s;
  box-shadow: 0px 0px 0.25rem 0px green;
}
.pokedexHeader .gameTitle {
  text-align: center;
  font-size: 2.5rem;
  margin: 2rem 0;
}

.nameTitle {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
  margin: 2rem 0;
}

.quizOptions {
  list-style-type: none;
  margin: 1rem;
  display: flex;
  flex-wrap: wrap;
}
.quizOptions button {
  border-radius: 0.5rem;
  font-family: "game-text";
  text-transform: capitalize;
  width: 40%;
  margin: 0.7rem 1rem;
  padding: 0.4rem 1.2rem;
  cursor: pointer;
  border: 3px ridge #ffcb05;
  background-color: #ffcb05;
  color: black;
  box-shadow: 0 4px 0 0 #c7a008;
  transition: all 300ms ease-in-out;
}
.quizOptions button:hover {
  color: #2a75bb;
}
.quizOptions button:active {
  transform: scale(0.97);
}

.quizFooter button {
  border-radius: 0.5rem;
  outline: 0;
  font-family: "game-text";
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  margin: 0 auto;
  text-transform: uppercase;
  border: 3px ridge black;
  cursor: pointer;
  background-color: #79ac4c;
  color: black;
  letter-spacing: 2px;
  transition: all 300ms ease-in-out;
  box-shadow: 0 4px 0 0 #008000;
}

.pokedex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  position: absolute;
  border: 5px ridge #cc0000;
  border-radius: 1.5rem;
  width: 420px;
  z-index: 1;
  background-color: #ff0000;
  transition-duration: 0.2s;
  bottom: 33%;
  padding: 5%;
}
.pokedex p {
  text-transform: capitalize;
  width: 75%;
  font-size: 1.5rem;
  margin-block: 2rem;
}
.pokedex .devContainer {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.openDex {
  transform: translateX(100%);
}
@media (max-width: 1300px) {
  .openDex {
    transform: translateX(0%);
    z-index: 99;
    color: white;
  }
}
@media (max-width: 1300px) and (max-width: 420px) {
  .openDex {
    max-width: 90vw;
  }
}

.settings {
  position: absolute;
  border: 5px ridge #cc0000;
  width: 420px;
  z-index: 1;
  background-color: #ff0000;
  transition-duration: 0.2s;
  bottom: 10%;
  padding: 5%;
}

.openSettings {
  transform: translateX(-100%);
}
@media (max-width: 1300px) {
  .openSettings {
    z-index: 99;
    transform: translateY(140%);
  }
}
@media (max-width: 1300px) and (max-width: 420px) {
  .openSettings {
    max-width: 95vw;
  }
}

.innerDisplay {
  background: green;
  width: 100%;
  height: 15rem;
  border: 10px ridge black;
  transition-duration: 0.05s;
  box-shadow: 0px 0px calc(2rem * var(--blurMultiplier)) 0px lightgreen;
}

.colm, .shaishav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
  width: 130px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 15%;
}
.colm a, .shaishav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.colm, .shaishav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2a75bb;
  width: 130px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 15%;
  border: 2px ridge #3c5aa6;
}
.colm a, .shaishav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

footer {
  background-color: #ffcb05;
  min-height: 5.5vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "game-text";
}

.flexContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
}/*# sourceMappingURL=main.css.map */