/* 
Color Palette, general
Pokeball-Red, Dark: #E85344
Pokeball-Red, Light: #EB6D60
Background: #f5f7f9
*/

/* 
Type out all elements that needs styling
header h1 nav ul li a
main
grid.container div
section article .type
footer
*/

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

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 100svh;
  width: 100svw;
}

header {
  height: 20svh;
  display: flex;
  background-image: url(./ImagesPokemon/PokedexPattern.png);
  background-size: 50svh;
  background-position: 4% 2%;
  background-color: #f5f7f9;
}

h1 {
  margin-top: 7vh;
  text-shadow: 1px 1px darkslategrey;
}

nav {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2%;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  width: 60svw;
}

a {
  text-decoration: none;
  padding: 3px 6px;
  color: black;
  background-color: hsla(210, 25%, 97%, 50%);
  border-radius: 8px;
}

a:hover {
  cursor: pointer;
  background-color: #e85344;
  color: white;
}

h2 {
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  background-color: seagreen;
  color: linen;
  border: 2px solid mediumseagreen;
  padding: 30px;
  margin: 30px auto;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Base-styling for all sections */
section {
  display: flex;
  flex-direction: row;
  width: 80svw;
  justify-content: space-around;
  margin: 50px auto;
}

article {
  padding: 20px;
  border: 3px dashed white;
  border-radius: 10px;
  margin: 5px;
}

img {
  height: 150px;
}

p {
  font-size: 20px;
  font-weight: 500;
  background-color: rgba(250, 240, 230, 0.5);
  padding: 2px 3px 3px 2px;
  border-radius: 5px;
  text-align: center;
  margin: auto;
}

footer {
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  padding: 10px;
}

#pokedexImg {
  height: 50%;
  margin: auto 5svw;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 15px 20px;
}

.container div {
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid;
}

/* Styling for individual Pokemon-cards
will be based on type(s) */

/* Template for copy-paste:
.type {
  background-color: ;
  border-color: ;
} */

/* To come: diagonal split for Pokemons with 2 types */
/* Re-evaluate colors for flying, ground and dragon? */

.fire {
  background-color: #fd7d24;
  border-color: #b14b02;
}

.water {
  background-color: #4592c4;
  border-color: #255474;
}

.poison {
  background-color: #b97fc9;
  border-color: #7e3c90;
}

.bug {
  background-color: #729f3f;
  border-color: #34491d;
}

.normal {
  background-color: #a4acaf;
  border-color: #6c767a;
}

.flying {
  /* background-color: #3DC7EF; #BDB9B8; */
  background-color: #7dc0d3;
  border-color: #3b93ab;
}

.electric {
  background-color: #eed535;
  border-color: #a4900e;
}

.ground {
  /* background-color: #F7DE3F; #AB9842 */
  background-color: #ae9882;
  border-color: #6c5947;
}
.fairy {
  background-color: #fdb9e9;
  border-color: #fa52c7;
}

.fighting {
  background-color: #d56723;
  border-color: #6e3512;
}

.psychic {
  background-color: #f366b9;
  border-color: #d41183;
}

.rock {
  background-color: #a38c21;
  border-color: #3f360d;
}

.ice {
  background-color: #51c4e7;
  border-color: #188fb4;
}

.ghost {
  background-color: #7b62a3;
  border-color: #483960;
}

.dragon {
  /* background-color: #53A4CF; #F16E57 */
  background-color: #a28993;
  border-color: #644f57;
}

.steel {
  background-color: #9eb7b8;
  border-color: #628384;
}

.grass {
  background-color: #9bcc50;
  border-color: #638a28;
}