body {
/*    font-size:15px;*/
/*    max-width:790px;*/
}

div.frameDiv {              /* used for help screens */
    background-color:#ddd;
    border:1px solid silver;
    margin:0 auto;
    max-width:799px;
    padding:10px 15px;
    text-align:justify;
}
div.frameDiv2 {             /* used for intro screens */
    background-color:#ddd;
    border:1px solid silver;
    margin:0 auto;
    max-width:640px;
    padding:10px 15px;
}

p {
    margin-block:12px 5px;
}

h1 {
    letter-spacing: 0.1em!important;
}
h2 {
    text-align: left !important;
    margin-bottom:0.3rem;
    padding-top:10px;
    clear:left;
}

h3 {

}

div.divH2 {
    display: flex;
    justify-content: space-between;
    clear:left;
}

div.twoCols {
    column-gap:15px;
    display:grid;
    grid-template-columns: 2fr 3fr;
}

img.colOne {
    max-width: 100%;
    margin-top: 0px;
    margin-left:0px;
}

div.colTwo {
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    width:100%;
}

div.supportGrid {
    display:grid;
    grid-template-columns: 3fr 2fr 4fr;
    grid-gap:1px;
    background-color:#333;
    border:1px solid #333;
    align-items:stretch;
}

    div.supportGrid > .colTitle {
        padding:3px 5px;
        color:white;background-color:#333;
        text-align:center;
    }

    div.supportGrid > .gridItem {
        padding:3px 5px;
        background-color:lightgrey;
        width:100%;
    }
    div.gridItem > ul {
        margin-block-start:5px;
        padding-inline-start:20px;
    }


}

ul {
/*    display:block;*/
}

    div.divH2 a {
        color:black;
        font-size:smaller;
        align-self:center;
        justify-self: flex-end;
    }
   
a {
    color:black;
/*    text-decoration: none; */
}

img.illustration {
    max-width: 300px;
    margin-top: 8px;
    margin-bottom:8px;
    margin-left:0px;
    display:block;
}


/*==============================================================================================*/
/* for WIDE SCREEN only                                                                         */
/*==============================================================================================*/
@media screen and ( min-device-width:601px) {
    h2 {
        margin:1.1rem 0 0 0;
    }
    h3 {
/*        margin:4rem 0 0.3rem 0;*/
        padding:10px 0 5px 0;
    }
}

/*==============================================================================================*/
/* for SMARTPHONES only                                                                         */
/*==============================================================================================*/
@media screen and (max-device-width: 600px) {

    body {
        margin-left:5px;
    }

    h2 {
        margin-top: 1.0rem 0 0 0;
    }
}