@media screen and (max-width: 500px){
    div.main {
        padding: 0 10px;
    }
    .login-box form a {font-size: 12px}
    h1 {font-size:12pt;}
    table.transaction-table {
        width:100%;
        max-width: 100%;
        font-size:12px;
    }
    table.deb-table {
        width:100%;
        max-width: 100%;
        font-size:12px;
    }
    table.deb-table th{
        font-size:9px
    }
    div.menu{
        flex-wrap: wrap;
    }
    div.menu a{
        width:auto;
        text-align: center;
        /*font-size:10px;*/
        flex: 1;
    }
    .login-box {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        padding: 40px;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,.5);
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0,0,0,.6);
        border-radius: 10px;
    }

    div.grid {
        display:grid;
        gap: 10px
    }

    div.grid.bidGrid{
        grid-template-columns: 100%;
        align-items: start;
        justify-content: start;
    }

    form.newBid input {
        padding:10px 10px;
        font-size: 12pt;
        border-radius: 10px;
        border: 1px solid;
        max-width: none;
        width: calc(100% - 20px);
        text-align: center;
    }
}