* {
  margin: 0;
  font-family: "Syne", sans-serif;
  scroll-behavior: smooth;
}

body {
  background-color: #ffee93;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pokeball {
  z-index: 0;
  transform: rotate(-35deg);
  height: 320px;
  position: absolute;
  top: -30px;
  left: -85px;
}

nav {
  z-index: 350;
  display: none;
  flex-direction: column;
  position: absolute;
  top: 160px;
  left: 180px
}

.logo-container {
  display: flex;
  align-items: center;
}

nav img {
  height: 45px;
  margin-right: 16px;
}

h1 {
  font-size: 36px;
  font-weight: 800;

}

nav input {
  font-style: oblique;
  padding: 3px 6px;
  margin-left: 4px;
  margin-top: 16px;
  border: 2px solid black;
  border-radius: 8px;
  height: 30px;
  width: 160px;
}

#pokedex {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  z-index: 300;
  background-color: #FFF2E1;
  margin: 120px;
  margin-bottom: 50px;
  padding: 160px 40px 40px 40px;
  border: 3px solid black;
  border-radius: 20px;
  display: none;
  flex-wrap: wrap;
}

.pokedex-card {
  height: 400px;
  width: 240px;
  margin: 12px;
  cursor: pointer;
  color: black;
  padding: 24px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 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(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  border: 3px solid black;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.pokedex-card:hover {
  transform: scale(1.015);
}

#image {
  height: 200px;
  display: flex;
  
}

#id {
  font-size: 20px;
  margin-bottom: 4px;
  margin-top: 32px;
}

#name {
  font-size: 20px;
}

.type-container {
  margin-top: 36px;
  display: flex;
}

.type-container button {
  cursor: pointer;
  font-size: 16px;
  padding: 8px;
  width: 80px;
  margin: 4px;
  border: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.more-pokemon-button-container {
  display: none;
  justify-content: center;
  align-items: end;
}

.more-pokemon-button {
  cursor: pointer;
  border: 3px solid black;
  padding: 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  background-color: #FFF2E1;
  margin-bottom: 40px;
}

.arrow {
  position: fixed;
  z-index: 999;
  top: 20%;
  right: 2%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.arrow img:hover {
  transition: all 125ms ease;
  transform: translateY(10px) scale(1.2);
}

.arrow img {
  height: 50px;
}


.padding {
  padding: 8px;
}

.blurred {
  opacity: 0.2;
}

.d-none {
  display: none;
}

#loader {
  font-weight: bold;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  gap: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#loader img {
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@media(max-width: 977px) {
  #pokedex {
    display: flex;
    justify-content: center;
  }
}

@media(max-width: 670px) {
  .pokeball {
    height: 250px;
    top: -90px;
    left: -85px;
  }
  
  nav {
    z-index: 350;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30px;
    left: 40px
  }
  
  nav img {
    height: 30px;
    margin-right: 16px;
  }
  
  h1 {
    font-size: 28px;
  }
  
  nav input {
    margin-top: 4px;
    border: 2px solid black;
    border-radius: 8px;
    height: 22px;
    width: 140px;
  }
  
  #pokedex {
    z-index: 300;
    margin: 16px;
    margin-bottom: 50px;
    padding: 80px 8px 8px 8px;
    border: 3px solid black;
    border-radius: 20px;
    display: flex;
    justify-content: center;
  }
  
  .pokedex-card {
    height: 280px;
    width: 168px;
    cursor: pointer;
    color: black;
    padding: 24px;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22), 1px 0px 0px 0px rgba(0,0,0,0.22), 1px 2px 0px 0px rgba(0,0,0,0.22), 2px 1px 0px 0px rgba(0,0,0,0.22), 2px 3px 0px 0px rgba(0,0,0,0.22), 3px 2px 0px 0px rgba(0,0,0,0.22), 3px 4px 0px 0px rgba(0,0,0,0.22), 4px 3px 0px 0px rgba(0,0,0,0.22), 4px 5px 0px 0px rgba(0,0,0,0.22), 5px 4px 0px 0px rgba(0,0,0,0.22), 5px 6px 0px 0px rgba(0,0,0,0.22), 6px 5px 0px 0px rgba(0,0,0,0.22), 6px 7px 0px 0px rgba(0,0,0,0.22), 7px 6px 0px 0px rgba(0,0,0,0.22), 7px 8px 0px 0px rgba(0,0,0,0.22), 8px 7px 0px 0px rgba(0,0,0,0.22);
    border: 2px solid black;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #image {
    height: 140px;
    display: flex;
  }

  #id {
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: 25px;
  }
  
  #name {
    font-size: 18px;
  }
    
  .type-container {
    margin-top: 8px;
    display: flex;
  }

  .type-container button {
    cursor: pointer;
    font-size: 12px;
    padding: 8px;
    width: 80px;
    margin: 4px;
    border: none;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
    
  .more-pokemon-button-container {
    display: flex;
    justify-content: center;
    align-items: end;
  }
  
  .more-pokemon-button {
    border: 2px solid black;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .arrow {
    top: 20%;
    right: 5.5%;
    font-size: 10px;
  }

  .arrow img {
    height: 30px;
  }
  
  .padding {
    padding: 8px;
  }
  
  .blurred {
    opacity: 0.2;
  }
  
  .d-none {
    display: none;
  }
}