/* Dump multiple css files into this one. */


/*****************************************************/    
/* Debug */
/*****************************************************/


/* Warning: this seems to crush nav li's together. */

/*

* {
    border: 1px solid red;
}

*/


/*****************************************************/
/* Global styles */
/*****************************************************/



/** Reset some basic elements */
html, body, h1, h2, h3, h4, h5, h6, p,
blockquote, code, a, div, svg, pre,
hr, dl, dd, figure
{ margin: 0; padding: 0; }

/*  ol, ul, li, */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
*,
:before,
:after {
  box-sizing: border-box;
}

/** Basic styling */
body {
    font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    line-height: 1.5;
    font-size: 20px;
    font-weight: 300;
    color: #444444;
    -webkit-text-size-adjust: 100%;
    background-color: #ececec;
    padding: 0px 2% 0px;
    /* Not allowing text to split results in subtle and shitty layout on screens. */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;     
}

@media (max-width: 430px) { body { font-size: 16px; } }


/* https://www.w3.org/TR/css-flexbox-1/#order-accessibility */
/*main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}
*/
/* Can change order of elems using CSS Flexbox */
/*main > article { order: 2; min-width: 3in; flex:1; }*/
/*main > nav     { order: 1; width: 2in; }*/


main {
    max-width: 14in;
    padding: 0 2% 0;
    margin: auto;
}

main > h1 {
    font-size: 40px;
    padding-top: 30px;
    padding-bottom: 10px;
    font-weight: 300;
}
@media (max-width: 430px) { main > h1 { font-size: 30px; } }

main > h2 {
    font-size: 30px;
    padding-top: 25px;
    padding-bottom: 15px;
    font-weight: 300;
}
@media (max-width: 430px) { main > h2 { font-size: 25px; } }

main > h3 {
    font-size: 25px;
    padding-top: 25px;
    padding-bottom: 15px;
    font-weight: 300;
}
@media (max-width: 430px) { main > h3 { font-size: 20px; } }

main > p {
    padding-top: 8px;
    padding-bottom: 8px;
}

ol, ul {
    margin-block-start: 5px;
    margin-block-end: 5px;
}

li {
    margin-bottom: 10px;
}

/* From code-syntax-highlight.css: */
/*
main h1 {
    margin-top: 30px;
    margin-bottom: 20px;
}
main h2 {
    margin-top: 20px;
    margin-bottom: 10px;
}
main p {
    margin: 5px;
}
*/

/* Cute "external link" arrow icon shows after the text in the <a> */
/* Update: Or, to reduce link eye-fatigue, just paste in the
image itself and have the arrow icon link. */
/*
a.external {
    background-image: url(/assets/external-link-ltr-icon.svg);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;
}
*/
#menu-button {
    position: fixed;
    z-index: 99;
    top: 2px;
    left: 0;
    margin-left: 2%;
}

header { 
    display: flex; 
    flex-flow: row wrap;
    justify-content: center; 
    align-items: center;
    /*width: 80%;*/
    background-color: #cfceca;    
    padding: 5px;
    border: 4px solid #5ca0c3;
}

#header-info {
    flex: 0 1 360px;
    margin: 10px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    /*border: 1px solid red;*/    
}
@media (max-width: 430px) { #header-info { font-size: 15px; } }

#header-info-name { 
    font-size: 40px; 
    text-align: center;
}
@media (max-width: 430px) { #header-info-name { font-size: 30px; } }

#header-info-list {
    list-style-type: none;
}

#header-pic {
    /*flex: 0 1 300px;*/
    margin: 10px;
    /*border: 1px solid blue;*/
}
#header-pic img {
    width: 100%;
    max-width: 250px;
    /*display: block;*/
}


/*****************************************************/
/* Nav */
/*****************************************************/

#nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    /*align-items: center;*/
    /*padding:  0px;*/
    padding-bottom: 20px;
    background-color: #cfceca;    
    border: 4px solid #5ca0c3;
    margin-top: -4px;
}
.nav-link {
    padding-top: 10px;
    margin-top: 8px;
    margin-left: 4px;    
    margin-right: 4px;

    text-decoration: none;  
    color: #2c81a9;
}
.nav-link :visited { 
    color: #2c81a9; 
}
.nav-button {
    background-color: white;
    color: black;
    border: 2px solid #555555;
    padding: 7px;
    /*margin-top: -2px;*/
    border-radius: 10px 10px 10px 10px;
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
    cursor: pointer;
    text-decoration: none;  
}
.nav-link :hover {
    background-color: #9c9a90;
    color: white;
}
.nav-hilited {
    font-weight: bold;
    background-color: #636159;
    color: white;
}

footer {
    margin: 2em 0em 1em;
}