body{ font-size: 1.3em; font-family: 'Manrope'; font-weight: 500; letter-spacing: -0.005em; }

/* header - all pages */
#eccentric_header{ position:relative; display:block; top:0px; left:0px; width:100%; height:auto; margin:0; padding:.09em; }

/* content container - all pages */
#eccentric_content{ display: flex; justify-content: center; width:100%; min-height: 85vh; }    


/* header - all pages */
#header_section{ position:relative; display:block; top:0px; left:0px; width:100%; height:auto; margin:0; padding:.09em; }

/* content container - all pages */
#content_section{ display: flex; justify-content: center; width:100%; min-height: 85vh; }    


/* introduction section on homepage */
#introduction{ display: flex; justify-content: center; width:100%; } 
#introduction section{ max-width:1265px; padding: 0 10px 0 0.4em; float:left; margin:0.1em; width:100%; height:auto; }
#introduction h1{ font-size: 1.3em; font-weight: normal; line-height: 1.3em; color: #00008b; margin: 0em 0em 0.2em 0; align-self: center; max-width: 1200px; }
#introduction h2{ font-size: 1.1em; font-weight: normal; display: inline-block; margin: auto; align-self: center; max-width: 1200px; }

/* breadcrumb header at top of each article page */
.title_section{ padding:5px 1.5em 5px 1.5em; margin:.4em .9em 0em .65em; background: #eef1fd; border-radius:10px; opacity:94%; }
.title_section a{ display:inline; font-size:1.2em; color:blue; margin:10px 0 10px 0; font-weight:normal; text-decoration:none; } 
.title_section span{ margin-left:0.2em; margin-right:0.2em; color:blue; }
.title_section h1{ display:inline; font-size:1.2em; font-weight:normal; color:#00008b; margin:10px 0 10px 0; }

/* articles on homepage */
.article_column{ float:left; max-width:640px; margin-top:0em; margin-bottom:1em; height:auto; }
.article{ padding:0.1em;  margin:.2em 0.5em 1em .2em; height:auto; }
.article a{ font-weight:normal; color:#296deb; text-decoration:none; }
.article .heading{ display:flex; font-size:1.2em; margin:.1em 0 .2em .2em; padding:0; } /* important! was here */
.article img{ width:100%; max-width:630px; border-radius:10px; margin:0 0 0 0; }



/* article page content */
.body_section{ font-size:1.05em; min-height:680px; max-width:1200px; padding:5px 0.5em 5px 0.5em;  margin:0em 0.5em 1em 0.5em; }
.body_section h3{ margin:0.6em 0 0.2em 0; padding:0; font-weight:bold; font-size:1.15em; }
.body_section h4{ margin:1.3em 0 0.3em 0.1em; padding:0; text-decoration:none; }
.body_section h5{ margin:0.5em 0 -0.65em 0; padding:0; font-weight:normal; font-size:1.1em; }    
.body_section ul{ list-style-type:none; padding:0; margin:0; }
.body_section li{ padding:0; margin:1.4em 0 1.4em 0.5em; }
.body_section p{ display:block; margin:0.4em .5em 1.0em 0.1em; max-width:1200px; }
.body_section img{ display:block; margin:1.2em 0 .5em 0; width: 100%; height: auto; max-width:1200px; border-radius:10px; }
.body_section video{ display:block; margin:1.2em 0 1.5em 0; width: 100%; height: auto; max-width:1200px; border-radius:10px; }
.body_section .blockquote{ margin-left:1em; max-width:750px; }
.body_section a{ text-decoration:none; }

/* ebay link on turtle controller article - no longer present */
.ebay_link{ width:100%; text-align: center; margin:0 0 2em 0; }
.ebay_link a{ height:50px; }
.ebay_link img{ width:100px; height:44px; display: inline-block; margin:0; }
.ebay_link p{ margin-top:0; }

pre{
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    font-size: 1.1em;
    font-weight: 500;
} 

/* for displaying C code -- only once on a page */
div#code_wrapper {
    display: grid;
    max-width:1200px;
    height:872px;
    background-color: #f1f1f1; border: 2px solid #999;
    border-radius: 6px;
}

div#code_wrapper pre{ 
    overflow: scroll;        
    background-color: #f1f1f1; 
    white-space: pre;
    margin-left: 0.3em;
}

div#code_wrapper code{
    font-family: monospace;
    color: rgb(70, 6, 19);      
    font-size: 80%;
    padding: 2px;        
}


/* for displaying C code -- multiple times on same webpage */
.code_wrapper{
    display: grid;
    max-width:1200px;
    height:872px;
    background-color: #f1f1f1; border: 2px solid #999;
    border-radius: 6px;
}

.code_wrapper pre{ 
    overflow: scroll;        
    background-color: #f1f1f1; 
    white-space: pre;
    margin-left: 0.3em;
}

.code_wrapper code{
    font-family: monospace;
    color: rgb(70, 6, 19);      
    font-size: 80%;
    padding: 2px;        
}


.iframe-container{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    border-radius:10px;
}

.iframe-responsive{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.footer_section{ background: #eef1fd; border-radius:10px; padding:5px 0 5px 0; margin:0em .9em .5em .9em; }
.footer_section p{ font-size:1em; color:#00008b; margin:.5em 0 .4em 0; text-align:center; } 
.footer_section div{ text-align:center; padding:0.4em 0 0.1em 0; }
.footer_section a{ margin:0 .5em 0 .5em; color:blue; text-decoration:none; font-size:1.1em; }

/* shrink text to suit laptops and desktops with a screen width of (1080) x 1920px */
@media (max-width: 1500px){ 

    .body_section{     max-width: 800px; }
    div#code_wrapper{  max-width: 800px; }
    .code_wrapper{     max-width: 800px; }

    #introduction h1{  font-size: 1.3em; }
    #introduction h2{  font-size: 1em;   }  
    .article .heading{ font-size: 0.9em; }
    .body_section{     font-size: 1em; }
    .body_section h3{  font-size: 1.1em; }
}

/* shrink text to suit phones and tablets etc */
@media (max-width: 700px){ 

    .title_section h1{ font-size: .9em; }
    .title_section a{  font-size: .9em; }

    #introduction h1{  font-size: 1em;  }
    #introduction h2{  font-size: .8em; }
    .article .heading{ font-size: .9em; }
    .body_section{     font-size: .85em }

    pre{ font-size: .6em; }

    .footer_section a{ font-size: .9em; }
}