index.css

body{
    font-family: Varela,"Segoe UI","Helvetica Neue",Arial;
    margin: 0;
}
body > div{
    text-align: center;

    display: none;
}
body > div.not-hidden{
    display: block !important;
}
#main{
    text-align:left;
}
a{
    font-size: 1.25em;
}
.pokemon{
    display: inline-grid;
    cursor: pointer;
    grid-template:
        "a b"
        "c c";
    padding: 5px;

    width: 9em;
    margin: 0.25em;
    border: 1px solid rgb(220, 231, 220);
    border-radius: 10px;
    cursor: pointer;
    height: 7em;
    position: relative;
    /* font-size: 0.8em; */
}
.pokemon img{
    margin: auto;
    grid-area: c;
}

.main h1>button,.main #barra{
    display: none;
}
header{
    position: sticky;top:0;
    background:white;
    z-index: 1;
    padding-bottom: 0.2rem;

    display: grid;grid-template: "a a" "b c" / 1fr;
}
header > span{
    margin: auto;
    margin-right: .5rem;
}
h1{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background-color: rgb(68, 91, 161);
    color: white;
    margin: 0px;
    padding: 0px;
    font-size: 1.5em;
    text-align: center;

    grid-area: a;
}
h1 > span{
    flex-grow: 2;
    margin: 0.4em 0px;
}
button{
    background: none;
    border: none;
    filter: invert(100%) sepia(0%) saturate(109%) hue-rotate(329deg) brightness(105%) contrast(102%);
    height: 3em;
    width: 4em;
}
button > img{
    height: 2.5rem;
}
#barra{
    display: block;
    height: 25px;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 0.6em 0.5em 0;
}
#barra-contenido{
    height: 100%;
    background: red;
    width: 0;
}