style.css

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300;400;500;600;700;800&display=swap');
/* flex:shrink - para adaptar minha div na div principal */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxanium', cursive;

}

body{
    text-align: center;
    min-height: 100vh;
    background: linear-gradient(to bottom,#6ab7f5,#fff);
}

main{
    position: relative;
    display: inline-block;
    padding: 15px;
    margin-top: 2%;
}

.pokedex{
    width: 100%;
    max-width: 425px;
}

.pokemon{
    position: absolute;
    bottom: 51%;
    left: 50%;
    transform: translate(-63%,0);
    height: 18%;
}

.data_pokemon{
    position: absolute;
    color: rgb(112, 112, 112);
    font-weight: 600;
    bottom: 40%;
    right: 27%;
    font-size: clamp(8px,5vw, 25px);
}

.pokemon_name{
    /* apenas a primeira letra em maiusculo */
    text-transform: capitalize; 
    color: #3a444d;

}

.form{
    position: absolute;
    width: 65%;
    bottom: 28%;
    left: 13.5%;
}

.search_pokemon{
    padding: 4%;
    width: 100%;
    outline: none;
    border: 2px solid #333;
    border-radius: 10px;
    box-shadow: -2px 3px 0 #888,-4px 5px 0 #333;
    font-weight: 600;
    color: #3a444d;
    font-size: clamp(8px,5vw, 15px);

}

.butons{
    position: absolute;
    bottom: 18%;
    left: 50%;
    width: 65%;
    transform: translate(-57.5%,0);
    display: flex;
    gap: 20px;


}
.exit{
    position: absolute;
    visibility: hidden;
    bottom: 30.5%;
    right: 20%;
    border: 2px solid #333;
    background-color: #444;
    font-size: clamp(8px,5vw,15px);
    padding: 2px 8px;
    color: white;
    
}

.exit:active{
    box-shadow: inset -4px 4px 0 #222;
    /* font-size: 0.9rem; */
}
.button{
    width: 50%;
    padding: 4%;
    font-size: clamp(8px,5vw,13px);
    border-radius: 10%;
    border: 2px solid #333;
    box-shadow: -2px 2px 0 #222,-4px 3px 0 #000;
    color: white;
    background-color: #444;
}

.button:active{
    box-shadow: inset -4px 4px 0 #222;
    font-size: 0.9rem;
}



.ativo{
    position: absolute;
    visibility: hidden;
    bottom: 15%;
    left: 11.5%;
    background-color: #e3e3e3;
    border-radius: 5px;
    border: 2px solid #333;
    box-shadow: -2px 3px 0 #888,-4px 5px 0 #333;
    width: 70%;
}



.texto{
    display: block;
    margin-top: 1%;
    margin-bottom: 2%;
    margin-left: 2%;
    text-align: left;
    text-transform: capitalize;

}