@charset "UTF-8";

*{
    font-family: var(--font01);
    box-sizing: border-box;
}

.pokemons{
    display: grid;

    list-style: none;
    margin: 0;
    padding: 0;
}

.pokemon{
    margin: .5rem;
    padding: 1rem;

    font-weight: 500;

    display: flex;
    flex-direction: column;

    border-radius: 1rem;
    color: var(--corTexto01);
}

.normal{
    background-color: var(--normal);
}
.grass{
    background-color: var(--grass);
}
.fire{
    background-color: var(--fire);
}
.water{
    background-color: var(--water);
}
.electric{
    background-color: var(--electric);
}
.ice{
    background-color: var(--ice);
}
.ground{
    background-color: var(--ground);
}
.flying{
    background-color: var(--flying);
}
.poison{
    background-color: var(--poison);
}
.fighting{
    background-color: var(--fighting);
}
.psychic{
    background-color: var(--psychic);
}
.dark{
    background-color: var(--dark);
}
.rock{
    background-color: var(--rock);
}
.bug{
    background-color: var(--bug);
}
.ghost{
    background-color: var(--ghost);
}
.dragon{
    background-color: var(--dragon);
}
.steel{
    background-color: var(--steel);
}
.fairy{
    background-color: var(--fairy);
}

.pokemon .name{
    color: var(--corTexto01);
    text-transform: capitalize;
}

.pokemon .detail{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pokemon .detail img{
    height: 70px;
    max-width: 100%;
}

.pokemon .detail .types{
    padding: 0;
    margin: 0;

    list-style: none;
}

.pokemon .detail .types .type{
    color: var(--corTexto01);

    padding: .25rem .5rem;
    margin: .25rem 0;

    font-size: .625rem;
    text-align: center;

    border-radius: 1.2rem;

    filter: brightness(1.12);
}

.pokemon .number{
    text-align: right;
    color: var(--corTexto02);
    font-size: .625rem;
}

.pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
}
.pagination button{
    background-color: var(--cor003);
    color: var(--corTexto01);
    border: none;
    border-radius: 1rem;
    padding: .25rem .5rem;
    margin: .25rem 0;
    font-size: .7rem;
}

/* MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-content {
    width: 87%;
    max-width: 350px;
    border-radius: 20px;
    position: relative;
    text-align: center;
    animation: slideIn 0.3s ease-out;
}
#modalBodyEspecification{
    margin: 50px 20px;
    margin-bottom: 0;
}

.detail-container{
    margin-top: 3.5rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.detail-container .detail-info{
    min-width: 40%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}
.detail-container .number{
    color: var(--corTexto01);
    font-size: .8rem;
    font-weight: bold;
}
.detail-container .detail-info .name{
    margin: 0;
    margin-bottom: .35rem;
    padding: 0;
    color: var(--corTexto01);
    text-transform: capitalize;
}
.detail-container .detail-info .types{
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.detail-container .detail-info .types .type{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    color: var(--corTexto01);

    padding: .1rem .5rem;
    margin-right: .2rem;

    font-size: .75rem;
    text-align: center;

    border-radius: 1.2rem;

    filter: brightness(1.12);
}

#modalBodyEspecification img{
    margin-top: 1.5rem;
    width: 150px;
    height: 150px;
}
.abilities{
    text-transform: capitalize;
    text-align: right;
    width: 60%;
}

@keyframes slideIn {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.close-btn .material-symbols-outlined{
    color: var(--corTexto01);
}

.detail-stats { 
    width: 100%;
    text-align: left; 
    margin-top: -30px; 
    background: #f9f9f9; 
    padding: 15px; 
    padding-top: 50px;
    border-radius: 1.5em 1.5rem 20px 20px; 
}

.stat-row { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: .6rem; 
}

/* MEDIA QUERIES */
@media screen and (min-width: 380px){
    .pokemons{
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 576px){
    .pokemons{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 992px){
    .pokemons{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}