* {
    box-sizing: border-box;
}

html, body {
    /* height: 100%; */
    margin: 0;
    background-color: rgb(4, 94, 100);
    scroll-behavior: smooth;
}
.container, .poke-container, .type-container {
    display: flex;
}

.container {
    justify-content: space-evenly;
    height: inherit;
}

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

.logo {
    height: 50vh;
    width: 50vw;
}

.input-search {
    border: red 2px solid;
    border-radius: 5px;
}

.poke-container {
    color: black;
    display: none;
    background-color: #ffcb05;
    border: 3px #2a74ba solid;
    border-radius: 5px;
    width: 50vw;
    height: inherit;
    text-align: center;
}

.type-container {
    display: flex;
    justify-content: space-around;
}



@media only screen and  (max-width: 800px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .logo {
        height: 25vh;
        width: 75vw;
    }

    .poke-container {
        width: 95vw;
    }
}