.poke-container {
    display: flex;
    justify-content: space-around;
    max-width: 1300px;
    margin: 50px 0;
}

.enemy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30vw;
}

#poke-img {
    max-width: 475px;
}

.api-info-container {
    width: 40vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.api-info-container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    gap: 10px;
    width: 100%;
    padding: 10px;
}

.border > p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
}

.border > div { /* These are the img conatiners */ 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.border.green {
    border-radius: 15px;
    background-color: rgba(75, 200, 75, 0.5);
    box-shadow: 0 0 20px 3px #ddd;
}

.border.red {
    border-radius: 15px;
    background-color: rgba(200, 75, 75, 0.5);
    box-shadow: 0 0 10px 5px #ddd;
}

.border.yellow {
    border-radius: 15px;
    background-color: rgba(209, 221, 43, 0.5);
    box-shadow: 0 0 10px 5px #ddd;
}

.api-info-container img {
    max-height: 35px;
}

@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
      }
    15% {
        transform: rotateZ(-15deg);
      }
    20% {
        transform: rotateZ(10deg);
      }
    25% {
        transform: rotateZ(-10deg);
      }
    30% {
        transform: rotateZ(6deg);
      }
    35% {
        transform: rotateZ(-4deg);
      }
    40%, 100% {
        transform: rotateZ(0);
      }
}

@keyframes upAndDown {
    0%, 7% {
        transform: translateY(0);
      }
    15% {
        transform: translateY(5px);
      }
    20% {
        transform: translateY(-3px);
      }
    25% {
        transform: translateY(3);
      }
    30% {
        transform: translateY(-2);
      }
    35% {
        transform: translateY(1);
      }
    40%, 100% {
        transform: translateY(0);
      }
}

.wiggle {
    animation: wiggle 2s linear infinite;
}

.upAndDown {
    animation: upAndDown 1.5s linear infinite;
}

#api-type-two {
    display: none;
}

#api-ability {
    font-weight: 700;
    font-style: italic;
    text-transform: capitalize;
}

#api-ability-desc {
    font-size: 18px;
    max-width: 30vw;
}

#api-super-moves,
#api-bad-moves {
    font-size: 18px;
}

#api-super-moves-imgs,
#api-bad-moves-imgs {
    padding: 6px 0;
}

label {
    font-size: 20px;
}

.search {
    font-size: 25px;
}

/* Mobile Responsiveness */

@media screen and (max-width: 768px) {
    .poke-container {
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
    }

    .poke-container p {
        margin: 0;
    }

    .enemy-container,
    .api-info-container {
        width: 60vw;
    }

    #poke-img {
        max-width: 300px;
    }

    .black {
        margin-top: 30px;
    }

    .border p {
        font-size: 1.2rem;
    }

    #api-ability-desc {
        max-width: 40vw;
    }
}

@media screen and (max-width: 480px) {
    .enemy-container {
        width: 80vw;
        padding: 10px;
    }

    .api-info-container {
        width: 80vw;
        padding-bottom: 15px;
    }

    #poke-img {
        max-width: 200px;
    }
    .search {
        font-size: 20px;
    }

    .border {
        max-width: 65vw;
    }

    .border.black {
        max-width: 80vw;
    }

    .api-info-container img {
        max-height: 30px;
    }

    #api-ability {
        padding-right: 4px;
    }

    #api-ability-desc {
        max-width: 80vw;
    }
}