@media(max-width: 690px){
    html{
        overflow-x: hidden;
        background-color: white;
    }
    body{
        background: linear-gradient(45deg, aqua,hotpink);
        scrollbar-color: transparent transparent;
        height: 1290px;
    }
    .todayTag{
        left: 80px;
    }
    .DateUpdate{
        left: 35%;
    }
    .box{
        flex-direction: column;
    }
    .container1{
        width: 93%;
        position: relative;
        top: 15px;
        left: 3.5%;
        height: 435px;
        justify-content: center;
        padding-top: 15px;
        background-color: transparent;
        /*outline: 1px solid dimgrey;*/
        border-radius: 15px;
        box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
    }
    .calendar{
        position: inherit;
        left: 0;
        width: 71%;
        height: 335px;
        font-size: 13px;
        border: none;
        border-radius: 20px;
        box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.25);
        background-color: ghostwhite;
    }
    .header{
        border-top: none;
        border-radius: 25px 25px 0 0  ;
    }
    .COLUMN{
        height: 30px;
        width: 30px;
    }
    .calculateExpense{
        width: 125px;
        font-size: 14px;
        height: 40px;
        top: 377px;
        box-shadow: 2px 7px 11px 0 rgba(0,0,0,0.3);
    }
    #calculateExpenseImg{
        height: 35px;
        width: 35px;
    }
    .container2{
        position: relative;
        top: 30px;
        max-height: 720px;
        width: 96%;
        background: linear-gradient(45deg, transparent, transparent);
        scrollbar-color: transparent transparent;
    }
    #showEstimate{
        position: absolute;
        top: 1210px;
        display: block;
    }
    #infoMsg{
        position: absolute;
        top: 50px;
        right: 15px;
    }
    .computePopup {
        background: linear-gradient(45deg, rgb(0, 191, 255, 0.9), rgb(255, 255, 255, 0.9));
    }
    .expense{
        margin-bottom: 2px;
        margin-left: 2px;
        margin-right: 2px;
        padding-bottom: 5px;
        font-family: "EB Garamond" ,sans-serif;
    }
    #expenseFooter{
        top: 54px;
        right: 5px;
        font-size: 11px;
        width: 80px;
        min-width: 80px;
    }
    #month-year{
        font-family: "Century Schoolbook", sans-serif !important;
    }
}
@media(max-width: 500px){
    .DateUpdate{
        left: 39%;
        font-size: 14px;
    }
    .todayTag{
        left: 70px;
        font-size: 13px;
    }
    .calendar{
        width: 87%;
    }
    .COLUMN1{
        font-size: 13px;
    }
    .COLUMN{
        font-size: 12px
    }
    #month-year{
        font-size: 17px;
        display: flex;
        padding-top: 8px;
    }
    #infoMsg{
        font-size: 14px;
    }
    #container2 h1{
        font-size: 19px;
    }
}
@media(max-width: 254px){
    *{
        display: none;
    }
    html{
        display: block;
        background: black;
    }
}