/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

 /*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

 /* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

 /* This is to fix padding issue where padding centered
   content gets pushed overflow to the right */
 *,
 *:before,
 *:after {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
 }

 html {
     color: #0f0;
     font-family: 'Arial', sans-serif;
     font-size: 20px;
     background-color: red;
 }

 p,
 h1,
 h2,
 h3,
 .projList li {
     font-size: 1.0rem;
     line-height: 1.4;
 }

 h1,
 h2 {
     margin: 0;
     font-family: 'Arial', sans-serif;
     display: inline;
 }

 h1 {
     font-style: bold;
 }

 h2 {
     color: rgba(0, 0, 0, 0.5);
 }

 @media (max-width: 480px) {

     /* < 480 */
     p,
     h1,
     h2,
     .projList li {
         font-size: 1rem;
     }

     /*0.9*/
 }

 @media (max-width: 550px) {

     /* > 480 && < 550 */
     p,
     h1,
     h2,
     .projList li {
         font-size: 1rem;
     }

     /*0.8*/
     blockquote {
         margin-left: 1rem;
         margin-right: 1rem;
     }
 }

 /*
   * A better looking default horizontal rule
   */

 hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #0f0;
     margin: 1.5rem 0;
     padding: 0;
 }

 /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

 audio,
 canvas,
 iframe,
 img,
 svg,
 video {
     vertical-align: middle;
 }

 /*
   * Remove default fieldset styles.
   */

 fieldset {
     border: 0;
     margin: 0;
     padding: 0;
 }

 /*
   * Allow only vertical resizing of textareas.
   */

 textarea {
     resize: vertical;
 }

 /*
   * Links.
   */

 a,
 .hiddenTxt {
     text-decoration: none;
     color: #0f0;
 }

 .gray {
     color: #0f0;
 }

 .quote {
     display: inline-block;
     max-width: 960px;
 }

 a:active {
     text-decoration: underline;
     color: #0f0;
 }

 a:visited {
     color: #0f0;
 }

 a:hover,
 .hiddenTxt:hover {
     text-decoration: none;
     color: #0f0;
     background: none;
 }

 .Highlight {
     background-color: rgba(200, 255, 0, 0.5);
 }

 .Link {
     border-bottom: #0f0 1px solid;
     transition: border-color .08s ease-in-out;
     -moz-transition: border-color .08s ease-in-out;
     -webkit-transition: border-color .08s ease-in-out;
 }

 .Link:hover {
     padding-top: 1px;
     border-color: #0f0;
 }

 .visibleLink {
     padding-top: 1px;
     border-bottom: #0f0 1px solid;
     transition: border-color .08s ease-in-out;
     -moz-transition: border-color .08s ease-in-out;
     -webkit-transition: border-color .08s ease-in-out;
 }

 .visibleLink:hover {
     border-color: #0f0;
 }

 /* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */

 .browserupgrade {
     margin: 0.2rem 0;
     background: #f1f1f1;
     color: #0f0;
     padding: 0.2rem 0;
 }

 /* ==========================================================================
     Author's custom styles
     ========================================================================== */

 /* ==================== OVERALL ==================== */

 body {
     min-height: 101%;
     /* overflow:scroll; */
     /* background: #00f; */
     color: #0f0;
     margin: 5px;
     box-sizing:border-box;
     /* < 480px */
 }

 @media (min-width: 480px) {

     /* > 480 && < 550 */
     body {
         margin: 25px;
     }
 }

 @media (min-width: 550px) {

     /* > 550 */
     body {
         margin: 50px;
     }
 }

 img {
     max-width: 100%;
 }

 ul {
     list-style: circle inside;
 }

 ol {
     list-style: decimal inside;
 }

 ol,
 ul {
     padding-left: 0;
     margin-top: 0;
 }

 ul ul,
 ul ol,
 ol ol,
 ol ul {
     margin: 1.5rem 0 1.5rem 3rem;
     font-size: 90%;
 }

 li {
     margin-bottom: 1rem;
 }

 .disableSmoothing {
     image-rendering: optimizeSpeed;
     /* STOP SMOOTHING, GIVE ME SPEED  */
     image-rendering: -moz-crisp-edges;
     /* Firefox                        */
     image-rendering: -o-crisp-edges;
     /* Opera                          */
     image-rendering: -webkit-optimize-contrast;
     /* Chrome (and eventually Safari) */
     image-rendering: pixelated;
     /* Chrome */
     image-rendering: optimize-contrast;
     /* CSS3 Proposed                  */
     -ms-interpolation-mode: nearest-neighbor;
 }

 canvas {
     margin: none;
     padding: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: -1;
 }

 #canvasContainer {
     position: absolute;
     top: 0;
     left: 0;
     margin: 0;
     padding: 0;
     width:100%;
     height: 100vh;
 }

 /* whole body positioning, including header, not incl footer */
 .main {
     min-height: 100%;
     height: 100%;
     position: relative;
     margin: 1rem 0 0 0;
     overflow: hidden;
 }

 @media (min-width: 480px) {

     /* > 480 && < 550 */
     .main {
         margin: 0 0 50px 0px;
     }
 }

 /* ==================== HEADER MENU ==================== */

 #menu {
     position: fixed;
     margin-bottom: 2rem;
     border-bottom: #0f0 1px solid;
 }

 @media (min-width: 1065px) {
     #menu {
         margin-bottom: 3rem;
         border: none;
     }
 }

 #index {
     position: relative;
     /*<- applies to smaller window size */
     float: left;
     width: 100%;
 }

 #index img {
     /* <- applies to smaller window sizes */
     margin: 0 !important;
     /* max-height: 45px; */

     image-rendering: optimizeSpeed;
     /* STOP SMOOTHING, GIVE ME SPEED  */
     image-rendering: -moz-crisp-edges;
     /* Firefox                        */
     image-rendering: -o-crisp-edges;
     /* Opera                          */
     image-rendering: -webkit-optimize-contrast;
     /* Chrome (and eventually Safari) */
     image-rendering: pixelated;
     /* Chrome */
     image-rendering: optimize-contrast;
     /* CSS3 Proposed                  */
     -ms-interpolation-mode: nearest-neighbor;
 }

 /* Larger than iphone 6 landscape (when grid changes) */
 @media (min-width: 667px) {
     #index img {
         /* <- applies to larger window sizes */
         /* max-height: 60px; */
     }
 }

 /* ==================== PROJECT NAV MENU ==================== */

 #projNav {
     width: 100%;
     position: relative;
     float: left;
     margin: 1.5rem 0 1rem 0;
 }

 .projList {
     list-style-type: none;

     /*    -moz-column-width: 20rem; /* Firefox */
     /*    -webkit-column-width: 20rem; /* webkit, Safari, Chrome */
     /*    column-width: 20rem;*/
 }

 ul,
 ul li {
     margin-bottom: 0.25rem;
 }

 #selectedItem {
     background-color: rgba(255, 255, 0, 0.5) !important;
 }

 /* ==================== CORE CONTENT SECTION ==================== */

 #headerBar {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background-color: #00ff00;
 }

 #mainRightHomepage {
     /* if we're on the homepage, use this style for right column*/
     position: relative;
     height: calc(100vh - 60px);
 }

 #mainRight {
     /* if we're on a project page, use this style for right column */
     position: relative;
 }

 #portrait {
     width: 50px;
     height: auto;
 }

 #about {
     position: relative;
     float: left;
     max-width: 650px;
 }

 #about p {
     margin: 0;
 }

 .portraitImg {
     text-align: center;
     margin: 0;
 }

 .portraitImg img {
     max-height: 600px;
     padding: 0 1.5rem 2rem 0;
 }

 /* project media */

 .gallery {
     width: 100%;
 }

 .main {
     width: 100%;
 }

 .mediaContainer {
     /* background-color:rgba(0, 0, 0, 0.1); */
     /* border:solid 1px rgba(0, 0, 0, 0.1); */
     display: block;
     margin: 0 5px 5px 0;
     padding: 0px;
     width: 100%;
 }

 .mediaContainer img,
 .mediaContainer video {
     display: block;
     margin-left: 0;
     margin-right: auto;
 }

 .mediaContainer img {
     max-width: 100%;
     max-height: 80vh;
 }

 @media (min-width: 480px) {

     /* > 480 && < 550 */
     /* body { margin: 25px; }  */
     .mediaContainer {
         margin: 0 25px 25px 0;
         /* padding: 25px; */
     }
 }

 /* @media (min-width: 667px) { > 667
      .mediaContainer{
          margin: 0 50px 50px 0;
          padding: 50px;
      }
  
  } */

 /* individual image tweaks: */

 #thesis_i2 {
     float: none;
     width: auto;
     height: 100%;
     display: block;
     margin: 0 auto;
 }

 #birdland_i2 {
     position: relative;
     float: left;
     display: block;
     width: 100%;
     height: 100%;
     background-image: url("../img/birdland/clouds.gif");
     z-index: 0;
 }

 .title {
     display: flex;
     justify-content: space-between;
     align-items: center;

     margin-bottom: 1rem;
 }

 .text {
     position: relative;
     float: left;
     display: block;
     width: 100%;
     max-width: 960px;
 }

 .video-responsive {
     overflow: hidden;
     padding-bottom: 56.25%;
     position: relative;
     height: 0;
     margin-bottom: 25px;
 }

 .video-responsive iframe {
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     position: absolute;
     margin-bottom: 25px;
 }

 video {
     max-width: 100%;
 }

 /* feed smoji rain canvas*/
 #canvasOverlay {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 2;
     pointer-events: none;
 }

 #descriptionHeader {
     display: flex;
 }

 #descriptionHeader_left {
     width: 50px;
     min-width: 50px;
     margin-right: 1rem;
     position: relative;
 }

 #descriptionHeader_left img {
     position: absolute;
     /* 2 */
     top: 50%;
     /* 3 */
     transform: translate(0, -50%)
 }

 #descriptionHeader_right {
     width: auto;
     word-break: break-word;
 }

 @media (max-width: 550px) {
     #descriptionHeader_right {
         line-height: 1rem
     }
 }

 @media (max-width: 480px) {
     #descriptionHeader_left {
         margin-right: 0.5rem
     }
 }

 #copyright,
 #ascii {
     font-size: 0.8rem;
     /* > 550px */
     line-height: 1.4;
 }

 .credits {
     font-size: 0.7rem;
     /* > 550px */
     line-height: 0.5rem
 }

 @media (max-width: 550px) {

     /* 480px - 550px */
     #copyright,
     #ascii {
         font-size: 0.7rem
     }

     #ascii {
         line-height: 0.8rem
     }

     .credits {
         line-height: 0.1
     }
 }

 @media (max-width: 480px) {

     /* < 480px */
     #copyright,
     #ascii {
         font-size: 0.6rem
     }

     #ascii {
         line-height: 0.8rem
     }

     .credits {
         line-height: 0.5rem
     }
 }

 html #ascii {
     display: block;
     font-family: Courier;
     line-height: 1rem;
     letter-spacing: -0.1rem;
 }

 /* ==========================================================================
     Helper classes
     ========================================================================== */

 /*
   * Hide visually and from screen readers:
   */

 .hidden {
     display: none !important;
 }

 /*
   * Hide only visually, but have it available for screen readers:
   * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   */

 .visuallyhidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
 }

 /*
   * Extends the .visuallyhidden class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */

 .visuallyhidden.focusable:active,
 .visuallyhidden.focusable:focus {
     clip: auto;
     height: auto;
     margin: 0;
     overflow: visible;
     position: static;
     width: auto;
 }

 /*
   * Hide visually and from screen readers, but maintain layout
   */

 .invisible {
     visibility: hidden;
 }

 /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */

 .clearfix:before,
 .clearfix:after {
     content: " ";
     /* 1 */
     display: table;
     /* 2 */
 }

 .clearfix:after {
     clear: both;
 }

 /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

 @media only screen and (min-width: 35em) {
     /* Style adjustments for viewports that meet the condition */
 }

 @media print,
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 1.25dppx),
 (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
 }

 /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     http://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

 @media print {

     *,
     *:before,
     *:after {
         background: transparent !important;
         color: #0f0 !important;
         /* Black prints faster:
                                     http://www.sanbeiji.com/archives/953 */
         box-shadow: none !important;
         text-shadow: none !important;
     }

     a,
     a:visited {
         text-decoration: underline;
     }

     a[href]:after {
         content: " (" attr(href) ")";
     }

     abbr[title]:after {
         content: " (" attr(title) ")";
     }

     /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */

     a[href^="#"]:after,
     a[href^="javascript:"]:after {
         content: "";
     }

     pre,
     blockquote {
         page-break-inside: avoid;
     }

     /*
       * Printing Tables:
       * http://css-discuss.incutio.com/wiki/Printing_Tables
       */

     thead {
         display: table-header-group;
     }

     tr,
     img {
         page-break-inside: avoid;
     }

     img {
         max-width: 100% !important;
     }

     p,
     h2,
     h3 {
         orphans: 3;
         widows: 3;
     }

     h2,
     h3 {
         page-break-after: avoid;
     }
 }