* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    padding: 0;
}

:root {
    --background-color: #141417;
    --color: #ffffff;
    --surface-color: #242429;
}

.light {
    --background-color: #eae8eb;
    --color: #242429;
    --surface-color: #f8f7f8;
}

.normal {
    background: #d9cc9f;
}

.fire {
    background: #e9ab7e;
}

.water {
    background: #8ec3d0;
}

.grass {
    background: #92c9ac;
}

.electric {
    background: #f3d67c;
}

.ice {
    background: #a4d1e9;
}

.fighting {
    background: #e47164;
}

.poison {
    background: #ae6fac;
}

.ground {
    background: #ebd8a5;
}

.flying {
    background: #776e8a;
}

.psychic {
    background: #e3a4b5;
}

.bug {
    background: #add8a3;
}

.rock {
    background: #b2afa7;
}

.ghost {
    background: #7e78a2;
}

.dragon {
    background: #a885a8;
}

.dark {
    background: #585f6f;
}

.steel {
    background: #a5b0c2;
}

.fairy {
    background: #ecc0c9;
}

body {
    background-color: var(--background-color);
    color: var(--color);
    height: 100vh;
    transition: margin 0.3s ease, background-color 0.3s ease;
}

.search-bar:active, button:active {
    filter: brightness(.9);
}

header {
    align-items: center;
    display: grid;
    grid-template-areas: "title title config"
        "search search search";
    padding: 1rem 2rem;
}

.heading {
    grid-area: title;
}

.config {
    grid-area: config;
    justify-self: end;
}

.config button {
    margin-right: .5rem;
}

.search {
    align-items: center;
    display: flex;
    grid-area: search;
    justify-content: center;
}

.search-bar {
    background-color: var(--surface-color);
    border: none;
    border-radius: 1.5rem;
    color: var(--color);
    height: 2.6rem;
    outline: none;
    text-align: center;
    width: 90%;
}

.material-symbols-outlined,
.load-more-button {
    background-color: var(--surface-color);
    border: none;
    color: var(--color);
    cursor: pointer;
    padding: .5rem;
}

.material-symbols-outlined {
    border-radius: 50%;
    height: 2.6rem;
    text-align: center;
    width: 2.6rem;
}

.pokemon-type {
    border-radius: .2rem;
    font-size: .8rem;
    font-weight: bold;
    margin-right: .1rem;
    padding: .2rem;
    text-transform: capitalize;
}

.pokemon-name {
    text-transform: capitalize;
}

.load-more-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

.load-more-button {
    border-radius: .5rem;
    border-radius: .5rem;
    width: 70%;
}

@media screen and (min-width: 580px) {
    header {
        grid-template-areas: "title search config config";
        padding: 1rem 2rem;
    }

    .search-bar {
        width: 90%;
    }
}

@media screen and (min-width: 1190px) {
    .search-bar:hover, button:hover {
        filter: brightness(.9);
    }
}