* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  list-style-type: none;
}
body {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 255, 0.596),
    rgba(255, 255, 0, 0.815),
    rgba(255, 166, 0, 0.904),
    rgba(16, 255, 16, 0.541),
    rgba(177, 72, 238, 0.726),
    rgba(247, 0, 255, 0.637)
  );
  background-size: cover;
  font-family: cursive;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-container {
  margin: 1rem;
  border: 1rem rgb(187, 15, 255) outset;
  border-radius: 3rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
}
.main-title h1 {
  margin: 3rem 1rem 3rem 1rem;
  font-size: 5rem;
  color: rgb(230, 0, 122);
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px,
    #ff2d95 0px 0px 20px, #ff2d95 0px 0px 30px, #ff2d95 0px 0px 40px,
    #ff2d95 0px 0px 50px, #ff2d95 0px 0px 75px;
}
.searchbox {
  border-radius: 1rem;
}
input {
  border-radius: 1.5rem;
  width: 25rem;
  height: 3rem;
  font-size: x-large;
  margin: 0.5rem;
  padding: 1rem;
  border: 0.3rem solid rgb(250, 1, 229);
}
button {
  width: 8rem;
  height: 3rem;
  border-radius: 1.5rem;
  font-size: x-large;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  color: rgb(139, 1, 128);
  font-weight: bolder;
  cursor: pointer;
  border: 0.3rem solid rgb(250, 1, 229);
}
button:hover {
  box-shadow: rgba(133, 128, 128, 0.13) 0px -23px 25px 0px inset,
    rgba(170, 165, 165, 0.15) 0px -36px 30px 0px inset,
    rgba(156, 148, 148, 0.1) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(153, 146, 146, 0.09) 0px 8px 4px,
    rgba(143, 138, 138, 0.09) 0px 16px 8px,
    rgba(156, 151, 151, 0.09) 0px 32px 16px;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}
.search-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title h2 {
  margin: 1rem 4rem;
  font-size: 4rem;
  justify-content: center;
  align-items: center;
  color: #ff2d95;
  text-shadow: 0 -1px 4px #fff, 0 -2px 10px #ff0, 0 -10px 20px #ff8000,
    0 -18px 40px #f00;
}
.picture {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 20rem;
  height: 20rem;
  margin: 2rem;
  border: white 1.5rem solid;
  background-color: #ff2d95;
}
.picture img {
  width: 140%;
  height: 140%;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: rgb(24, 114, 248) inset 1rem;
  object-fit: cover;
}
.pokemon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.342);
  border-radius: 3rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.title h3 {
  font-size: 2rem;
  margin: 1rem 4rem;
  font-size: 3rem;
  font-weight: bolder;
  justify-content: center;
  align-items: center;
  color: rgb(135, 0, 202);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18,
    0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
}
.stats,
.abilities {
  width: 100%;
  margin: 1rem;
  text-align: center;
  justify-content: center;
}
ul li {
  font-size: larger;
  color: rgb(86, 4, 180);
  font-weight: bolder;
  font-size: 1.5rem;
  text-align: left;
  padding-left: 6rem;
  word-spacing: 1rem;
  width: 80%;
}
.name-link {
  margin: 1rem;
  font-size: x-large;
  text-shadow: 1px 3px 0 #969696, 1px 13px 5px #aba8a8;
}
.link {
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 1rem;
}
i {
  font-size: xx-large;
}
/* Media Queries for Tablets */
@media (max-width: 768px) {
  .main-container {
    margin: 0.5rem 0.5rem;
    padding: 1rem;
    border-radius: 2rem;
  }

  .main-title h1 {
    margin: 2rem 0.5rem 2rem 0.5rem;
    font-size: 3rem;
  }
}

/* Media Queries for Phones */
@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
  }

  .main-container {
    margin: -6rem 0.25rem;
    padding: 0.5rem;
    border-radius: 2rem;
    transform: scale(0.7);
  }

  .main-title h1 {
    margin: 1rem 0.25rem 1rem 0.25rem;
    font-size: 2rem;
  }

  .searchbox {
    flex-direction: column;
    align-items: stretch;
  }
  .search-input,
  .search-button {
    font-size: 1rem;
    padding: 0.5rem;
    margin: 0.25rem 0;
  }
  .pokemon-card .title h2 {
    font-size: 1.5rem;
  }
  .result-div {
    width: 80%;
    padding: 0.5rem;
  }
}