/*CSS Layout is credited to EggRamen
css link: https://eggramen.neocities.org/code/css/more/bigheader2.css
website: https://eggramen.neocities.org/code/css_testpages
*/

body {
    margin: 0;
    padding: 0;
    background: #2a2543;
    line-height: 133%;
    font-size: 0.98em;
    font-family: "Open Sans", "Droid Sans", "Calibri", sans-serif;
    }
    
    
    
  /*Miscellanous custom styling for various elements.*/
  h1, h2, h3 {
    font-family: "Calibri";
    }
    
  a {
    color: #4d4385;
    }
  
  a:hover, a:focus {
    color: #2a2543;
    transition: ease-in 0.1s, ease-out 0.1s;
    }
    
  blockquote {
    border-left: #4d4385 3px solid;
    background: #d8d4ec;
    padding: 0.1px 0.75rem;
    margin: 0 1.5rem;
    }
  
  hr {
    width: 75%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    }
    
  /*Sticky navigation links at the top of the page.*/
  .quick-nav {
    position:fixed;
    z-index: 999;
    width: 100%;
    background: #0a000a;
    background: rgba(10,0,10,1);
    text-align: right;
    color: #fff;  
    font-size: 0.875em;
    }
    
  .navbar {
    padding: 1px 25px;
    }
    
  .navbar a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 5px 4px;
    margin: 0 2px;
    }
    
  .navbar a:hover, .footer a:hover, .navbar a:focus, .footer a:focus {
    color: #edeef3;
    transition: ease-in 0.1s, ease-out 0.1s;
    }
    
    
  /*Header image.*/
  .header {
    height: 350px;
    background: linear-gradient(rgba(10,0,10,0.4), rgba(10,0,10,0.4)), url(../images/header_background.jpg);
    }
  
  /*Title bar with icon and title/tagline.*/
  .title {
    background: #31323a;
    min-height: 60px;
    margin-bottom: -25px;
    text-align: right;
    }
    
  .title-text, .title-pic {
    padding:0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    color: white;
    -webkit-text-stroke: 1px #0d301f;
    text-shadow: 0px 1px 1px #0d301f;
    
    }
    
  /*Contains the text tagline.*/
  .title-text {
    padding-right: 1em; /* orginal is 1em, as that includes a picture */
    width: calc(85vw - 110px);
    line-height: 167%;
    margin-top: -3px;
    padding-bottom: 15px;
    }
    
  .title-text h1 {
    padding:0;
    font-size: 32px;
    }
    
  /*Contains the profile pic. This can be left out and should still look okay.*/
  .title-pic {
    height: 100px;
    margin-right: 100px;
    margin-top: -25px;
    border-right: 5px solid #696f92c2;
    border-bottom: 5px solid #696f92c2;
    border-radius: 10px;
    }
    
  .title-pic img {
    height: 100%;
    overflow: hidden;
    }
    
  /*Contains the main content and sidebar.*/
  .page-wrapper {
    padding: 0 100px;
    margin: 0 auto;
    background: #ddd;
    background: linear-gradient(#09131040, #18685440), url(../images/background_tile.png); /*Gradient makes tiles "fade in".*/
    }
  
  /*Contains the sidebar boxes.*/
  .sidebar {
    width: 320px;
    margin: 50px 0;
    position: absolute;
    }
    
  .sidebar h1 {
    font-size: 1.2rem;
    background: #696f92;
    color: #fff;
    padding: 12px 10px 10px 10px;
    margin: auto;
    }
    
  .sidebar a {
    display: block;
    border-left: 3px solid #52587c;
    background: #bcb9d6;
    padding: 5px;
    margin: 10px 0;
    color: #0e0718;
    text-decoration: none;
    }
    
  .sidebar a:hover, .sidebar a:focus {
    background: #99a1c7;
    transition: ease-in 0.1s, ease-out 0.1s;
    }
    
  .sidebar, .main {
    display: inline-block;
    }
  
  /*Contains main content boxes.*/
  .main {
    margin: 50px 100px 50px 350px;
    width: auto;
    width: calc(100vw - 550px);
    }
    
    
  /*Basic container type for subsections of main and sidebar divs*/
  .box {
    margin-bottom: 15px;
    }
    
  /*Inner content div for boxes. Padding goes here so sidebar headers etc can keep their no-margin look.*/
  .inner {
    background:  #edeef3;
    padding: 10px 25px;
    }
  
  .inner img {
    max-width: 100%; /*Prevent image overflow.*/
    height: auto;
    border-radius: 5px; /*Give images in content rounded corners.*/
    }
    
  .box, .title-pic img {
    border-radius: 5px;
    overflow: hidden; /*Force inner divs to conform to rounded corners.*/
    }
    
    
  /*Footer section.*/
  .footer {
    background: #050005;
    color: #fff;
    padding: 5px 20px;
    font-size: 0.75em;
    padding-bottom: 10px;
    }
    
  .footer a {
    color: #fff;
    }
  
  /*Individual column of the footer. You can have 3 of these at the current given width.*/
  .footer-column {
    width: 25%;
    margin: 5px 10px;
    display: inline-block;
    vertical-align: top;
    }
  
  
  /*Adapt to narrower screens.*/
  @media(max-width: 900px) {
    .page-wrapper {
      padding: 0 50px;
      }
    
    .sidebar {
      width: 25vw;
      }
      
    .main {
      margin: 50px 0 50px calc(25vw + 30px);
      width: calc(75vw - 150px);
      }
      
    .title-pic {
      margin-right: 7vw;
      }
      
    .title-text {
      padding-left: 1vw;
      padding-right: 2vw;
      }
    
    }
    
  /*Mobile layout.*/
  @media(orientation: portrait) {  
    .page-wrapper {
      padding-top: 0.1px;
      padding-bottom: 0.1px;
      }
    
    .sidebar, .main {
      display: block;
      margin: 0 auto;
      position: static;
      width: 100%;    
      }
      
    .sidebar {
      margin-top: 50px;
      }
      
    .main {
      margin-top: 30px;
      margin-bottom: 30px;
      }
      
      
    }
    
  /***
  For really narrow screens which cause the title text to wrap. 
  You may need to adjust the width at which this kicks in to fit 
  your own title.
  ***/
  @media(max-width: 500px) {
    .header {
      height: 60vw;
      }
    
    .title {
      padding-right: 0;
      }
    
    .title-text {
      margin-top: -5px;
      }
      
    .title-text h1 {
      font-size: 6vw;
      line-height: 75%;
      }
      
    .title {
      height: calc(auto - 25px);
      }
      
    .page-wrapper {
      padding: 0.1px 7vw;
      }
      
    /*For extra narrow screens where the columns would get too skinny.*/
    .footer-column {
      display: block;
      width: 100%;
      margin: 0 auto;
      }
    }