@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');

* {
    font-family: "DynaPuff", system-ui;
}

body {
    background: url('../images/pokemon\ capa.jpg') no-repeat center;
    background-size: cover;
    height: 100vh;

    display: grid;
    place-items: center;
}

main {
    background: url('../images/pokedex.png') no-repeat center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;

    display: grid;
    place-items: center;
    position: relative;
}

.pokemon__image {
    position: absolute;
    top: 38%;
    left: 32%;
    width: 25%;
}

.pokemon__data {
    position: absolute;
    top: 53%;

    left: 24%;
    font-size: 600;
    color: rgb(18, 24, 23);
    font-size: 2rem;
}

.pokemon__name {
    color: cornflowerblue;
    text-transform: capitalize;
    font-size: 1.4rem;
    font-weight: bold;
}

.form {
    position: absolute;
    bottom: 27%;
    left: 16%;
    width: 65%;
}

.input__search {
   width: 100%; 
   padding: 3%;
   outline: none;
   border-radius: 5px;
   font-weight: 600;
   font-size: 1.4rem;
   color: blue;
   background-color: rgb(164, 185, 212);
   box-shadow: -3px 4px #000000, -5px 7px #333;
}

.buttons {
    position: absolute;
    bottom: 16%;
    left: 16%;
    width: 65%;
    display: flex;
    gap: 1.25rem;
}

.button {
    width: 50%;
    padding: 4%;
    border: 2px solid #000;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    background-color: dimgrey;
    color: blue;
    box-shadow: -2px 3px rgb(94, 94, 95), -4px 6px #fff;
    cursor: pointer;
}

.button:active {
    font-size: 1.1rem;
    box-shadow: inset -4px 4px #fff;
}

@media (min-width:760px) {
    main {
        width: 25rem;
        height: 90%;
    }
    
.pokemon__data {
    font-size: 1.8rem;
}

.buttons {
    bottom: 12.5%;
}

.pokemon__image {
    top: 30%;
}

}

/* @media (max-device-height: 768px) and (max-width: 400px) {
    .pokemon__image {
        top: 30vh;

    }
} */

@media (min-width: 2500px) {
    main {
        max-width: 40rem !important;
    }
}