@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&family=Nabla&family=Special+Elite&display=swap');
*{
    box-sizing: border-box;
}
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-image: url("images/bg.jpg");
    background-size: cover;
}
header{
    border-top:30px solid lightblue;
    padding:0;
    margin-bottom:5rem;
    width:100%;
}
h1{
    border-top:30px solid pink;
    margin:0;
    text-align:center;
    padding:1rem;
    font-size:5rem;
    background-color:hsla(0,0%,100%,50%);
    font-family:"Libre Barcode 39 Text", Geneva, Verdana, sans-serif;
}
.math{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin:0 auto;
    font-family:"Special Elite", Georgia, 'Times New Roman', Times, serif;
    font-size:1.5rem;
}
.form{
    margin-left:10rem;
    padding-top:1rem;
    padding-left:5rem;    
}
input,select{
    font-family:"Special Elite", Georgia, 'Times New Roman', Times, serif;
    font-size:1.2rem;
    padding:0.5rem;
    margin-top:0.2rem;
    margin-bottom:0.5rem;
    background-color:hsla(0,0%,100%,70%);
    border:none;
}
label{
    margin-left:1ch;
}
#diners, #bill, #tip{
    width:10ch;
}
#diners, #tip, #province{
    margin-left:1ch;
}
.totals{
    margin-right:5rem;
    border-left:2px dashed black;
}

ul{
    list-style-type:none;
}
li{
    margin-bottom:0.5rem;
}
.money{
    background-color:black;
    color:white;
    display:inline-block;
    padding:0.5rem 0.5rem 0.2rem 0.5rem;
}
#msg{
    padding-left:2.5rem;
    padding-top:1.5rem;
}
footer{
    font-family:"Special Elite", Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding:1rem 0 0 0;
    width:100%;
    background-color:hsla(0,0%,100%,50%);
    position:absolute;
    bottom:0;
    border-bottom:15px solid lightblue;
}
small{
    display:block;
    width:100%;
    border-bottom:15px solid pink;
    margin:0;
    padding-bottom:.8rem;
}

@media screen and (max-width:1214px){
    .form{
        margin-left:5rem;
    }
}

@media screen and (max-width:1060px){
    .form{
        margin-left:1rem;
    }
}

@media screen and (max-width:914px){
    header{
        margin-bottom:2rem;
    }
    .math{
        display:block;
    }
    .form{
        margin:0 0 2rem 0;
    }
    .totals{
        border-left:none;
        border-top:2px dashed black;
        margin:0 auto;
        padding:2rem 0 0 2.5rem;
    }
    #msg{
        padding-left:0;
        padding-right:0;
    }
    footer{
        position:relative;
    }
}

@media screen and (max-width:569px){
    h1{
        font-size:4rem;
    }
    .math{
        font-size:1.2rem;
    }
    input,select{
        font-size:1rem;
    }
}

@media screen and (max-width:385px){
    .form{
        margin:0;
        padding-left:2rem;
    }
    .totals{
        margin:0;
        padding-left:0;
    }
}

@media screen and (max-width:340px){
    .math{
        font-size:1rem;
    }
    input,select{
        font-size:0.7rem;
    }
}