html {
    overflow-y: scroll; 
    overscroll-behavior-y: none; 
    font-size: 20px;
    background-color: #2f5c3b;
    background-image: url(images/site/bgjpg.jpg);
    background-size: 115vmin;
    font-family: 'Sylexiad Serif Medium';
}

body {
    background-image: url(images/site/shadowoverlay.webp);
    background-size: 100% 100%;
    margin: 0rem 0.3rem 0rem 0.3rem;
    padding: 0.3rem 0rem 0.3rem 0rem;
}

#overbox {
    flex-direction: row;
}

/* debug
* {
    outline: 1px solid #f00 !important;
}
*/

/* ~~~~~~ mobile and small screens settings ~~~~~~ */
/* these override settings become active when the screen width < 800px */
@media only screen and (max-width: 800px) {
    html {
        font-size: 16px;
    }

    body {
        background-image: none !important;
    }

    #leftside {
        display: none !important;
    }

    #contentslist {
        display: none !important;
    }

    .mobheader {
        display: flex !important;
    }

    #homelink {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    h1 {
        margin-left: 0.3rem !important;
    }

    #bubblebox4locbar {
        padding: 0rem 0rem 0rem 0rem !important;
        justify-content: center;
        flex-flow: row wrap;
    }

    .moblink {
        display: flex !important;
    }

    .loclinks {
        display: none !important;
    }

    .navsimg {
        width: 1.2rem !important;
        height: 1.2rem !important;
    }

    .navslink {
        font-size: 1rem !important;
        padding: 0.1rem 0.1rem 0.1rem 0.1rem !important;
        margin: 0rem 0rem 0rem 0rem !important;
        max-height: 1.25rem;
    }

    .navslabel {
        margin: 0px !important;
        margin: 0rem 0.2rem 0rem 0.2rem !important;
        padding-top: 0.3em !important;
    }

    #mmostsvg {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }

    .indexitem {
        padding-left: 1.15rem !important;
    }

    iframe.vidframe {
        width: 100% !important;
        height: auto !important;
    }

    ol.content {
        padding-left: 1.25rem;
    }
}

/* ~~~~~~ primitives ~~~~~~ */

@font-face {
    font-family: 'Sylexiad Serif Medium';
    src: url(SylexiadSerifMedium/SylexiadSerifMedium.otf)
}

.flexobject {
    display: flex;
    flex-direction: column;
}

.bubblebox {
    background-color: white;
    border-radius: 0.3rem;
    margin-bottom: 0.4rem;
}

.bubblebox4content {
    background-color: white;
    border-radius: 0.3rem;
    margin-bottom: 0.4rem;
    padding: 1rem 1rem 0rem 1rem;
}

/* ~~~~~ content primitives ~~~~~ */

.content {
    margin: 0.25rem 0rem 0.25rem 0rem;
}

h1 {
    color: white;
    margin: 0px;
    font-size: 1.7rem;
}

h2 {
    color: black;
    margin: 0rem 0rem 0.25rem 0rem;
}

h3 {
    color: black;
    margin: 0.25rem 0rem 0.25rem 0rem;
    font-size: 1.3rem;
}

p {
    margin: 0.25rem 0rem 0.25rem 0rem;
}

hr {
    margin: 0.5rem 0rem 0.5rem 0rem;
}

.lasthr {
    margin-top: 0.75rem;
}

section {
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    flex-direction: column;
}

code {
    font-size: 0.7rem;
    background-color: wheat;
    border-radius: 0.3rem;
    padding: 0rem 0.1rem 0rem 0.1rem;
}

.inlinecode {
    background-color: wheat;
    border-radius: 0.3rem;
    padding: 0rem 0.1rem 0rem 0.1rem;
}

.blockcode {
    background-color: wheat;
    border-radius: 0.3rem;
    padding: 0rem 0.1rem 0rem 0.1rem;
    max-height: 0.2vh;
    overflow-y: scroll;
}

.motivation {
    background-color: #e8f5e9;
    border-left: 0.3rem solid #81c784;
    color: #1b5e20;
    /* background-color: #edfae2;
    border-left: 0.3rem solid #a6e66d;
    color: #2b3c1c; */
    border-radius: 0.1rem;
    margin: 0rem -1rem 0rem -1rem;
    padding: 0.2rem 1rem 0.2rem 0.7rem;
}

.warning {
    background-color: #fff3e0;
    border-left: 0.3rem solid #ffb74d;
    color: #b33f00;
    /* background-color: #edfae2;
    border-left: 0.3rem solid #a6e66d;
    color: #2b3c1c; */
    border-radius: 0.1rem;
    margin: 0rem -1rem 0rem -1rem;
    padding: 0.2rem 1rem 0.2rem 0.7rem;
}

.indexitem {
    margin: 0rem 0rem 0.25rem 0rem;
    font-size: 1.1rem;
}

.center {
    align-items: center;
}

iframe.vidframe {
    width: 560px;
    height: 320px;
}

/* ~~~~~ main navs ~~~~~ */

#leftside {
    flex-direction: row-reverse;
    align-items:flex-start;
    flex-grow: 1;
    margin-right: 0.4em;
}

.bubblebox4navs {
    background-color: white;
    border-radius: 0.3rem;
    margin-bottom: 0.4rem;
    padding: 0rem 0rem 0rem 0rem;
}

.mobheader {
    display: none;
}

#homelink {
    width: 4em;
    height: 4em;
    margin-top: -0.15rem;
}

#navscontainer {
    width:180px;
}

#navsheader {
    height: 4em;
}

.navslink {
    flex-direction: row;
    align-items: center;
    font-size: 1.4rem;
    text-decoration: none;
    padding: 0.1rem 0.45rem 0.1rem 0.75rem;
}

.navslink:link {
    color: black;
}

.navslink:visited {
    color: black;
}

.navslink:hover {
    background-image: linear-gradient(to right, rgba(4,77,60, 0), rgba(4,77,60, 0.5), rgba(4,77,60, 0));
}

.navslink:active {
    background-image: linear-gradient(to right, rgba(2, 39, 30, 0.8), rgba(4,77,60, 0.8), rgba(2, 39, 30, 0.8));
    color:#fff;
}

.svgblk {display:flex;}  .svgwht {display:none;}  .navslink:active .svgblk {display:none;}  .navslink:active .svgwht {display:flex;}

.navslabel {
    margin: 0rem 0.3rem 0rem 0.3rem;
    padding-top: 0.25rem;
}

hr.navs {
    margin: 0rem 0rem 0rem 0rem;
    border: 0;
    height: 0.05rem;
    background: none;
    background-image: linear-gradient(to right, rgba(70, 70, 70, 0), rgba(70, 70, 70, 0.75), rgba(70, 70, 70, 0));
}

/* ~~~~~ main ~~~~~ */

#rightside {
    flex-direction: row;
    flex-grow: 1;
}

#center {
    max-width: 760px;
}

#titlebox {
    flex-direction: row;
    align-items: center;
    height: 4em;
}

/* ~~~~~ site footer ~~~~~ */

 #sitefooter {
    padding: 0.4rem 0.6rem 0.3rem 0.6rem;
    align-items: center;
}

#sitefooterlinks {
    text-align: center;
}

.footerlinks {
    text-decoration: none;
    font-size: 0.8rem;
}
.footerlinks:link {color: black;}  .footerlinks:visited {color: black;}  .footerlinks:hover {color: grey;}

.footerbp {
    font-size: 0.7rem;
}

/* ~~~~~ page contents list ~~~~~ */

#contentsheader {
    height: 4em;
}

#bubblebox4contentslist {
    background-color: white;
    border-radius: 0.3em;
    margin-bottom: 0.4em;
    padding: 0.25em 0.5em 0.5em 0.5em;
    width:180px;
    margin-left: 0.4em;
}

#contstitle {
    font-size: 1.2em;
    margin-bottom: 0.1rem;
}

.contslink {text-decoration: none;}  .contslink:link {color: black;}  .contslink:visited {color: black;}  .contslink:hover {color: grey;}

/* ~~~~~ nav links in the middle-top ~~~~~ */

#bubblebox4locbar {
    background-color: white;
    border-radius: 0.3rem;
    margin-bottom: 0.4rem;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 1rem 0.25rem 1rem;
}

.moblink {
    display: none;
}

.loclinks {
    text-decoration: none;
    color: black;
    font-size: 1.2em;
    margin-right: 0.25rem;
}
.loclinks:link {color: black;}  .loclinks:visited {color: black;}  .loclinks:hover {color: grey;}

/* ~~~~~ privacy notif on the homepage ~~~~~ */

#privacy {text-decoration: none;}  #privacy:link {color: red;}  #privacy:visited {color: red;}  #privacy:hover {color: grey;}

/* ~~~~~ copyright info ~~~~~ */

#copyrightinfo {
    font-size: 0.6rem;
    text-align: center;
    margin-top: 0.25rem;
}