@media (max-width:550px) {
    header {
        height: 80px;
    }

    #header-logo{
        width: 160px;
    }

    #search-input{
        width: 200px;
        height: 32px;
        font-size: 16px;
        background-color: #2b2b2a;
        border: none;
        box-sizing: border-box;
        color: whitesmoke;
    }

    footer {
        height: 80px;
    }
}

@media (max-width:440px) {
        
    #pokemon-overlay-card{
        width: 320px;
        height: 600px;
    }

    #overlay-pokemon-sprite{
    width: 200px;
    }

    #pokemon-info-container{
        font-size: 16px;
    }
}

@media (max-width:420px) {
        
    #header-logo{
        width: 120px;
    }

    header {
        padding-left: 10px;
        padding-right: 10px;
    }
    #pokemon-overlay-card{
        width: 100%;
        height: 100vh;
    }
}

@media (max-width:380px) {
    #search-input{
        width: 180px;
        font-size: 16px;
    }

    #overlay-pokemon-sprite{
        width: 160px;
    }

    #progress-bar-container {
        width: 45%;

    }

    .info-button {
        width: 88px;
        height: 40px;
        border-radius: 8px;
        border: none;
        background-color: rgb(195, 195, 195);
        font-size: 16px;
        font-weight: bold;
    }
}