/**

* For syntax highlight part, using the same setting
* of Jekyll minima theme with classic skin
* 
* Reference:
* https://github.com/jekyll/minima/blob/master/_sass/minima/_base.scss
*/

pre, code {

font-size: 15px; 
border: 1px solid #e8e8e8;
border-radius: 3px; 
background-color: #eef;

}

code {

padding: 1px 5px;

}

pre {

padding: 8px 12px; 
overflow-x: auto;

}

pre > code {

border: 0; 
padding-right: 0; 
padding-left: 0;

}

/**

*  extend highlight part to content width
*/

.highlight, .highlighter-rouge {

width: 100%;
margin: 0;

}

/*———————————————-

Main plaintro CSS

————————————————*/

body {

width: 100%;
height: 100%;
max-height: 100%;
font-size: 100%;
margin: 0px;
background-color: #eeeeee;
color: #3C3C3C;
font-family: sans-serif;

}

img {

width: 100%;
object-fit: contain;

}

ul, ol {

padding-left: 20px;

}

h1, h2, h3, h4, h5, h6, p, div, header, nav, footer {

margin-left: auto;
margin-right: auto;

}

h1, h2 {

font-family: 'GeosansLight', sans-serif;

}

h1 {

padding-top: 1%;

}

a, a:link, a:visited {

text-decoration: none;
color: #4169E1;

}

a:hover {

color: #B0C4DE;

}

.site-wrapper {

min-height: 100vh;
display: flex; 
flex-direction: column;

}

.site-header a, .site-header a:link, .site-header a:visited, .site-topnav a, .site-topnav a:link, .site-topnav a:visited {

text-decoration: none;
color: white;

}

.site-header a:hover, .site-topnav a:hover {

color: #4169E1;

}

.site-header, .site-topnav, .site-footer {

width: 100%;
text-align: center;

}

.site-header, .site-topnav {

background-color: #5B5B5B;
color: white;
overflow: auto;

}

.site-topnav {

position: sticky;
display: block;
top: 0;

}

.site-menu, .site-social {

padding-top: 1%;
padding-bottom: 1%;

}

.site-menu {

float: left;
margin-top: 0.5%;
font-size: 1.3rem;

}

.site-social {

float: right;
letter-spacing: 0.5rem;
font-size: 1.8rem;

}

.site-footer {

padding-top: 1.0%;
padding-bottom: 0.5%;
margin-top: auto;

}

.site-footer-content {

padding-top: 1%;
font-size: 0.9rem;
line-height: 1.2rem;

}

.site-header-content, .site-topnav-content, .site-footer-content, .site-content {

/* roughly 55% width of Resolution 1600 x 900;*/
width: 880px;

}

.site-header-content {

text-align: left;
padding-top: 0.5%;
padding-bottom: 0.5%;
font-size: 3rem;
font-family: 'GeosansLight', sans-serif;

}

.site-content {

line-height: 1.5rem;
padding-top: 0.5%;

}

/*———————————————-

Blog related CSS

————————————————*/

.site-blog-title-left {

float: left;

}

.site-blog-title-right {

text-align: right; 
font-size: 70%; 
padding-right: 0.5rem;

}

.site-blog-post-title, .site-post-title {

margin-bottom: 0;
line-height: normal;
font-size: 1.8em;

}

.site-blog-post-title {

padding-top: 5%;

}

.site-post-metadata {

line-height: normal; 
margin-bottom: 0; 
font-size: 95%;

}

.site-blog-archive {

margin: auto;

}

.site-blog-pagination {

width: 540px;
text-align: center;
margin-bottom: 2.5em;
padding-top: 5%;

}

.site-blog-previous {

float: left;

}

.site-blog-next {

float: right;

}

.site-blog-page-number {

display: block;

}

/*———————————————-

Portfolio related CSS

————————————————*/

.site-portfolio-section {

margin-bottom: 0.5em;
display: flex;

}

.site-portfolio-section .site-portfolio-thumbnail {

margin-left: 0;
margin-bottom: 0.9em;
width: 43%;

}

.site-portfolio-thumbnail img {

margin-bottom: 0;
margin-top: 1.0em;

}

.site-portfolio-section .site-portfolio-content {

margin-top: 0;
margin-right: 0;
width: 51%;

}

.site-portfolio-content h1 {

margin-top: 0.5em;
font-size: 1.8em;
line-height: 1.25em;

}

/*———————————————-

Resume related CSS

————————————————*/

div.site-resume h1 {

line-height: normal;
margin-bottom: 0.5em;
padding-top: 5%;
font-size: 1.8em;

}

/* Simulating adding <hr> after paragraph titles in resume */ div.site-resume h1::after {

content: '';
border: 1px inset;
box-sizing: border-box;
color: gray;
display: block;
height: 2px;
margin: 0.5em auto;

}

.site-paragraph-title {

line-height: normal;
margin-bottom: 0.5em;
padding-top: 5%;
font-size: 1.8em;

}

.site-paragraph-title, .site-paragraph-subtitle {

font-family: 'GeosansLight', sans-serif;

}

/*———————————————-

For responsive web content

————————————————*/

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

.site-header-content,
.site-topnav-content,
.site-footer-content,
.site-content {
    width: 80%;
}
.site-portfolio-section .site-portfolio-thumbnail {
    width: 378.4px;
}

}

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

.site-portfolio-section .site-portfolio-thumbnail {
    flex: 0 0 340px;
}
.site-portfolio-content {
    font-size: 98%;
}
.site-portfolio-content h1 {
    font-size: 1.7em;
}

}

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

.site-portfolio-section .site-portfolio-thumbnail {
    margin-right: 1.5em;
}

}

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

.site-blog-pagination {
    width: auto;
}
.site-blog-previous {
    padding-left: 12.5%;
}
.site-blog-next {
    padding-right: 12.5%;
}

}

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

.site-portfolio-section {
    flex-direction: column;
}
.site-portfolio-section {
    width: 480px;
}
.site-portfolio-section .site-portfolio-thumbnail {
    flex: auto;
    margin-bottom: 0;
    margin-right: 0;
    width: 100%;
}
.site-portfolio-section .site-portfolio-content {
    margin-top: 0;
    width: 100%;
}
.site-portfolio-content h1 {
    margin: 0;
}

}

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

.site-header-content {
    font-size: 2.5rem;
}
.site-menu {
    font-size: 1.1rem;
}
.site-social {
    font-size: 1.5rem;
}

}

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

.site-content {
    font-size: 90%;
}
p:not(.site-footer-p, .site-post-metadata, .site-blog-archive) {
    font-size: 16px;
}
.site-header-content,
.site-topnav-content,
.site-footer-content,
.site-content {
    width: 90%;
}
.site-footer-content {
    font-size: 0.8rem;
}
.site-menu,
.site-social {
    width: 100%;
}
.site-header-content {
    text-align: center;
    font-size: 2.0rem;
}
.site-menu {
    font-size: 1.1rem;
}
.site-social {
    font-size: 1.5rem;
}
.site-blog-title-right {
    padding-right: 0;
}
.site-blog-previous {
    padding-left: 0;
}
.site-blog-next {
    padding-right: 0;
}
.site-blog-pagination {
    width: 360px;
}
.site-blog-previous {
    padding-left: 0;
}
.site-blog-next {
    padding-right: 0;
}

}

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

.site-portfolio-section {
    width: 95%;
}

}

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

.site-blog-pagination {
    width: auto;
}

}