$backgroundColor: #ffffff;
$bodyColor: #000000;
$bodyFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

@font-face {
  font-family: 'Open Sans';
  src: url(fonts/OpenSans-Regular.woff2);
  font-weight:normal;
  font-display: swap
}

html, body {
  width:100%;
  height:100%;
  
}

body {
  margin: 0;
  display: grid;
  grid-template-rows: [notice]auto [header]auto [main]1fr [footer]auto;
  grid-template-columns: 100%;
  
  font-family: 'Open Sans', sans-serif;
  font-weight:normal;
  color: rgb(18, 20, 26);
}

td {
  padding: 0.5em 1em;
}

th {
  padding: 0.5em 1em;
}

thead tr{
  background-color: #dddddd;
}

tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

tbody tr:nth-child(even) {
  background-color: #f6f6f6;
}

table {
  background-color: #ffffff;
  width:100%;
  border-collapse:collapse;
  padding: 0.1em 3em;
  overflow:auto;
  margin: 2em 0em;
}

#notice {
  grid-row: notice;
  background-color: #573acc81;
  color: white;
  text-align: center;

}

#notice a {
  color:white;
    text-underline-offset: 0.25em;
}

#header{
  grid-row: header;
  background:
      linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)
      ),
      url('images/banner.webp');
  background-size: 170%;
  background-position-x: center;
  background-attachment: fixed;
  display:grid;
  grid-template-areas:"notice" "title" "subtitle" "nav";
  border-bottom: 1px solid rgb(151, 151, 151);

  font-weight:bold;
  color: white;
  text-shadow: black 2px 2px;
}

#heading {
  padding:1.4em;
}

#name a {
  color:white;
  text-decoration: none;
}

#name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#title {
  display:grid;
  grid-template-columns: 1fr [name] auto 1fr;
  align-content: center;
  font-size: 1.5em;

}

#subtitle {
  text-align:center;
  font-weight: normal;
}

#name {
  grid-column-start:name;
  text-align: center;
}

#nav {
  display: flex;
  flex-wrap:wrap;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  font-size: 1em;
  background-color: rgba(22, 22, 22, 0.5);
}

.navtab {
  display: block;
  padding: 0.7em 0em;
  color: white;
  text-align: center;
  text-decoration:none;
  text-transform: uppercase;
  flex: 0 1 0px;
  width: 100%;
}

#nav a {
  color: white;
}


.activetab {
  background-color: rgba(255,255,255,0.2);
}

#content {
  grid-row:main;
  display: grid;
  grid-template-columns: 1fr [mid] auto 1fr;   
}

#innercontent {
  grid-column: mid;
  max-width: 55em;
  min-width: 0;
}

h1, h2, h3, p, .project {
  padding: 0 1.5rem;
}

h1 {
  font-size:1.5em;
  text-transform: uppercase;    
  text-align: center;
  margin:0;
  padding:1em;
  border-bottom: 1px solid black;
}

.override_caselock {
  text-transform: initial;
}

p, li {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 1em;
  line-height: 1.75em;
}

a {
  word-wrap: break-word;
  color: #35523c;
}

a:visited {
  color: #35523c;
}

a:hover {
  color: #578562;
}

li {
  margin:0.4em;
}

.profilePhoto {
  width:12em;
  max-height:100%;
  display: block;
  margin: 1em auto; 
}

.imgwborder {
  border-radius: 50%;
  border: solid rgb(107, 107, 107) 4px;
}

.largepic {
  width:15em;
}

.verylargepic {
  width:25em;
}

figure {
  margin: 1em;
  text-align: center;
}


img{
  max-width:100%;
  max-height: 15em;
}

figcaption {
  font-size: 1em;
  font-style:italic;
}

.highlighter-rouge {
  background-color: #f4f4f4;
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  white-space: nowrap;
}

.highlight pre {
  padding: 0.5em 1em;
  overflow:auto;

  border-radius: 3px;
  border: 1px solid #C1C1C1;
  background-color: #f4f4f4;
}

.rouge-table pre {
  border:0px none black;
  margin: 0;
}

.rouge-table .gutter {
  border-right: 1px solid #C1C1C1;
}

/*
.codesnippet {
  display:block;
  margin: 1em 2em;
  background: rgb(240, 238, 236);
  overflow:scroll;
  text-overflow: clip;
}

.codesnippet code {
  white-space: pre;
  padding: 1em;
}
*/


.project {
  text-align: center;
  border-bottom: 2px solid rgb(231, 231, 231);  
}

  .project h2 {
      font-size: 1.4em;
      /*font-weight: 300;*/
      margin: 0.5em 0;
      grid-area: ptitle;
      padding: initial;
      padding-top: 0.5em;
  }

  .projectdate {
      padding: 0.0em;
      color: grey;
      display: inline-block;
  }

  .project p {
      text-align: left;
      margin:0px;
      padding:0px;
  }

  .project img{
      grid-area: pimg;
      padding-top: 0.5em;
      max-height: 15em;
  }

  .project .project-desc{
      grid-area: pdesc;
      
  }

  .project .project-buttons {
      grid-area: pbuttons;
      padding: 1em 0px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      
  }

.button {
  display: block;
  color: white;
  background-color: rgb(53, 82, 60);
  margin: 0.5em;
  padding: 0.75em 1.5em;
  text-align:center;
  text-decoration: none;
  flex: 1 1 0px;
  white-space: nowrap;
  box-shadow: gray 3px 3px 6px;
}

.inactiveButton {
  background-color:grey;
}

.button:hover{
  background-color: rgb(87, 133, 98);
  color: white;
}

.button:visited{
  color: white;
}

.button:active{
  background-color: rgb(37, 58, 42);
  box-shadow: black 1px 1px 3px;
}

.inactiveButton:hover {
  background-color:grey;
}

#footer {
  grid-row:footer;
  text-align: center;
  background-color:rgb(22, 22, 22);
  border-top: 1px solid rgb(255, 255, 255);
  color: white;
  font-weight: 300;
  padding: 1em;   
  margin-top: 1em;
}

#footer p {
  margin: 0;
}

#footer a {
  color: white;
  text-underline-offset: 0.2em;
}

#social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

#social a {
  padding: 0.5em 0.5em;
  margin: 0 0.5em;

  color: white;
  line-height: 1.2em;
  flex: 1 1 0px;
  max-width: 10em;
  min-width: 8em;
 
}

.socialicon img {
  max-width: 2em;
  padding: 0.5em;
}

.twitter-icon {

}

.linkedin-icon img {
  max-width: 2.25em;
}

#markdown-toc::before {
    content: "Contents";
    font-weight: bold;
    font-size:1.25em;
}

#markdown-toc ul {
    list-style: lower-alpha;
}

#markdown-toc {
    border: 1px solid #cfcfcf;
    padding: 1.5em;
    list-style: decimal;
    display: inline-block;
    width:fit-content;
}

/* 450 px */
@media (min-width: 29em){
  #header {
    background-size: 120%;
  }
  
  #title {
      font-size: 2.5em;
  }

  #subtitle {
      font-size: 1.1em;
  }

  #nav {
    flex-direction: row;
    font-size: 1.1em;
  }

  .navtab {
    max-width:7em;
    width:auto;
    padding: 0.7em 1.5em;
  }

  .activetab {
    border-left: 2px solid rgb(212, 212, 212);
  }

}

/* 704 px */
@media (min-width: 44em){
  h1 { text-align: left; }
  #header{ background-position-y: -4em; }
  #nav, #subtitle { font-size: 1.3em; }
  #heading { padding: 3em; }
  .project { 
      text-align: left; 
      display:grid;
      grid-template-areas: "ptitle ptitle"
                           "pimg pdesc"
                           "pbuttons pbuttons"
  }

  .project h2 { margin: 1em 0; }

  .project .project-desc { padding-left: 2em;}

  .project .project-buttons { justify-content: flex-end; }

  .project .projectdate {
      float:right;
  }

  .button { flex: initial;}

  .profilePhoto {
      float: right;
      margin: 1em;
  }

  img{
    max-height: 20em;
  }

  figcaption {
    font-size: 0.8em;
  }
}

/* 1008px */
@media (min-width: 63em){
  #header{ background-position-y: -8em;
    background-size: 100%; }

  img{
    max-height: 25em;
  }
}

/* 1440px */
@media (min-width: 89em){
  #header{ background-position-y: -12em;
    background-size: 100%; }

  img{
    max-height: 25em;
  }
}