@charset "UTF-8";
/*****TABLE OF CONTENTS
CH1 RESETS
CH2 FONTS
CH3 COLORS
CH4 GLOBAL
CH5 HEADER
CH6 CONTENT
CH7 FOOTER
CH8 MISCELLANEOUS
*****/

/**********************/
/***** CH1 RESETS *****/
/**********************/
article, aside, footer, header, main, nav, section{
display: block;
}
html, body, h1, h2, h3, ul, li, a, p, article, aside, footer, header, main, nav, section{
margin: 0;
padding: 0;
}

/*********************/
/***** CH2 FONTS *****/
/*********************/

/**********************/
/***** CH3 COLORS *****/
/**********************/
/*
  background color has been set to black
  border color has been set to hsla(35, 100%, 45%, 1) orange
  code color has been set to green
  LINKS:
    unvisited: hsla(199, 85%, 35%, 1) sky blue
    visited: hsla(275, 65%, 55%, 1) light purple
    mouseover/hover: hsla(360, 85%, 35%, 1) red
    active: hsla(199, 85%, 35%, 1) sky blue
  NAVIGATION:
    background color: hsla(333, 100%, 10%, 0.7) maroon
  text color has been set to hsla(35, 100%, 55%, 1) orange
*/

/**********************/
/***** CH4 GLOBAL *****/
/**********************/
  @media all and (max-width: 420px) { /*this media query is asking if the user's
                              display is less than 421px, meaning a phone or a
                              wearable; if so, it's going to prevent my sidebar
                              from floating next to the main section.*/
    aside {
      float: none;
      width: auto;
    }
  }

  /* Links are styled using LoVe HAte sequence, not alphabetical */
  a:link{
    color: hsla(199, 85%, 35%, 1);/*sky blue*/
  }
  a:visited{
    color: hsla(275, 65%, 55%, 1);/*light purple*/
  }
  a:hover{
    color: hsla(360, 85%, 35%, 1);/*red*/
    font-weight: bold;
  }
  a:active{
    color: hsla(199, 85%, 35%, 1);/*sky blue*/
  }
  aside{
    border: 0.2em solid hsla(35, 100%, 35%, 1); /*orange*/
    border-radius: 1em;
    float: left;
    margin: 1.5em 2em 0 2em;
    max-width: 7em;
  }

  body{
    background-color: black;
      /*background-image: url("../img/darkbg.jpg");*/ /*I commented this
      background out because it was making the text harder to read*/
    background-size: cover;
    color: hsla(35, 100%, 55%, 1); /*orange*/
    font-family: 'Ubuntu', serif;
    font-size: 18px;
    height: 100%;
    text-align: left;
    width: 100%;
  }
  .code{
    font-weight: bold;
    color: hsla(121, 95%, 35%, 1); /*bright green*/
    font-family: 'Fira Mono', monospace;
    font-size: 1em;
  }
  dd{
    padding-bottom:0.5em;
  }
  dt{
    color:hsla(45, 90%, 55%, 1); /*grass green*/
    font-family:"Fira Mono", sans-serif;
    font-size:2em;
    font-style:italic;
    padding-left:0.5em;
  }
  h1{
    background-color: hsla(35, 100%, 35%, 1); /*orange*/
    color: black;
    font-family: "Play", sans-serif;
    font-size: 3em;
    text-align: center;
    z-index: 1;
  }
  h2 {
    padding-left: 1em;
  }
  h3{
    font-size: 1.5em;
    text-align: center;
  }
  main{
    border: 0.25em solid hsla(35, 100%, 35%, 1); /*orange*/
    border-radius: 1em; /*this rounds the edges of the border*/
    float: right; /*this allows the aside section to appear to the left of main*/
    margin: 0.5em 25% 0 0;
    padding-top: 2em; /*this padding allows for an open space through which my
      navigation menu will show*/
    width: 50%;
    z-index: 1; /*this sets the main section below other elements, like nav*/
  }
  p,ul{
    margin: 1em;
    padding-left: 1.5em;
  }


/**********************/
/***** CH5 HEADER *****/
/**********************/
  .dropDown {
    position: relative; /*this allows the menu items to separate themselves
      based on how long each word is, rather than some absolute block size*/
  }
  .dropDown:after {
    content: "\25bc"; /*this creates a downward-facing triangle*/
    display: block;
    font-size: 0.5em; /*this sizes the triangle*/
    position: absolute; /*this prevents the triangle from displacing the
      rest of my navigation bar options*/
    top: 75%; /*this puts the triangle beneath my menu item*/
    right: 40%; /*this puts the triangle in the center of my menu item*/
  }
  .dropDown:hover > .dropNav {
    display: block;
    z-index: 2; /*this ensures that the drop-down menu will appear on top of
      all other content on the page*/
  }
  .dropNav {
    display: none; /*this prevents the drop-down menu from appearing unless
      there is a mouseover hover*/
    padding: 0;
    position: absolute;
  }
  .dropNav li {
    background-color: hsla(333, 100%, 10%, 0.9); /*translucent shadow*/
    border: 1px solid black;
    border-radius: 0.5em;
    font-size: 0.8em; /*this resizes the text in the drop-down list*/
    transition: 0.4s;
    width: 5em;
  }
  .dropNav li:hover { /*this styles the list items in the dropNav as the mouse
                      hovers over them*/
    background-color: hsla(333, 10%, 40%, 1); /*gray-mauve*/
    width: 5em;
  }

  header {
    height: 0; /*Because I've removed the <h1> elements from my <header>, it
      makes sense for me to allow the main body to move to the top*/
  }
  header h1{
    background-color:  hsla(333, 100%, 5%, 1.0); /*dark maroon*/
  }
  nav#headerNav{
    padding-top: 0.15em;
    z-index:1; /*puts the navigation bar on top of other elements*/
  }
  nav#headerNav a{
    text-decoration: none; /*removes underline from hyperlinks*/
    transition: .6s background-color; /*delays the color change*/
  }
  nav#headerNav a:hover{
    background-color: hsla(333, 100%, 5%, 0); /*dark maroon*/
  }
  nav#headerNav ul li{
    display: inline-block;
    padding: 0 0.5em; /*separates list items a bit*/
  }
  nav#headerNav ul{
    font-size: 1em;
    height: .5em;
    line-height: 1em; /*this affects the line spacing of the drop-down menu as
      well as the actual navigation bar*/
    list-style-type: none; /*removes bullet points from list*/
    margin: 1em 0 0 0;
    padding: 0; /*defines the shape of the maroon block background*/
    text-align: center;
    top: 0.25em; /*this gave the drop-down menu a defined position, without
      which it tended to disappear when trying to mouse down options*/
  }

  nav#asideNav{
    position:static; /*Static is the default position of all elements; I'm only
                      including this code here because I may wish to change the
                      position of my sidebar navigation*/
  }
  nav#asideNav a{
    text-decoration: none; /*removes underline from hyperlinks*/
    transition: .3s background-color; /*delays the color change*/
  }
  nav#asideNav ul{
    list-style-type: none;
    margin: 1em;
  }

/***********************/
/***** CH6 CONTENT *****/
/***********************/
aside.pullQuote {
  border-top: thin blue solid;
  border-right: none;
  border-bottom: thin blue solid;
  border-left: none;
  border-radius: 0;
  color: yellow;
  float: left;
  font-size: 1.3em;
  font-style: italic;
  margin: 0 1em 0.5em 0;
  max-width: 30%;
  padding: 0.1em 0; /*creates a small amount of vertical separation inside the border*/
}
article{
  border-bottom: 0.5em solid hsla(35, 100%, 35%, 1); /*orange*/
  padding: 0.5em 0.5em 0 0.5em; /*this shows 0 padding at the bottom, which
                                allows the border of the article to merge with
                                the border of the section*/
}
article a{
  text-decoration: none; /*this removes hyperlink underlining*/
}
article img{  /*These images are selected simply to add eye candy to the article*/
  float: left; /*This allows the text to wrap around the image to the right of it*/
  height: 5em; /*This is an arbitrary height; the best practice is to resize the images to fit your style*/
  padding-right: 0.5em; /*This gives a bit of space between the image and the text to the right of it*/
  max-width: 7em;
}
article p{
  margin-left: 8em; /*Because I know the width of my images I can set the text
                    to appear a known distance to the right of it*/
}
#news h1,
#archives h1 {
  font-size: 2em; /*instead of choosing h2 and then repeating all the styling
    cues that I'm using for h1, I decided to leave this at h1 and resize it to
    appear smaller; time permitting I ought to go back and fix this*/
}
section{
  background-color: hsla(333, 100%, 3%, 1.0); /*dark maroon*/
  border: 0.4em solid hsla(35, 100%, 35%, 1); /*orange*/
  border-radius: 1em; /*this curves the corners of the border*/
  margin: 1em; /*this puts a bit of space between the text and the border*/
  padding: 0; /*this causes the border to merge with the background color*/
}
section h1{
  background-color: hsla(35, 100%, 35%, 1); /*orange*/
  color: black;
}

/**********************/
/***** CH7 FOOTER *****/
/**********************/
footer{
  margin-left: 25%;
  text-align: center;
  width: 50%;
  /*clear:both; would push the footer below both the main and aside boxes*/
}

/*****************************/
/***** CH8 MISCELLANEOUS *****/
/*****************************/