@font-face {
    font-family : "Boogaloo";
    src : url("boogaloo.ttf");
}


body,input, select, button {
    font-family : 'Boogaloo', 'monospace';
    background-color : #FFFFF0;
}

.main-content {
    margin-bottom : 30%;
}

.account-summary-grid {
    display : grid;
    grid-template-columns : auto auto;
    grid-row-gap : 0.2em;
}

.account-info-block {
    display : flex;
    flex-direction : column;
    padding : 0.5em;
}

.account-name-block {
    display : flex;
    font-size : 2em;
}

.account-action-block {
    display : flex;
    align-items : center;
}

.account-balance-block {
    font-size : 2em;
    display : flex;
}

.account-total {
    font-size : 2em;
    margin-top : 1em;
}

.transact-header {
    display : flex;
    flex-direction : column;
    align-items : center;

}

.transact-header-textbox {
    display:flex;
    flex-direction : row;
    justify-content : space-between;
    width : 100%;

}

.transact-header-bar {
    width : 90%;
    margin-top : 1em;
    margin-bottom : 1em;
}

.transact-header-title {
    display : flex;
    justify-content : center;
    align-items : center;

    font-size : 3em;
    font-weight : bold;
    margin : 0.1em;
}

.transact-header-balance {
    display : flex;
    justify-content : center;
    align-items : center;
    font-size : 2.5em;
    padding : 0.25em;
}


.transaction-bar {
    padding-top : 1em;
    display : flex;
    padding-bottom : 1em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    background-color : #999999;

}

.transaction-inputs {
    display : flex;
    flex-direction : column;
    width : 100%;
}

#transact-number-input {
    width : 100%;
    font-size : 2em;
}

#transact-description-input {
    width : 100%;
    font-size : 2em;

}

#transact-transfer-from-input {
    width : 100%;
    font-size : 2em;
    background-color : #FFFFFF;

}

#transact-submit {
    width : 25%;
    font-size : 3em;
    display : flex;
    justify-content : center;
    align-items : center;
    /*background-color : #777777;*/
    margin-left : 0.5em;
    margin-right : 0.5em;

    border : none;
}

#transact-submit:active {

    background-color : #444444;
}

.transact-table {
    width : 100%;
    border-collapse : collapse;
}

.transact-row {
    font-size : 1em;
}

/*makes every other table row a different color*/
tr:nth-child(even) {
    background-color : #999999;
    font-size : 1em;
}


.transact-date {
}

.transact-amount {
}

.transact-message {
    width : 60%;
}

#append-transactions {
    width : 100%;
    text-align : center;
    font-size : 2em;

}

#append-transactions:active {
    background-color : #999999;

}


.button-panel {
    position : fixed;
    display : flex;
    justify-content : space-around;
    bottom : 0;
    right : 0;
    left : 0;
    z-index : 10;
}

.stretch-button {
    display : flex;
    background-color : 999999;
    width : 100%;
    align-items : center;
    padding : 0.5em;
    justify-content : center;
    margin : 0.1em;
    font-weight : bold;
    font-size : 2em;
    border : none;
}

.stretch-button:hover {
    background-color : #666666;
}

.stretch-button:active {
    background-color : #000000;
    color : #FFFFFF;

}

.action-button {
    display : flex;
    background-color : 999999;
    align-items : center;
    justify-content : center;
    font-weight : bold;
    font-size : 2em;
    width : 2em;
    height : 2em;
    border-radius : 100%;
    border-style : none;
    border-color : black;
    margin : 0.1em;
}

.action-button:hover {
    background-color : #666666;
}

.action-button:active {
    background-color : #000000;
    color : #FFFFFF;
}


.account-header {
    font-size : 3em;
    font-weight : bold;
}

.account-list-row {
    display :flex;
    justify-content : space-between;
    font-size : 2em;
}

.account-list-button-pane {
    display : flex;
    justify-content : end;
}

.account-list-toggle-button {
    display : flex;
    background-color : 999999;
    align-items : center;
    justify-content : center;
    font-weight : bold;
    font-size : 1em;
    border-style : none;
    border-color : black;
    margin : 0.1em;

}

.account-list-toggle-button:hover {
    background-color : #666666;
}

.account-list-toggle-button:active {
    background-color : #000000;
    color : #FFFFFF;
}

#new-account-input {
    width : 100%;
    font-size : 1em;

}
#new-account-button {
    font-size : 1em;

}


.search-header {
    display : flex;
    flex-direction : column;
    align-items : center;

}

.search-header-textbox {
    display:flex;
    flex-direction : row;
    justify-content : space-between;
    width : 100%;

}

.search-header-bar {
    width : 90%;
    margin-top : 1em;
    margin-bottom : 1em;
}

.search-header-title {
    display : flex;
    justify-content : center;
    align-items : center;

    font-size : 3em;
    font-weight : bold;
    margin : 0.1em;
}

#search-submit {
    width : 25%;
    font-size : 3em;
    display : flex;
    justify-content : center;
    align-items : center;
    /*background-color : #777777;*/
    margin-left : 0.5em;
    margin-right : 0.5em;

    border : none;
}

#search-submit:active {

    background-color : #444444;
}

.search-bar {
    padding-top : 1em;
    display : flex;
    padding-bottom : 1em;
    padding-left : 0.5em;
    padding-right : 0.5em;
    background-color : #999999;

}

.search-inputs {
    display : flex;
    flex-direction : column;
    width : 100%;
}

#search-at-least,
#search-at-most {
    width : 45%;
    font-size : 2em;
}

#search-from,
#search-to {
    width : 45%;
    font-size : 2em;

}

.search-input-sep {
    font-size : 2em;
    padding : 3%;
}


.login-box {
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    height : 100%;
    width : 100%;
    font-size : 2rem;
}

.login-box input,
.login-box button {
    font-size : 2rem;
}

/*color adjustments*/

.lred-element {
    background-color : #FF9999;

}

.lgreen-element {
    background-color : #99FF99;

}

.lblue-element {
    background-color : #9999FF;

}

.dred-element {
    background-color : #BB3333;

}

.dgreen-element {
    background-color : #33BB33;

}

.dblue-element {
    background-color : #3333EE;

}
/*desktop stuff*/

@media screen and (min-width : 960px) {

    body {
        margin-left : 15%;
        margin-right : 15%;
    }

    .stretch-button {
        width : 70%;

    }

    .account-summary-grid {
        grid-template-columns : 30% auto;
    }
    .account-summary-grid {
        grid-row-gap : 0.4em;
    }

    .account-name-block {
        font-size : 3em;
    }

    .account-balance-block {
        font-size : 3em;
    }

    .account-total {
        font-size : 3em;
    }

    .action-button {
        font-size : 3em;
    }

    .account-list-row {
        font-size : 3em;
    }

    .search-header-title,
    .transact-header-title {
        font-size : 4em;
    }

    .transact-header-balance {
        font-size : 3.5em;
    }

    .search-input-sep, 
    #search-at-least,
    #search-at-most,
    #search-from,
    #search-to,
    #transact-number-input,
    #transact-description-input,
    #transact-transfer-from-input {
        font-size : 3em;
    }

    #search-submit,
    #transact-submit {
        font-size : 4em;
    }

    .transact-row,
    tr:nth-child(even) {
        font-size : 2em;
    }

}