/* base
 *****************************************/
* {
  box-sizing: border-box;
}


html {
  font-family: 'Nunito', sans-serif;
  font-size: 62.5%;
}


body {
  align-items: center;
  background: radial-gradient(#ffab00, #ff3415);
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}


footer {
  height: 1rem;
}


small {
  color:white;
  font-size: 1rem;
}


.hidden {
  display: none;
}


/* containers
 *****************************************/
.primaryContainer {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  width: fit-content;
}


#pokemonInputContainer {
  align-items: center;
  background: #fff;
  border: 1vh solid #3663ad;
  border-radius: 5vh;
  display: flex;
  height: 10vh;
  justify-content: center;
  padding: 0 1.25vh;
  width: calc(100% - 3vh);
}


#dexContainer {
  align-items: flex-start;
  background-attachment: fixed;
  display: flex;
  height: 55vh;
  justify-content: center;
  max-width: 100%;
  margin: 1vh 0;
  padding: 0 1vh;
  width: 100%;
}


/* elements
 *****************************************/
#logo {
  height: 30vh;
  max-width: 100vw;
  padding: 1vh;
  aspect-ratio: 270 / 100;
}


h1 {
  color: #fff;
  font-size: 5vh;
  letter-spacing: 0.5vh;
  padding: 1vh;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.5rem #000;
}


input[type=text],
input[type=text]:focus,
input[type=text]::placeholder {
  background: transparent;
  border: 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 3vh;
  height: 100%;
  outline: 0px;
  width: 100%;
}


button {
  background: white;
  border: 0px;
  border-radius: 3vh;
  color: #3663ad;
  height: 6vh;
  font-size: 3vh;
  width: 6vh;
}


button:hover {
  color: #fff;
  background: #3663ad;
}


/* frame for pokedex to allow proper alignment of images */
#dexImageAlign {
  position: relative;
}


/* primary pokedex image */
#dex {
  max-height: 55vh;
  max-width: 100%;
}


/* container for the pokedex screen so that images can be easily centered */
#dexScreen {
  align-self: center;
  display: flex;
  height: 28%;
  position: absolute;
  top: 28.5%;
  left: 11.1%;
  justify-content: center;
  width: 26.1%;
  z-index: 1;
}


#dexPokeImg {
  height: 100%;
}

/* unused -- for a possible future feature where
   the blue light blinks while speech synthesis
   is playing.
#dexGlow {
  left: 0.8%;
  mix-blend-mode: lighten;
  position: absolute;
  top: 0.9%;
  width: 12%;
  z-index: 1;
}
*/

#dexText {
  color: #00ff00;
  height: 20.5%;
  filter: blur(0.75px);
  -webkit-filter: blur(0.75px);
  font-family: 'Source Code Pro', monospace;
  font-size: 1.25vh;
  line-height: 1.5vh;
  mix-blend-mode: lighten;
  padding: 1vh;
  position: absolute;
  top: 22.6%;
  left: 58.75%;
  width: 37%;
  z-index: 1;
}