body{
    background-color:#1E3A8A;
}
.saldo{
    position: relative;
    left: 80%;
    width: 14%;
    color: #e9ecef;
    
}

.saldo p{
    position: relative;
    left: 8%;
    width: 14%;
    color: #e9ecef;
}

.ação{
    position: relative;
    width: 30%;
    left: 10%;
    color: #e9ecef;
    margin-top: -7%;

}   
.ação select{
    position: relative;
    left: 40px;
      border-radius: 10%;
        border-color:aqua;
        border-width: 3px;
}



#inp{
    background-color: #3B82F6;
    width: 100%;
    height: 500px;
    color: aliceblue;
    /** gera uma barra de rolagem dentro da DIV */
    overflow-y:auto ;
    justify-content:space-evenly;
    position: relative;
    
    text-align: center;
    margin-top: 40px;

    padding-top: 40px;
    
}


input {
    position: relative;
    left: 500px;
    width: 32%;
    height: 30px;
    background-color: bisque;

}

.extra{
    position: relative;
    left: 690px;
    width: 32%;
    color: #e9ecef;
}

.valores{
    position: relative;
    left: 700px;
    width: 32%;
    color: #e9ecef;
}

button{
    width:20%;
    background-color: #2563EB;
    margin-top: px;
    position: relative;
    left: 600px;
    color: white;
    height: 50px;
    cursor: pointer;
}


@media screen and (max-width: 480px) {



    .saldo{
        width: 20%;
        position: relative;
        left: 28%;
        margin-top: 30px;
        display:flex;
    }

    .saldo p{
        margin-top: 30px;
        font-size: 20px;
    }

    .extra{
        position: relative;
        left: 34%;
        align-items: center;
        justify-content: center;
        margin-top: 30px;

    }

    .valores{
        position: relative;
        left: 29%;
        align-items: center;
        justify-content: center;
        font-size:19px;
        width: 50%;
    }

    input{
         left: 25%;
        align-items: center;
        justify-content: center;
        width: 50%;
        font-size: 22px;
    }

    button{
        width: 29%;
        left: 37%;
        align-items: center;
        justify-content: center;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        
    }

}

@media (max-width: 375px) {
 
    .saldo{
        width: 20%;
        position: relative;
        left: 35%;
        margin-top: 30px;
        display:flex;
    }

     .saldo p{
        margin-top: 30px;
        font-size: 20px;
    }

    .ação{~
        width: 50%;
        position: relative;
        left: 14%;
        
    }

    .ação h1{
        margin-top: 50px;
        font-size: 18px;
        position: relative;
        left: 50%;
        /* faz com que a tag não quebre linha*/
        white-space: nowrap;
        
    }

    select{
      
        width: 120%;
        font-size: 13px;
        position: relative;
        left: 80%;
    }

     .extra{
        position: relative;
        left: 35%;
        align-items: center;
        margin-top: 30px;

    }

    .valores{
        position: relative;
        left: 28%;
        align-items: center;
        justify-content: center;
        font-size:19px;
        width: 50%;
        white-space: nowrap;
    }

    input{
         left: 25%;
        align-items: center;
        justify-content: center;
        width: 50%;
        font-size: 22px;
        height: 17px;

    }

    button{
        width: 29%;
        left: 37%;
        align-items: center;
        justify-content: center;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        white-space: nowrap;
        width: 51%;
        position: relative;
        left: 26%;
        height: 26px;
    }




}