@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Khand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');

:root {
    --page-bg: #fff;
    --color-text: #225;
    --title-text: goldenrod; 
    --color-h3: #77b;
    --accent: gold;
    --color-warning: #c66; 
    --sky-blue: #def; 
    --dark-blue: #334; 
    --graytext: #bbb; 
}


body { box-sizing: border-box; margin: 0; padding: 0; background-color: var(--page-bg); color: var(--color-text); font-family: 'Roboto', sans-serif; }
#wholepage {
    box-sizing: border-box; margin: 0; padding: 0; min-height: 100%; max-width: 1000px; margin: auto;
    background-color: var(--page-bg); color: var(--color-text); font-family: 'Roboto', sans-serif; 
}

a   { color: royalblue; text-decoration: none; }
a:hover { text-decoration: none; color: orangered; font-weight: normal; }
strong { color: #66a; }
b       { color: var(--color-text); font-weight: bold;}

p       { line-height: 1.5rem; margin-left: 1rem; font-size: 0.95rem; margin-right: 1rem; }
p.para-level-2 { padding-left: 2rem; }
div     { margin: 0px; box-sizing: border-box; }

pre.codeblock     { font-family: 'Source Code Pro', monospace; font-size: 0.9rem; padding: 6px; background-color: #eee; color: var(--dark-blue); }

code    { font-family: 'Source Code Pro', monospace; font-size: 0.9rem; padding: 6px; background-color: #eef; color: var(--dark-blue); }
code2   { font-family: 'Source Code Pro', monospace; font-size: 0.9rem; padding: 6px; background-color: #fff; color: var(--dark-blue); }

h1  { font-family: 'Khand', sans-serif; font-size: 2rem; padding-top: 12px; }
h2  { font-family: 'Khand', sans-serif; font-size: 1.7rem; color: var(--color-text); padding-top: 12px; }
h3  { font-family: 'Khand', sans-serif; font-size: 1.5rem; color: var(--color-h3); padding-top: 12px; }
h4  { font-family: 'Khand', sans-serif; font-size: 1.2rem; color: var(--color-h3); margin-bottom: 9px;  }
h5  { font-family: 'Roboto', sans-serif; font-size: 1.1rem; color: var(--color-h3); margin-bottom: 9px; padding-left: 18px; font-weight: normal;}

li.qsli  { margin-top: 0.85rem; line-height: 1.5rem; }

figcaption { font-size: 0.8rem; color: #777; font-style:italic; text-align: center;}
label { font-size: 0.9rem; color: #777; font-style:italic; text-align: left; }


/* top navigation */
.logo-horz-nav { margin-left: 1rem; height: 70px; position: relative; }
.topnav { display: flex; align-items: center; position: relative; border-bottom: 1px solid orangered; }
.graytext { color: var(--graytext); }

#topmenu  { margin-left: auto; margin-right: 1rem; }
#topmenu a { margin: 1em; }
.topmenu-selected { color: var(--color-text); font-weight: bold; }

/* footer */ 
footer { position: fixed; display: block; bottom: 0px; padding: 1rem; text-align: center; border-top: 1px solid #bbb; 
        width: 100%; max-width: 900px; 
        font-size: 0.85rem; background-color: white; margin: auto; }
#footer-links { display: inline; }

/* page-wrappers */
#bodytext { margin-left: 1rem; margin-right: 1rem; color: var(--color-text); }
#guidesbody { margin-left: 1rem; margin-right: 1rem; display: flex; box-sizing: border-box; color: var(--color-text); }

/* index/front flex-grid */
.ml-areas { display: flex; gap: 9px; row-gap: 24px; flex-wrap: wrap; justify-content:space-evenly; margin: auto;  }
.ml-area-item { width: 250px; border: 2px solid #bbb; border-radius: 12px; }
.ml-area-image { width: 100%; height: 150px; border-radius: 12px 12px 0px 0px; border-bottom: 1px solid orangered; }
.ml-area-text   { text-align: center; line-height: 1.2rem; }

/* lower flex-grid, without pictures, index.html */
.subsystems { display: flex; gap: 9px; row-gap: 12px; flex-wrap: wrap; justify-content:space-evenly; width: 100%; margin: auto; }
.subsystem  { width: 375px; border: 1px solid orangered; border-radius: 12px; padding: 9px; text-align: center; 
    background: linear-gradient(0deg, #eef 0%, #fff 100%); }

/* button on index - top right */
.getkey { float: right; vertical-align: middle; padding: 6px 18px; border: 0px solid #999; 
        border-radius: 9px; background-color: var(--sky-blue);  margin-top: 20px; cursor: pointer; font-size: 0.85rem; }
.next-step  { vertical-align: middle; padding: 6px 18px; border: 0px solid #999; border-radius: 9px; background-color: var(--sky-blue); 
              margin-top: 20px; cursor: pointer; font-size: 0.85rem; }

#mobilemenu { display: none; }
#mobmenuitems { display: none; }

.inpage-menu    { width: 320px; padding-top: 3px; padding-bottom: 12px; border-right: 0px dotted orangered; box-sizing: border-box; 
                background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(245,245,255,1) 100%);}
.inpage-menu a  { display: block; padding: 6px 3px; margin: 3px 6px; line-height: 1.3em; 
                  font-size: 0.85em; }
.inpage-menu p  { margin: 9px 0px; }
.inpage-menu-selected   { color: var(--color-text); font-weight: bold; }
.guidestitle          { display: block; }

.inpage-text    { margin-top: -15px; box-sizing: border-box; width: 100%; }
.inpage-text h2, h3 { margin-left: 1rem;  }
.inpage-text ul, ol { margin-left: 1rem; margin-top: -0.7rem;  }
.in-page-ul      { margin-left: 2rem; padding-left: 2rem; margin-top: -0.7rem;  }   
.in-page-li      { margin-left: 2.5rem; padding-left: 2rem; margin-top: -0rem; font-size: 0.95rem; font-family: "Roboto", sans-serif; }
.inpage-text li { padding: 3px; line-height: 1.4rem;}
.inpage-text p  { margin-left: 2rem; }
.inpage-text a  { font-size: 0.95rem; }
.sidenote       { padding-left: 3rem; color: grey; font-style: italic; }
.sidenote b     { color: black; font-weight: normal; }
.apitype        { background-color: royalblue; padding: 3px 9px; color: #dde; border-radius: 6px;}

.hr-pg      { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }

.barcode-div { width: 200px; display: inline-block; }
.barcode-div-text { font-size: 1rem; text-align: center; }

.account    { display: block; width: 100%; margin-top: 6px;}
.formcontainer { display: block; width: 25rem; margin: auto; margin-top: 6px; max-width: 70%; }


@media only screen and (max-width: 701px) {

    p, li { font-size: 0.85rem;}

    .logo-horz-nav { margin-left: 0px; }
    footer { padding: 9px 0px 9px 0px; position: static; margin-top: 36px; box-sizing: border-box; width: 100%; }
    #topmenu { display: none; }
    #footer-links { display: block; margin-top: 5px; }

    .ml-areas { display: flex; gap: 9px; flex-wrap: wrap; }
    .ml-area-item { width: 150px; border: 1px solid #bbb; border-radius: 12px; }
    .ml-area-image { width: 100%; height: 100px; border-radius: 12px 12px 0px 0px; border-bottom: 1px solid orangered; }
    .ml-area-text   { text-align: center; line-height: 1.1rem; font-size: 0.85rem; ;}

    .subsystems     { width: 100%; }

    .getkey { width: 50px; display: none;  }
    #mobilemenu { margin-top: 14px; float: right; position: absolute; right: 1rem; display: inline; 
                   }
    #mobmenuitems   { width: 100%; position: relative; top: 12px; background-color: var(--sky-blue);
                      padding: 0px; margin-top: -12px; border-bottom: 1px solid orangered;  }
    .mobnavlink     { display: block; margin: auto; text-align: center; font-size: 1.2rem; padding: 12px; 
                      border-bottom: 0px solid #bbb }
    .mobnavlink:nth-child(odd) { background-color: #cde;}

    #guidesbody     { display: block;  }
    #guidesbody > h3  { display: block; margin-bottom: 0px; }
    .inpage-menu    { background: white; display: block; border-bottom: 1px solid #bbb; }
    .inpage-menu a  { background-color: white; margin: 0px 9px; }
    .inpage-menu > h4   { margin-top: 9px; margin-bottom: 0px;}
    
    .guidestitle          { display: block; font-size: 1.5rem; color: var(--color-h3); padding-top: 12px;  } 
    .inpage-text          { padding-top: 18px;  }
    .inpage-text h3       { font-size: 1.3rem;  }
    
}