/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  padding: 0;
  background: #25314d;
  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;
  width: 100%;
  background: url(/images/full_moon_3.jpg);
  }

/*Title bar with icon and title/tagline.*/
.title {
  background: #52587c;
  min-height: 60px;
  margin-bottom: -25px;
  text-align: right;
  }
  
.title-text, .title-pic {
  padding:0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  }
  
/*Contains the text tagline.*/
.title-text {
  padding-right: 1em;
  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: 5px solid #52587c;
  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(rgba(52,37,77,1), rgba(42,30,67,0.25)), url(/img/fancy1.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;
    }
  }