@font-face {
  font-family: pokemon;
  src: url("/fonts/pokemon-puzzle-challenge-gb.ttf");
}

html,
body {
  margin: 0;
  /* het is hier het beste als we met (min-height)  werken voor toekomstige veranderingen */
  /* height: 100vh; */
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  cursor: url("/images/cursor.cur"), auto;
}

a{
  cursor: url("/images/cursor.cur"), auto;
}

button:hover{
  cursor: url("/images/cursor.cur"), auto;
}

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "main main main"
    "main main main"
    "footer1 footer1 footer1"
    "footer2 footer2 footer2";
  grid-template-rows: auto 1fr auto auto auto;
  background-image: url("/images/forest2.jpg");
  background-size: cover; /* Breedte en hoogte in pixels */
  background-position: center; /* Hiermee wordt de achtergrondafbeelding in het midden van het element geplaatst */
}

/* Navigation styling */

nav {
  display: flex;
  align-items: center;
  grid-area: header;
  /* background-color: #ffde00; */
  width: 100%;
  /* padding: 8px; */
  margin: auto;
  /* margin-bottom: 1rem; */
  align-content: center;
}

.nav-landing {
  background-color: #e60005;
  color: #ffffff;
  display: flex;
}

.dropdown {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

nav img {
  width: 100px;
}
nav a {
  width: 100px;
}
nav a {
  /* font-family: pokemon; */
  text-decoration: none;
  /* color: #3b4cca; */
  color: #000000;
  font-size: 2rem;
  padding: 8px;
  margin: auto;
}
.pfp-nav {
  border-radius: 50%;
  width: 50px;
  border: 2px solid black;
}
nav ul {
  list-style: none;
}
.menu-hamburger {
  border: none;
  background-color: rgba(255, 255, 255, 0.01);
  color: #ffde00;
  margin-left: auto;
}
/* .menu-hamburger:checked {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
} */
.overlay-Menu {
  display: none;
  position: fixed;
  flex-direction: column;
  top: 0;
  right: 0;
  width: 24%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.9);
  border-left: 2px solid #3b4cca;
  /* background-image: url("https://i.pinimg.com/564x/49/61/9c/49619c26dbe077a3b1b5e76831c8ac64.jpg"); */
  /* https://www.pinterest.com/pin/545357836123522035/*/
  background-size: cover;
  background-position: center;
  z-index: 1000;
  color: blue;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
  padding-right: 40px;
}

.menu li {
  border: 2px solid black;
  border-radius: 5px;
  color: black;
  font-size: large;
  background-color: rgb(255, 255, 255, 0.6);
  margin: 5px;
}

.menu-buttons {
  margin: auto;
  margin-top: 10px;
  border: 2px solid #3b4cca;
  border-radius: 5px;
  background-color: #3b4cca;
  width: 200px;
}

.menu li a:hover {
  color: #3b4cca;
  width: 200px;
}
.menu li:hover {
  border-color: #ffde00;
}

/* .menu li:last-child { */
/* display: flex; */
/* flex-direction: row; */
/* font-size: 25px;
  color: #ffde00;
  border: none; */
/* position: absolute;
  bottom: 10px;
  right: 25px; */
/* margin-top: 100px; */
/* } */

.current-pokemon {
  background-color: white;
  border: 3px solid #ffde00;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: 8px;
}

.logout-article {
  display: flex;
  flex-direction: row;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  margin-top: 50px;
}

.logoutbutt {
  text-decoration: none;
  bottom: 0;
  background-color: rgb(255, 255, 255, 0.6);
  border: 2px solid black;
  border-radius: 5px;
  height: 50px;
  width: 100px;
  font-size: large;
}

.logoutbutt:hover {
  background-color: #3b4cca;
  color: #ffde00;
}

.menu-close-button {
  margin: 15px;
  margin-left: auto;
  font-size: xx-large;
  background-color: transparent;
  border: none;
  color: #3b4cca;
}
.menu-close-button:hover {
  color: #ffde00;
}

/* Main content area */

main {
  grid-area: main;
  display: flex;
  align-items: center;
  align-content: center;
}

.pokedex-main {
  display: flex;
  flex-direction: column;
}

/*styling voor sorting*/

.sort-pokemon form select {
  border: none;
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.01);
}

.sort-pokemon form button {
  border: 2px solid #3b4cca;
  background-color: #3b4cca;
  color: white;
  border-radius: 5px;
  font-size: 1.5rem;
}

/* Flex container voor Pokemons */

.sort-pokemon {
  display: flex;
  width: 100%;
  /* margin-left: auto; */
  /* padding-right: 8rem;  */
  /* margin-left: 8rem;  */
}

.sort-pokemon input {
  margin-right: auto;
  margin-left: 8rem;
}

.sort-pokemon form {
  margin-right: 8rem;
}

.fromMypokemon {
  margin-left: 8rem;
  margin-bottom: 20px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  width: 90%;
  margin: auto;
}
footer .flex-container-sengle-item {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  align-content: center;
}
.flex-container-sengle-item figure {
  margin: auto;
  align-items: center;
  align-content: center;
}
.flex-container-sengle-item img {
  width: 350px;
  height: 350px;
}
.flex-container-sengle-item h2 {
  /* display: flex; */
  margin: auto;
  align-items: center;
  align-content: center;
  text-align: center;
  justify-content: center;
  color: rgba(0, 0, 0, 1);
  margin-top: 30px;
  font-size: 40px;
}
.flex-container-sengle-item a {
  text-decoration: none;
}
.flex-container-sengle-item article {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 8px solid black;
}
.flex-container-pokemon-info {
  display: flex;
  flex-direction: row;
  margin: auto;
  /* margin-top: 25px; */
  align-items: center;
  align-content: center;
  text-align: center;
  width: 75%;
}
.flex-container-pokemon-info-one-article {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-container-pokemon-info article {
  border: 3px solid #3b4cca;
  border-radius: 25px;
  margin: 5px;
  height: 95%;
  width: 100%;
  align-items: center;
  align-content: center;
  text-align: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 17.5px;
}

.flex-container-pokemon-info p {
  font-weight: 555;
}

.fa-arrow-down {
  display: none;
}
/* Styling voor individual Pokemon */

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pokemon {
  display: flex;
  flex-direction: column;
  flex-basis: 10%;
  margin: auto;
  align-items: center;
  margin-top: 25px;
  border-radius: 10px;
  background-color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Meer transparante witte achtergrondkleur */
  border: 3px solid #3b4cca;
  justify-content: space-between;
}
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.pokemon:hover {
  border: 3px solid #ffde00;
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

#compare-item-2 {
  -webkit-animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
#compare-item-1 {
  -webkit-animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#battel-item-2 {
  -webkit-animation: slit-in-diagonal-1 0.45s ease-out both;
  animation: slit-in-diagonal-1 0.45s ease-out both;
}
#battel-item-1 {
  -webkit-animation: slit-in-diagonal-2 0.45s ease-out both;
  animation: slit-in-diagonal-2 0.45s ease-out both;
}

.pokemon button {
  padding: 5px 10px;
  font-size: 16px;
  border: 2px solid #3b4cca;
  color: #ffffff;
  background-color: #3b4cca;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  margin: 7.5px;
}

.pokemon button:hover {
  background-color: #ff0000;
  border-color: #3b4cca;
}

.pokemon p {
  font-family: "Courier New", Courier, monospace;
  font-weight: bolder;
  text-transform: uppercase;
}

/* Styling voor choose-starter-pokemon */

.choose-starter-pokemon {
  display: none;
  flex-wrap: wrap;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1000;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.choose-starter-pokemon h1 {
  font-size: 40px;
  text-transform: uppercase;
}
.choose-starter-pokemon a {
  text-decoration: none;
}
.choose-starter-pokemon h2 {
  color: #000000;
  text-transform: uppercase;
  background-color: #ffffff;
}

.home-page {
  display: flex;
  flex-wrap: wrap; /* Veranderd van nowrap naar wrap */
  width: 90%;
  margin: auto;
  justify-content: space-around;
}

@-webkit-keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
.home-page-option {
  width: 200px;
  height: 150px; /* Gelijk gemaakt aan de breedte */
  display: flex;
  text-align: center;
  align-items: center;
  margin: auto;
  margin-bottom: 100px;
}

.home-page-option a p {
  background-color: rgb(255, 255, 255, 0.6);
  border: 1px solid black;
  border-radius: 5px;
  color: black;
  width: auto;
  font-weight: bold;
}

.home-page-option:hover img {
  width: 160px;
  height: 160px;
  -webkit-animation: wobble-hor-bottom 0.8s both;
  animation: wobble-hor-bottom 0.8s both;
}

.home-page-option img {
  width: 150px;
  height: 150px;
}

.home-page-option a {
  text-decoration: none;
  color: #f0f0f0;
}

.home-page-option a p {
  font-size: large;
  font-size: x-large;
}

.home-page-option figure {
  margin: 0;
}

/* Styling voor starterPokemon */

.flex-container-Starter {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
}

.flex-container-Starter article {
  display: flex;
  flex-basis: calc(100% / 3);
  overflow: hidden;
}
.flex-container-Starter article figure img {
  width: 100%;
  height: 100%;
}
.flex-container-Starter article figure {
  margin: 0;
}
.flex-container-Starter article {
  opacity: 0.5;
}
.flex-container-Starter article:hover {
  opacity: 1;
}

/* Styling voor pokeball */

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
    transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
    transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.pokeball {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 192px;
  height: 192px;
  background: radial-gradient(
      white 16px,
      black 17px 18px,
      white 19px 24px,
      black 25px 32px,
      transparent 33px
    ),
    linear-gradient(to bottom, red 0 80px, black 81px 96px, white 97px 100%);
  border-radius: 50%;
  border: 8px solid black;
  /* box-shadow: inset -16px -8px 0 0 rgba(0, 0, 0, 0.2); */
  animation: fall 0.5s ease-in-out 1s, rotate 0.5s linear infinite;
  z-index: 999;
}

#pokeball {
  animation: none;
  -webkit-animation: roll-in-left 0.6s ease-out both;
  animation: roll-in-left 0.6s ease-out both;
  position: absolute;
  bottom: -25%;
  left: 22%;
  background: linear-gradient(
    to bottom,
    rgb(62, 59, 59) 0 80px,
    black 81px 96px,
    white 97px 100%
  );
}

#button-catch-choose {
  margin: auto;
  margin-bottom: 25px;
  background-color: transparent;
  border: none;
  font-size: 25px;
  font-weight: 900;
}

#button-catch-random {
  margin: auto;
  margin-top: 15px;
  background-color: transparent;
  border: none;
  font-size: 25px;
  font-weight: 900;
  color: #3e3b3b;
}

#button-catch-choose:hover, #button-catch-random:hover  {
  color: #ffde00;
  font-size: 30px;
}


.pokeball:hover {
  animation: stop-rotate 0s forwards, scale 0.5s forwards;
}

/* Animation */

@keyframes fall {
  0% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scale {
  to {
    transform: scale(2);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes stop-rotate {
  0% {
    transform: rotate(0deg);
  }
}

/* Styling voor vergelijken */

.compare {
  display: flex;
  width: 80%;
  margin: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: auto;
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}

@-webkit-keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
}
@keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes slit-in-diagonal-2 {
  0% {
    -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
    transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
    transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0);
    transform: translateZ(0) rotate3d(-1, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes slit-in-diagonal-2 {
  0% {
    -webkit-transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
    transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
    transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotate3d(-1, 1, 0, 0);
    transform: translateZ(0) rotate3d(-1, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-webkit-keyframes slit-in-diagonal-1 {
  0% {
    -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
    transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
    transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0);
    transform: translateZ(0) rotate3d(1, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes slit-in-diagonal-1 {
  0% {
    -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
    transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
    transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0);
    transform: translateZ(0) rotate3d(1, 1, 0, 0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

@-webkit-keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
.compare-item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: 27%;
  align-items: center;
  border-radius: 10px;
  background-color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Meer transparante witte achtergrondkleur */
  border: 3px solid #3b4cca;
  justify-content: space-between;
  margin: auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.compare-item a {
  display: flex;
}
.compare-item img {
  background-color: #ffffff;
  border-radius: 10px;
}
.compare-item figure {
  width: 100%;
}
.compare button,
#button,
aside button {
  padding: 10px 15px;
  font-size: 16px;
  border: 2px solid #3b4cca;
  color: #ffffff;
  background-color: #3b4cca;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  margin: 7.5px;
}

.compare button i {
  font-size: 7.5rem;
  color: #bcc6cf;
}

.compare button i:hover {
  color: #3b4cca;
}

.nav-landing a {
  font-family: Arial, Helvetica, sans-serif;
}

.compare button:hover {
  background-color: #ff0000;
  border-color: #3b4cca;
}
.layer {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 7.5px;
  z-index: 1; /* laag bovenop de inhoud */
  text-align: center;
  justify-content: center;
  align-items: center;
}

.login {
  display: flex;
  align-items: center;
}

.main_login {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: auto;
  background-color: #c1cad3;
  padding: 20px;
  height: 500px;
  margin-top: 0;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
button {
  cursor: pointer;
}

.submit {
  width: 280px;
  padding: 5px 10px;
  font-size: 16px;
  border: 2px solid #3b4cca;
  color: #ffffff;
  background-color: #3b4cca;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  margin: 7.5px;
  font-family: Arial, Helvetica, sans-serif;
}

.input {
  margin: auto;
  margin-top: 15px;
  border-radius: 5px;
  border: 3px solid #3b4cca;
  height: 20px;
  width: 280px;
}

/* Styling voor vergelijken close-button */

.layer-close-button {
  position: absolute;
  top: 0;
  right: 0;
}

.layer-close-button button {
  border-radius: 50%;
}

.close_button {
  float: right;
  color: #3b4cca;
  font-size: 18px;
  border: 2px solid #3b4cca;
  border-radius: 50%;
  background-color: transparent;
}
.close_button:hover {
  color: #000000;
  /* font-size: 20px; */
  border: 2px solid #000000;
  border-radius: 50%;
  background-color: #3b4cca;
}

/* Style voor de (popup) */

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: auto;
}

/* Overlay style (popup) */

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* Style voor images (popup) */
.popup .image-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px;
  width: 600px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  margin: auto;
}
.image-container img {
  height: auto;
  cursor: pointer;
  margin-right: 5px;
}
.image-container p {
  text-align: center;
  font-weight: bolder;
}

/* Footer styling */

footer {
  color: #ffde00;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  /* background-color: rgba(0, 0, 0, 0.5); */
}
.footer-logo {
  width: 100px;
}
.footer-1,
.footer-1-landing {
  margin-top: 1rem;
  grid-area: footer1;
  border-top: 1px solid gray;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
.footer-2,
.footer-2-landing {
  font-size: 1rem;
  height: 1.25rem;
  grid-area: footer2;
  justify-content: center;
}
footer a {
  color: white;
}

.footer-1-landing,
.footer-2-landing {
  background-color: #e60005;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.footer-1-landing a {
  color: #ffffff;
}

.footer-icon {
  height: 1rem;
}
footer article {
  padding: 8px;
}

.green-ball,
.red-ball {
  height: 32px;
}

.main-landing section {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.main-landing {
  display: flex;
  justify-content: center;
}

.main-landing a {
  text-decoration: none;
  background-color: #c1cad3;
  color: #3b4cca;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 20px;
  max-width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #e60005;
  flex-basis: 33%;
  margin: 2rem;
  transition: background-color 0.3s ease;
}

.fifa {
  background-image: url("/images/football-stadium-night-generative-ai_260559-480.avif"); /*bron: https://commons.wikimedia.org/wiki/File:Thimiane.jpg*/
  background-size: cover;
}

.lotr {
  background-image: url("/images/den7ba0-d24fac90-f6a6-44b9-b020-f0f15e8272c4.png"); /*bron: https://www.deviantart.com/thedemonicmaster/art/The-One-Ring-885498840*/
  background-size: contain;
}

.fortnite {
  background-image: url("/images/Fortnite_F_lettermark_logo.png"); /*bron: https://commons.wikimedia.org/wiki/File:Fortnite_F_lettermark_logo.png*/
  background-size: contain;
}

.pokemon-landing {
  background-image: url("/images/dexythf-a001be4d-d27b-47e8-b296-7b03bc9add93.png"); /*bron: https://www.deviantart.com/invisibleinkdoodles/art/Pikachu-903578307*/
  background-size: contain;
}

.lm {
  background-image: url("/images/3005-brick-1x1-rood.png"); /*bron: https://haanderik.nl/wp-content/uploads/2020/06/3005-brick-1x1-rood.png*/
  background-size: contain;
}

.mtg {
  background-image: url("/images/images.png"); /*bron: https://www.goodfon.com/games/wallpaper-hugh-pindur-magic-the-gathering-krylia-peria-sirena.html*/
  background-size: contain;
}

.main-landing a:hover {
  background-color: #ffde00;
}

.hamburger {
  display: none;
}

.login {
  display: flex;
  flex-direction: column;
  /* text-align: center; */
  align-items: center;
}

.login-landing {
  color: #ffffff;
  display: flex;
  align-items: center;
  margin-left: auto;
  width: 50px;
}

.nav-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pokeball-404 {
  height: 250px;
}

h3 {
  background-color: #e60005;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
}

.main-404 h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 250px;
  margin: 1rem 0;
}

.main-404 {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: #f2f2f2;
}
.positive {
  color: green;
}
.negative {
  color: red;
}

.main-mypokemon {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.section-mypokemon {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.pokemon-mypokemon {
  display: flex;
  flex-direction: column;
  flex-basis: 25%;
  margin: auto;
  align-items: center;
  margin-top: 25px;
  border-radius: 10px;
  background-color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Meer transparante witte achtergrondkleur */
  border: 3px solid #3b4cca;
  justify-content: space-between;
  min-height: 325.33px;
}
.button-mypokemon {
  background-color: transparent;
  border: none;
}
.green-ball,
.red-ball {
  height: 32px;
}

.meter {
  box-sizing: content-box;
  height: 20px; /* Can be anything */
  position: relative;
  margin: 30px 0 10px 0; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  /* padding: 10px; */
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

#pokemonFilter {
  /* width: 100%; */
  /* padding: 10px; */
  /* margin-bottom: 20px; */
  border: 2px solid #3b4cca;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  text-align: center;
  /* background-color: rgba( 255, 255, 255, 0.7 ); */
}

#pokemonFilter:focus {
  border-color: #3b4cca;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.orange > span {
  background-image: linear-gradient(#f1a165, #f36d0a);
}

.red > span {
  background-image: linear-gradient(#f0a3a3, #f42323);
}

.blue > span {
  background-image: linear-gradient(#a3a3f0, #2323f4);
}

.white > span {
  background-image: linear-gradient(#ffffff, #cccccc);
}

.yellow > span {
  background-image: linear-gradient(#ffffa3, #ffff23);
}

.purple > span {
  background-image: linear-gradient(#d7a3f0, #7523f4);
}
.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #3b4cca;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffde00;
}

.type-icon {
  display: inline-block;
  width: 66px;
  margin-bottom: 4px;
  background: #dbdbdb;
  border: 1px solid #a3a3a3;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.5rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  transition: opacity 0.4s;
  text-decoration: none;
  justify-content: center;
}

.type-grass {
  background-color: #7c5;
}
.type-poison {
  background-color: #a59;
}
.type-normal {
  background-color: #aa9;
}
.type-fire {
  background-color: #f42;
}
.type-water {
  background-color: #39f;
}
.type-electric {
  background-color: #fc3;
}
.type-ice {
  background-color: #6cf;
}
.type-fighting {
  background-color: #b54;
}
.type-ground {
  background-color: #db5;
}
.type-flying {
  background-color: #89f;
}
.type-psychic {
  background-color: #f59;
}
.type-bug {
  background-color: #ab2;
}
.type-rock {
  background-color: #ba6;
}
.type-ghost {
  background-color: #66b;
}
.type-dragon {
  background-color: #76e;
}
.type-dark {
  background-color: #754;
}
.type-steel {
  background-color: #aab;
}
type-fairy {
  background-color: #e9e;
}

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  /* position: fixed; */
  /* width: 90%; */
  height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.title button {
  background-color: rgb(255, 255, 255, 0.01);
  border: none;
  height: 30px;
}

.title button:hover {
  color: #ffde00;
}

#noMarginTop {
  margin-top: 0;
}

#battle-button:hover{
  -webkit-animation:wobble-hor-bottom .8s both;animation:wobble-hor-bottom .8s both
}

.resultBattle {
  display: flex;
  flex-direction: row;
  margin: auto;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin-bottom: 5px;
}
.resultBattle div {
  margin: 5px;
  justify-content: center;
  /* padding: 5px; */
  border-radius: 25px;
  font-size: 17.5px;
  font-weight: 600;
}

.resultBattle button {
  background-color: transparent;
  border-style: none;
  font-size: 15px;
  font-weight: 900;
}

.resultBattle button:hover {
  color: #ffde00;
}

.wins {
  background-color: green;
  opacity: 0.5;
  display: flex;
  align-items: center;
}
.losses {
  background-color: red;
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.wins:hover,
.losses:hover {
  opacity: 1;
}

.resultBattle i {
  font-size: 24px;
}

.capturedPokemon {
  opacity: 0.5;
}

.capturedPokemon:hover {
  opacity: 1;
}

#flex-container-sengle-item-guess {
  -webkit-animation: slide-in-elliptic-top-fwd 0.7s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

#flex-container-myPokemons {
  width: 66%;
  height: 544px;
  overflow-x: hidden;
  overflow-y: auto;
}
#pokemon-flex-basis-25 {
  flex-basis: 25%;
}

#myForm-guessPoke {
  -webkit-animation: slide-in-elliptic-top-fwd 0.7s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

#myInput-guessPoke {
  margin-top: 22px;
  width: 350px;
  text-align: center;
  font-size: 22px;
  height: 25px;
  border: 3px solid black;
}

@media screen and (max-width: 768px) {
  html,
  body {
    max-width: 100%;
  }

  body {
    grid-template-areas:
      "header"
      "main"
      "main"
      "footer1"
      "footer2";
    grid-template-rows: auto 1fr auto auto auto;
  }

  .pokemon {
    flex-basis: 44%;
  }

  .login-landing {
    margin-left: auto;
  }

  .nav-section {
    align-items: flex-start;
  }

  .dropdown {
    display: none;
  }
  .dropdown.open {
    display: flex;
    flex-direction: column;
  }

  /* .hamburger {
    display: flex;
    margin-right: auto;
    padding: 0;
    background-color: transparent;
    border: none;
  } */

  /* .hamburger-icon {
    width: 32px;
    height: 32px;
  } */

  .main-landing section {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .main-landing {
    display: flex;
    justify-content: center;
  }

  .main-landing a {
    text-decoration: none;
    color: #3b4cca;
    font-family: pokemon;
    border-radius: 20px;
    max-width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #e60005;
    flex: 1 0 33%;
    margin: 2rem;
  }

  nav {
    max-height: fit-content;
  }

  .choose-starter-pokemon article {
    flex-direction: column;
    flex-basis: 100%;
  }
  .compare {
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
  }
  .popup {
    width: 325px;
  }
  .popup .image-container {
    width: 355px;
    /* height: auto; */
    overflow-x: auto;
    overflow-y: auto;
  }

  .image-container figure {
    margin: 0;
  }

  .layer-close-button button {
    font-size: 13px;
    margin: 3.5px;
  }

  .flex-container {
    margin-bottom: 25px;
  }

  #flex-container-sengle-item {
    scale: 0.7;
  }

  .main-404 h1 {
    font-size: xx-small;
  }

  .home-page {
    margin-top: 25px;
    flex-flow: column;
  }
  .home-page-option {
    flex-basis: 100%;
    justify-content: center;
  }

  .flex-container-pokemon-info {
    width: 75%;
    display: flex;
    flex-direction: column;
  }

  .flex-container-pokemon-info section {
    display: flex;
    flex-direction: column;
  }

  .flex-container-pokemon-info article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #3b4cca;
  }
  .fa-arrow-right {
    display: none;
  }
  .fa-arrow-down {
    display: contents;
  }

  .overlay-Menu {
    width: 75%;
  }

  nav a {
    font-size: 1.5rem;
  }

  .pokemon-mypokemon {
    flex-basis: 100%;
  }

  .pokeball-404 {
    height: 100px;
  }

  .sort-pokemon {
    flex-direction: column;
    justify-content: center;
    margin: auto;
  }

  .sort-pokemon form select {
    font-size: 1.2rem;
  }

  .sort-pokemon form button {
    font-size: 1.2rem;
  }

  .sort-pokemon input {
    margin-right: 0;
    margin-left: 0;
    margin: auto;
  }

  .sort-pokemon form {
    margin-right: 0;
    margin-left: 0;
    margin: auto;
    margin-top: 10px;
  }

  .fromMypokemon {
    margin-left: 0;
  }

  #noMarginTop {
    margin-top: 15px;
  }

  #flex-container-sengle-item-guess {
    -webkit-animation: none;
    animation: none;
    scale: 0.7;
  }

  #flex-container-myPokemons {
    width: 80%;
    height: 544px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #pokemon-flex-basis-25 {
    flex-basis: 44%;
  }

  .sort-pokemon {
    margin-bottom: 10px;
  }

  #myForm-guessPoke {
    -webkit-animation: none;
    animation: none;
    /* scale: 0.7; */
    /* margin-bottom: 111px; */
  }

  .footer-1-landing p {
    margin: 0;
  }

  th {
    padding: 5px;
  }

}