@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');

:root {
--darkCyan:  hsl(183, 91%, 13%);
--darkCyan2: rgb(53, 155, 129);
--darkGrayish:hsl(186, 14%, 43%);
--graysihCyan:hsl(184, 14%, 56%);
--lightGrayishCyan:hsl(185, 41%, 84%);
--veryLightGrayishCyan:hsl(180, 37%, 93%);
--white:hsl(0, 0%, 100%);
}

html {
    font-family: 'Space Mono', monospace;
    background-color: var(--lightGrayishCyan);
}

.main-container {
    display: flex;
    justify-content: center;
}

.header {
    text-align: center;
    text-transform: uppercase;
    line-height: 0.5;
    font-weight: lighter;
    margin-top:140px;
    color:var(--darkCyan);
}

.main-title {
    letter-spacing: 10px;
    font-weight: lighter;
    font-size:30px;
}

.board-container {
    max-width: 920px;
    display: grid;
    grid-template-columns: 50% 50% ;
    margin-top:80px; 
    justify-content: center;
    background-color:white;
    border-radius:20px;
}

.left-container {
    display: grid;
    grid-template-rows: auto auto auto;
    padding:40px;
    height:400px;
}

.bill-title {
    margin-bottom:5px;
    margin-top:0px;
    color:var(--darkCyan);
}

.bill-content {
    display: flex;
    padding: 4px;
    background-color: var(--veryLightGrayishCyan);
    border-radius:5px;
    justify-content: space-between;
}

.bill-container {
    margin-bottom:0px;
    width: auto;
    display:grid;
    grid-template-rows: auto auto;
}

input[name=bill-field]{
    border:none;
    text-align:right;
    background-color: var(--veryLightGrayishCyan);
    color:var(--darkCyan);
    font-size:26px;
    font-family: 'Space Mono', monospace;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

.dolar-img {
    padding:10px;
}

.avatar-img {
    padding:12px;
}

.tip-title {
    margin-bottom:5px;
    margin-top:30px;
    color:var(--darkCyan);
    font-size:17px;
}

.btns-container{
    display:grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    padding-top:12px;
    align-items:center;
    row-gap:1rem;
    column-gap:10px;
}

.btns {
    text-align: center;
    width: 100%;
}

.btn5 {
    padding-left:47px;
    padding-right:45px;
}

button:hover{
    background-color:var(--darkCyan2);
}

.pressed {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    background-color:var(--graysihCyan);
}

button {
    border:none;
    color:white;
    background-color:var(--darkCyan);
    padding:10px 40px 10px 40px;
    text-align:center;
    font-family: 'Space Mono', monospace;
    font-size:20px;
    border-radius:5px;
}

input[name=custom]{
    border:none;
    text-align:center;
    font-size:20px;
    font-family: 'Space Mono', monospace;
    max-width: 95px;
    background-color: var(--veryLightGrayishCyan);
    padding:10px 10px 10px 10px;
    border-radius:5px;
}

.hide {
    display: none;
}

.right-container{
    padding:30px 30px 30px 30px;
}

.right-container-content {
    border-radius:15px;
    height:100%;
    background-color: var(--darkCyan);
}

.right-pad{
    padding:40px;
    padding-top:60px;
}

.flex {
    display: flex;
    justify-content: space-between;
    line-height: 0.7;
}

.reset-btn {
    margin-top:140px;
    bottom:50px;
}

.reset-content {
    padding-left: 130px;
    padding-right: 130px;
    background-color: var(--darkCyan2);
    text-transform: uppercase;
    color:var(--darkCyan);
}

.reset-content:hover{
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    background-color:var(--graysihCyan);
}


.value-tip {
    color: var(--darkCyan2);
    font-size:45px
}

p{
    color: var(--graysihCyan);
    font-size:13px;
    font-weight:lighter;
}

.tip-total {
    color:white;
}

.total{
    margin-top:45px;
}

.btn-inp1:hover {
    background-color:black;
    background-color:var(--darkCyan2);
    color:white;
}



@media only screen and (max-width: 960px) {
    .board-container {
        max-width: 920px;
        display: grid;
        grid-template-columns: auto ;
        /* margin-top:80px;  */
        background-color:white;
        border-radius:20px;
        padding:20px;
    }

    .main-width {
        width:100%;
        margin-left:1px;
        margin-right:1px;
    }
    

    /* .btns-container{
        display:grid;
        grid-template-columns: auto auto ;
        grid-template-rows: auto auto auto;
        padding-top:12px;
    } */
  }