/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./client/styles/index.scss ***!
  \*******************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap);
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./client/styles/index.scss (1) ***!
  \***********************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap);
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./client/styles/index.scss (2) ***!
  \***********************************************************************************************************************/
.team-section {
  background-color: #6F7597;
  position: relative;
  padding-bottom: 50px;
  border-top: #000 solid 2px;
}

.team-section::before {
  position: absolute;
  content: "";
  left: 50%;
  z-index: 10;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%) translateY(50%);
  bottom: 0px;
  border-bottom: #000 solid 2px;
}

.team-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  margin: 0px 250px;
  color: #fff;
}
.team-header p {
  text-align: center;
}
.team-header button {
  background-color: #27D0DE;
  border-radius: 5px;
  cursor: pointer;
}
.team-header button:hover {
  background-color: #39e8f8;
}

.pokemon-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  color: #fff;
}

.pokemon-background {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 0px 250px;
  margin-bottom: 40px;
  border-radius: 10px;
}

.all-pokemon {
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  margin: 35px 20px;
  background-color: #D4D9FF;
  border-radius: 5px;
  box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(66, 66, 66);
  color: #000;
}

.single-pokemon {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding: 8px;
  margin: 5px 10px;
  background-color: #D4D9FF;
  border-radius: 5px;
}
.single-pokemon img {
  width: 200px;
  height: 200px;
}

.pokemon-types {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.search-section {
  background-color: #e4e4dc;
  padding: 15px;
  padding-top: 50px;
  padding-bottom: 100px;
  margin-top: -45px;
}

.search-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  padding-left: 20px;
  padding-right: 20px;
}
.search-container input {
  border-radius: 3px;
}
.search-container button {
  background-color: #27D0DE;
  border-radius: 5px;
  cursor: pointer;
}
.search-container button:hover {
  background-color: #39e8f8;
}

.results-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0px 250px;
  padding: 15px;
  padding-bottom: 30px;
  border-radius: 10px;
  gap: 70px;
}
.results-container img {
  width: 250px;
  height: 250px;
  border: none;
}

.results-img {
  flex-direction: column;
  padding-left: 40px;
  padding: 10px;
  margin-top: 20px;
  background-color: #D4D9FF;
  border-radius: 5px;
  box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.5);
  gap: 10px;
  border: 2px solid rgb(66, 66, 66);
}
.results-img p {
  margin: 5px;
}
.results-img img {
  margin: 5px;
}

.results-data {
  flex-direction: column;
  background-color: #D4D9FF;
  padding: 5px 20px;
  padding-right: 30px;
  border-radius: 5px;
  border: 2px solid rgb(66, 66, 66);
  box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.5);
}

#search {
  margin-right: 20px;
}

.form {
  padding-top: 10px;
  padding-bottom: 10px;
}

.type-section {
  background-color: #6F7597;
  padding: 30px 0px;
  padding-bottom: 60px;
  color: white;
  display: flex;
  flex-direction: column;
  border-bottom: #000 solid 2px;
  border-top: #000 solid 2px;
}

.type-header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.type-container {
  background-color: #D4D9FF;
  margin: 0px 450px;
  border-radius: 10px;
  border: 2px solid rgb(66, 66, 66);
  box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.5);
  padding: 10px;
  justify-content: center;
  align-content: center;
}

.type-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0px 50px;
  padding: 20px;
  padding-bottom: 5px;
  gap: 10px;
}

.type-results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px 50px;
  color: #000;
  padding-top: 5px;
}
.type-results p {
  flex-direction: row;
}

#normal-button {
  background-color: #ABA77A;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#normal-button:hover {
  background-color: #bfba88;
}

#fire-button {
  background-color: #EE8130;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#fire-button:hover {
  background-color: #ff9442;
}

#water-button {
  background-color: #6390f0;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#water-button:hover {
  background-color: #709eff;
}

#grass-button {
  background-color: #7AC74C;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#grass-button:hover {
  background-color: #87e054;
}

#electric-button {
  background-color: #F7D02C;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#electric-button:hover {
  background-color: #ffd942;
}

#ice-button {
  background-color: #96D9D6;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#ice-button:hover {
  background-color: #aaf2ee;
}

#fighting-button {
  background-color: #C22E28;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#fighting-button:hover {
  background-color: #d5312c;
}

#poison-button {
  background-color: #A33EA1;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#poison-button:hover {
  background-color: #bc49ba;
}

#ground-button {
  background-color: #E2BF65;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#ground-button:hover {
  background-color: #f5ce6e;
}

#flying-button {
  background-color: #A98FF3;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#flying-button:hover {
  background-color: #bca4fc;
}

#psychic-button {
  background-color: #F95587;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#psychic-button:hover {
  background-color: #fa739c;
}

#bug-button {
  background-color: #A6B91A;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#bug-button:hover {
  background-color: #b7cb1c;
}

#rock-button {
  background-color: #B6A136;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#rock-button:hover {
  background-color: #c6ae3a;
}

#ghost-button {
  background-color: #735797;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#ghost-button:hover {
  background-color: #8363ad;
}

#dark-button {
  background-color: #705746;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#dark-button:hover {
  background-color: #826857;
}

#dragon-button {
  background-color: #6F35FC;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

#dragon-button:hover {
  background-color: #7f4dfd;
}

#steel-button {
  background-color: #B7B7CE;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#steel-button:hover {
  background-color: #c9c9e1;
}

#fairy-button {
  background-color: #D685AD;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

#fairy-button:hover {
  background-color: #ee96c2;
}

.ability-section {
  background-color: #e4e4dc;
  padding: 15px;
  padding-bottom: 100px;
}

.ability-container {
  background-color: #D4D9FF;
  display: flex;
  margin: 0px 150px;
  margin-top: 30px;
  border-radius: 10px;
  border: 2px solid rgb(66, 66, 66);
  box-shadow: 4px 5px 2px rgba(0, 0, 0, 0.5);
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  align-content: center;
  color: #000;
  flex-wrap: wrap;
  flex-direction: column;
}
.ability-container form {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.ability-container label {
  margin: 10px;
}
.ability-container select {
  margin: 10px;
  font: 16px "VT323", sans-serif;
}
.ability-container button {
  background-color: #27D0DE;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}
.ability-container button:hover {
  background-color: #39e8f8;
}

.ability-results {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin-bottom: 50px;
}

.ability-header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.nav-container {
  background-color: #A42323;
  padding-bottom: 60px;
  margin-bottom: 25px;
  padding-top: 30px;
  position: relative;
  border: #000;
  border-style: solid;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.5);
}

.nav-container::before {
  position: absolute;
  content: "";
  left: 50%;
  z-index: 10;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%) translateY(50%);
  bottom: 0px;
  background-color: rgb(234, 233, 233);
  border: #000;
  border-style: solid;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.5);
}

.nav-img {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.nav-img img {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 150px;
  margin-bottom: 20px;
}

.nav-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  gap: 150px;
  margin-left: 40px;
  padding-bottom: 10px;
}
.nav-links a {
  text-decoration: none;
  color: white;
  font-family: "VT323", sans-serif;
  font-size: 24px;
  background-color: #6F7597;
  padding: 15px;
  border-radius: 50px;
  margin-bottom: 15px;
  transition-duration: 100ms;
  transition-property: color;
  border: 2px solid rgb(66, 66, 66);
}
.nav-links a:hover {
  color: #27D0DE;
}

.footer-container {
  text-align: center;
  background-color: #A42323;
  padding: 15px;
  padding-top: 55px;
  border: #000;
  border-style: solid;
}
.footer-container a {
  text-decoration: none;
  color: white;
}
.footer-container a:hover {
  color: #27D0DE;
}

.return-arrow {
  font-size: 22px;
}

body {
  top: 0;
  left: 0;
  margin: 0;
  background-color: #858582;
  font: 18px "VT323", sans-serif;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 24px;
}

button {
  font-family: "VT323", sans-serif;
  font-size: 18px;
}

html {
  scroll-behavior: smooth;
}

/*# sourceMappingURL=styles.css.map*/