media.css

/* need to work out how to say the width categorically can never be less than 230 */
/* 300 */

@media only screen and (max-width: 900px) {
    /* styles for browsers thinner than 900px; */
    *{
        font-size: small;
    };

}

@media screen and (max-width: 480px) and (min-width:300px){ 
    /* styles for mobile browsers smaller than 480px; (iPhone) */
    /* originally had it as max-device-width but max-width is more versatile */
    #canvas{
        width:50%
    }
    *{
        font-size: small;
    };
    .time-dig{
        font-size: xx-small;}
    form{
        margin-top: 5px;
        padding:5px;
    }
}

@media only screen and (max-width: 768px) {
    #canvas{
        width:50%
    }
    *{
        font-size: small;
    };
    #mobilecheck {display: none;}
    .navbarlist {
        display: none;
    }
    .navbaricon {
        display: block;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    .burgermenuexpanded {
        position: fixed;
        display: block;
        top: 55px;
        right: 23px;
        background-color: inherit;
        padding-left: 7px;
    }
    .navbarliitem {
        text-align: left;
    }
    .landinggrid {
        grid-template-areas: 
        ". . ."
        "past whento future"
        "description description description"
        ;
        
    }
    .page{
        padding: 10%
    }
}

@media only screen and (max-width: 550px) {
    #canvas{
        width:30%
    }
    *{
        /* font-size: x-small; */
    };
    .page{
        padding:5%
    }
}

@media screen and (max-width: 390px) {
    #canvas{
        width:30%
    }
    *{
        font-size: small;
    };
    .time-dig{
    }
    #current-time{
        font-size: x-small;
        padding: 1px
    }
    .page {
        padding: 10%;
    }
    h2{
        margin-top: 10px;
    }
}

@media (max-height:801px)and (orientation:landscape) {
    /* For landscape layouts only */
    #canvas{
        width:10%
    }
    #flex_cont{
        display: flex; /*this line defines whether 1 or 2 cols*/
        flex-wrap:wrap;
        /* max-width: min-content; */
    }
    #col1{
        flex:29%
    }
    #colmid{
        flex:2%
    }
    #col2{
        flex:29%;
    }
}