body{
    background-image: url(https://images.unsplash.com/photo-1613274554329-70f997f5789f?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#container{
    background-color: rgb(246, 240, 240, 0.8);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 500px;
    height: 625px;
    border: 5px solid white;
    border-radius: 40px;
}

h1{
    font-family: "Montserrat", sans-serif;
    color: rgb(13, 64, 28);
    align-self: center;
}

form{
    display: flex;
    flex-direction: column;
    font-family: "Montserrat", sans-serif;
    margin: 15px;
    padding: 5px;
}

input{
    font-family: "Montserrat", sans-serif;
    padding: 5px;
    border-radius: 10px;
}

#addTip{
    background-color: rgb(95, 160, 138);
    border:none;
    border-radius: 10px;
    padding:10px;
    font-family: "Montserrat", sans-serif;
}

#btn{
    background-color: #FF9A9A;
    padding: 10px;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
}

#tip{
    font-family: "Montserrat", sans-serif;
    display: none;
}

#showTotalAmountToPay{
    display: flex;
}

#billSplit, #totalTip, #totalAmount{
    font-family: "Montserrat", sans-serif;
    background-color: rgb(246, 240, 240);
    margin: 10px;
    padding:20px;
    border-radius: 10px;
    border: 3px solid white;
    color: rgb(13, 64, 28);
    width: 100px;
}

@media all and (max-width: 593px){
    #container{
         width: 400px;
        height: 600px;
    }

    #billSplit, #totalTip, #totalAmount {
        padding:5px;
    }
    
}