body {
  background: black;
  font-family: 'VT323', monospace;
}

#pokedex {
  margin: 0 auto;
  display: block;
  width: 820px;
  display: flex;
}

#pokedex > * {
  /* margin-left: -10px; */
}

button {
  outline: none;
}

/* .pokedexContainer {
  width: 100%;
  margin: 0 auto;
} */

.side {
  background: #dc0a2d;
  height: 550px;
  width: 400px;
  margin: 30px auto;
  display: inline-block;
}

#left {
  border-radius: 40px 10px 10px 40px;
  overflow: hidden;
  box-shadow: 2px 15px 2px #89061c;
}

/* .topButtons:before {
  content: "";
  width: 32%;
  top: 30px;
  border-width: 0 0px 81px;
  border-style: solid;
  border-color: white transparent;
  position: absolute;
  margin-left: 22%;
}

.topButtons {
  border-style: solid;
  border-color: transparent transparent white transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
} */

.circle {
  border-radius: 100%;
}

.darkInset {
  color: white;
  border-radius: 10px;
  background: #232323;
  -moz-box-shadow: inset 0 0 15px #aaaaaa;
  -webkit-box-shadow: inset 0 0 15px #aaaaaa;
  box-shadow: inset 0 0 15px #aaaaaa;
}

.blackBorder {
  border: 2px solid black;
}

.topContainer {
  width: 100%;
  height: 70px;
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 50%, 45% 50%, 35% 100%);
  padding: 20px;
  border-bottom: 7px solid #89061c;
}

.blueLightBorder {
  background: white;
  width: 60px;
  height: 60px;
  padding: 5px;
  display: inline-block;
}

.blueLight {
  background: radial-gradient(circle at 0px 0px, #28aafd, #196a9e);
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.blueLight:before {
  content: "";
  position: absolute;
  border-radius: 100%;
  background: radial-gradient(circle at 0px 0px, rgba(255, 255, 255, 0.5), #a1dafe 70%);
  opacity: 0.6;
  height: 50px;
  width: 50px;
  -webkit-filter: blur(5px);
  z-index: 2;
}

.blueLight:after {
  width: 50px;
  height: 15px;
  content: "";
  position: absolute;
  background: radial-gradient(circle at 0px 0px, white, white 14%, white 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  -webkit-filter: blur(10px);
}

.topContainer > .light {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: top;
}

.topContainer > .light:before {
  content: "";
  position: absolute;
  border-radius: 100%;
  opacity: 0.6;
  height: 10px;
  width: 10px;
  -webkit-filter: blur(5px);
  z-index: 2;
}

.topContainer > .light:after {
  width: 10px;
  height: 10px;
  content: "";
  position: absolute;
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  -webkit-filter: blur(2px);
}

.redLight {
  background: radial-gradient(circle at 0px 0px, #f56981, #9e061f);
}

.redLight:before {
  background: radial-gradient(circle at 0px 0px, rgba(255, 255, 255, 0.5), #f56981 70%);
}

.redLight:after {
  background: radial-gradient(circle at 0px 0px, white, white 30%, #f4637c 60%);
}

.yellowLight {
  background: radial-gradient(circle at 0px 0px, #feef8d, #a28e0f);
  /* margin-left: 5px; */
}

.yellowLight:before {
  background: radial-gradient(circle at 0px 0px, rgba(255, 255, 255, 0.5), #feef8d 70%);
}

.yellowLight:after {
  background: radial-gradient(circle at 0px 0px, white, white 30%, #feef8d 60%);
}

.greenLight {
  background: radial-gradient(circle at 0px 0px, #8dc395, #316c3a);
  margin-left: 5px;
}

.greenLight:before {
  background: radial-gradient(circle at 0px 0px, rgba(255, 255, 255, 0.5), #8dc395 70%);
}

.greenLight:after {
  background: radial-gradient(circle at 0px 0px, white, white 30%, #8dc395 60%);
}

#imgDisplay {
  width: 80%;
  height: 30%;
  margin: 0 auto;
  padding: 30px;
  margin-bottom: 55px;
}

#imgDisplay > .border {
  background: #dedede;
  height: 100%;
  border-radius: 10px 10px 10px 50px;
  padding: 40px 30px;
}

#imgDisplay .topLights {
  display: flex;
  justify-content: center;
  margin-top: -29px;
  margin-bottom: 5px;
}

#imgDisplay .topLights > .light {
  background: radial-gradient(circle at 0px 0px, #ff6881, #bd0323);
  width: 7px;
  height: 7px;
  margin: 5px;
}

/* .pkmnDisplayRedLight2 {
  background: radial-gradient(circle at 0px 0px, #ff6881, #bd0323);
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-top: -25px;
  margin-left: 11%;
  position: absolute;
} */

#imgDisplay .big {
  background: radial-gradient(circle at 0px 0px, #ff6881, #bd0323);
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-top: 8px;
}

.pkmnImg {
  height: 100%;
  text-align: center;
}

.pkmnSprite {
  height: 100%;
}

#imgDisplay .speaker {
  width: 15%;
  margin-top: -22px;
  margin-left: 85%;
}

#imgDisplay .speaker > .line {
  background: black;
  width: 100%;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 40%;
}

#left > .bottom {
  width: 85%;
  padding: 15px 30px;
  height: 22%;
}

.blackButton {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 0px 0px, #00312b, #000);
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-right: 20px;
}

.blackButton:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 22px 29px, #00312b, #00312b 50%);
  border-radius: 100%;
  opacity: 0.6;
  height: 35px;
  width: 34px;
  margin-left: 1px;
  margin-top: 1px;
}

.red {
  background: #f30029;
  box-shadow: 1px 3px 1px #5c0010
}

.blue {
  background: #0d5075;
  box-shadow: 1px 3px 1px #062637;
}

.narrowButton {
  width: 13%;
  height: 5px;
  border-radius: 34%;
  display: inline-block;
  vertical-align: top;
}

.redButton {
  margin-right: 20px;
}

#nameDisplay {
  font-size: 1.5em;
  text-transform: uppercase;
  text-align: center;
  width: 34%;
  height: 70px;
  padding: 5px;
  background: #51ae5f;
  border-radius: 10%;
  margin-left: 19%;
  margin-top: -15px;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

#dPad {
  width: 100px;
  height: 100px;
  float: right;
  margin-top: -95px;
}

#dPad > div {
  height: 33px;
  width: 33px;
  background: #00312b;

}

#dPad > .up {
  margin: 0 auto;
  border-radius: 20% 20% 0 0;
  box-shadow: 3px 2px 1px black;
  }

  #dPad > .middle {
  background: #00312b;
  width: 100%;
  border-radius: 10%;
  box-shadow: 3px 4px 1px black;
}

#dPad > .down {
  margin: 0 auto;
  background: #00312b;
  border-radius: 0 0 20% 20%;
  box-shadow: 3px 3px 1px black;
}

#hinge {
  width: 35px;
  background: rgb(220,10,45);
  background: linear-gradient(90deg, rgba(220,10,45,1) 0%, rgba(233,102,124,1) 17%, rgba(220,10,45,1) 35%, rgba(137,6,28,1) 68%);
  border-radius: 17px;
  display: inline-block;
  height: 506px;
  margin-top: 75px;
  margin-left: -20px;
  z-index: 5;
}

#hinge > .middle {
  width: 35px;
  border-top: 3px solid #49030f;
  border-radius: 15px;
  display: inline-block;
  height: 88%;
  margin-top: 75%;
}

#hinge > .bottom1 {
  width: 35px;
  background: rgb(220,10,45);
  background: linear-gradient(90deg, rgba(220,10,45,1) 0%, rgba(233,102,124,1) 17%, rgba(220,10,45,1) 35%, rgba(137,6,28,1) 68%);
  border-radius: 15px;
  display: inline-block;
  height: 13%;
  margin-top: -87%;
  border-top: 3px solid #49030f;
}

#hinge > .bottom2 {
  width: 33px;
  background: #89061c;
  height: 3%;
  margin-top: -2%;
  border-width: 3px 1px 1px 1px;
  border-style: solid;
  border-color: #49030f;
  position: absolute;
}
#right {
  border-radius: 0 0 40px 0;
  box-shadow: 6px 10px 2px #89061c;
  margin-left: -20px;
}

#right > .emptyTop {
  background: black;
  width: 100%;
  height: 70px;
  clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 100%, 55% 100%, 45% 50%);
  padding: 20px;
}

#pkmnDescription {
  color: white;
  font-size: 1.3em;
  width: 75%;
  height: 125px;
  margin: 40px 40px 15px;
  background: #232323;
  padding: 15px;
  border-radius: 10px;
}

#numbers {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 40px;
  background: rgb(40,170,253);
  width: 82%;
  border-radius: 10px;
  height: 70px;
  border: 1px solid black;
  overflow: hidden;
  box-shadow: 3px 5px 3px #363636;
}

#numbers > button {
  font-family: 'VT323', monospace;
  font-size: 1.5em;
  flex: 1 0 20%;
    background: rgb(29,117,173);
  background: linear-gradient(43deg, rgba(29,117,173,1) 0%, rgba(40,170,253,1) 50%, rgba(255,255,255,1) 100%);
  border: 1px solid black;
  padding: 0px;
  height: 50%;
  margin-right: -4px;
  box-shadow: 3px 5px 3px #363636;
}

#numbers > button:hover {
  background: rgb(40, 170, 253);
}

#numbers > button:active {
  background: rgba(33, 142, 211, 1);
}

#numbers > button:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 0px 0px, rgba(255, 255, 234, 0.5), #a1dafe 70%);
  opacity: 0.6;
  height: 20px;
  width: 30px;
  -webkit-filter: blur(5px);
  margin-left: -23px;
  margin-top: -7px;
}

#dataButtons {
  width: 30%;
  float: right;
  margin: 10px 25px;
}

#dataButtons > button {
  width: 45%;
  border-radius: 10px;
  height: 10px;
  display: inline-block;
  box-shadow: 2px 3px 5px black;
}

#submit {
  background: #418e4d;
  margin-right: 5px;
}

#submit:active {
  height: 9px;
  background: #316b3a;
}

#clear {
  background: radial-gradient(circle at 0px 0px, #cc0a2a, #a20620);
}

#clear:active {
  height: 9px;
  background: #750417;
}

.pokedexInput input {
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  margin: -10px 40px;
  width: 35%;
  height: 25px;
  background: #dedede;
  border-radius: 10px;
  outline: none;
  padding: 5px;
  border: 1px solid black;
  text-transform: uppercase;
  box-shadow: 2px 3px 5px black;
}

.bigYellowLight {
  float: right;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle at 5px 5px, #fef19b, #a08c0f);
  margin: -15px 30px;
}

#typeDisplay {
  margin: 30px 40px;
  width: 82%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#typeDisplay > div {
  width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
}