@charset "utf-8";
/*
   Automated Resume Page (Style Sheet) - Currently Written for Dustin Jablonski
   Filename: styles.css

   Author: Dustin Jablonski
   Date: 8/29/18
   "Your Own Page" Assignment for CS125 CCC Summer'18 - Week 8
*/

/*set font size*/
html {
   font-size: 14px;
}

/*reset styles*/
article, body, div, figcaption, figure, footer, header, h1, h2, h3, h4, h5, p, table, tbody, td, tfoot, th, thead, tr {
   border: 0;
   padding: 0;
   margin: 0;
}

/*page background, container, and font family*/
body {
   background: url("images/parchment2.jpg");
   text-align: left;
   font-family: 'Noto Serif', "Times New Roman", Times, serif;
}

#container {
   width: 100%;
   background-color: rgba(247, 218, 212, 1);
}

/*page content*/
header {
   background-color: rgba(185, 103, 85, 1);
   font-style: italic;
   border: 0.5em rgba(128, 128, 128, 1);
   border-style: none none double none;
   padding: 0.5em 0.5em;
}

#skipnav a {
   position: absolute;
   left: -10000px;
}

#skipnav a:focus {
   background-color: rgba(0, 0, 0, 1);
   color: rgba(255, 255, 255, 1);
   top: 0.2em;
   left: 0.5em;
   z-index: 2;
}

/* Site Navigation Style*/
#navbutton {
   position: absolute;
   top: 8em;
   right: 0.5em;
}

nav ul {
   border: 3px solid rgba(128, 128, 128, 1);
   color: rgba(211, 211, 211, 1);
   text-align: center;
   background-color: rgba(185, 103, 85, 1);
   display: none;
   position: absolute;
   right: 0.5em;
   top: 12em;
   z-index: 2;
}

nav li {
   margin: 0.5em 0.5em;
   display: block;
   font-size: 1.5em;
   line-height: 1.7em;
}

a:link {
   color: rgba(0, 0, 0, 1);
   text-decoration: none;
}

a:visited {
   color: rgba(211, 211, 211, 1);
}

article a:visited {
   color: rgba(185, 103, 85, 1);
}

nav a:hover, nav a:focus, td a:hover, td a:focus, li a:hover, li a:focus {
   color: rgba(102, 102, 153, 1);
}

a:active {
   text-shadow: 2px 2px 1px rgba(128, 128, 128, 1);
}

h1 {
   text-shadow: 2px 2px 1px rgba(128, 128, 128, 1); /*header shadows*/
}

h2 {
   padding: 0.5em 0;
   font-size: 1.7em;
}

h3 {
   font-size: 1.5em;
   padding: 0.3em;
}

h4 {
   font-size: 1.2em;
   font-style: italic;
   margin: 0 0.25em;
}

h5 {
   margin: 0.5em 0;
   font-size: 1em;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.content {
   padding: 1em 0;
   width: 90%;
   max-width: 864px;
   margin: 0 auto;
}

.space {
   line-height: 2em;
}

.entry {
   margin: 1em 0 1em 1em;
}

.entry dt {
   font-weight: bold;
}

/*pesudu selector*/
.entry dt:first-letter {
   font-size: 1.25em;
}

td, th {
   padding: 0.5em;
}

table {
   margin: 0.4em;
}

figure.projlink {
   padding: 0.2em;
}

figcaption.projlink {
   text-align: center;
}

/*column height fix based on w3c guide*/
#column-container {
   display: table;
   width: 90%;
   margin: auto;
   margin-bottom: 1em;
   /*box-shadow: 5px 5px 3px rgba(128, 128, 128, 1);*/
}

.column-section {
   width: 90%;
   display: block;
   border-color: rgba(128, 128, 128, 1);
   border-style: solid;
   padding: 0.5em;
}

footer {
   text-align: right;
   font-style: italic;
   background-color: rgba(102, 102, 153, 1);
   color: rgba(211, 211, 211, 1);
   border: 0.5em rgba(128, 128, 128, 1);
   border-style: double none double none;
   padding: 1em; /*suggestion from week 4 feedback*/
}

footer a:link { /* added underline back in and forced same color for link in footer: color for contrast and underline to denote a link in this instance; */
   color: rgba(211, 211, 211, 1);
   text-decoration: underline;
}

footer a:hover, footer a:focus {
   color: rgba(185, 103, 85, 1);
}

/*extremely small mobile screens*/
@media only screen and (min-width: 380px) {
   #navbutton {
      top: 5em;
   }

   nav ul {
      top: 9em;
   }
}

/*mobile & small display style rules*/
@media only screen and (min-width: 460px) {
    #container {
      border: 2px solid rgba(0, 0, 0, 0.5);
      margin: 0 auto;
      box-shadow: 10px 10px 7px rgba(128, 128, 128, 1); /*container shadow*/
    }

    .column-section { 
        display: table-cell;
        width: 0%; /*adjusted to maintain padding*/
    }
}

/*standard size screens */
@media only screen and (min-width: 800px) {
   header {
      padding: 1em 3em;
   }

   #navbutton {
      display: none;
   }

   nav {
      float: none;
      display: block;
      position: relative;
   }

   nav ul {
      display: block;
      position: relative;
      top: 0;
      right: 0;
   }

   nav li {
      display: inline-block;
   }

   #container {
      max-width: 960px;
   }
}

/*wide screen styles*/
@media only screen and (min-width: 1366px) {
   #container {
      max-width: 1229px;
   }

   .content {
      max-width: 1106px;
   }

}

/*print style rules*/
@media print {
   article, body, div, footer, header, h1, h2, h3, h4, h5, p {
      color: rgba(0, 0, 0, 1);
      background-color: rgba(255, 255, 255, 1);
      text-shadow: none; /*remove shadows from print*/
   }

   body, #container, header, h1, article, #column-container, .column-section, #aboutme, footer{
      max-width: 100%;
      border: none;
      box-shadow: none; /*remove shadows from print*/
      padding: 0; /* Week 5 Suggestion */
      font-size: 99%; /* Week 5 Suggestion */
   }

   nav, footer img {
      display: none;
   }

   #column-container, .column-section {
      display: block;
   }
}

@page {
  margin: 0.5in;
}