/* PREVENTS MOBILE BROWSERS FROM RESIZING TEXT */
@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
  }
  .footer {
    margin: 6.5em 0 1.5em 0;
  }
}
/* GLOBAL STYLES */
body {
  background-color: #DCDCE2;
  margin: 0;
}
/* Small Screens */
@media (min-width: 0em) {
  .header-container {
    display: flex;
    justify-content: center;
  }
  .header {
    display: block;
    width: auto;
    padding: 1.375em 1.5em 2.75em 1.5em;
  }
  .linked-header {
    display: block;
    width: 100%;
    padding: 1.375em 1.5em 2.75em 1.5em;
  }
  .header p {
    padding-top: 1em;
    line-height: 1.8em;
  }
  #my-name,
  #my-name-more {
    padding-top: 0em;
    opacity: .5;
  }
  .header img {
    margin-top: 1.4375em;
    width: 100%;
  }
  .menu-container,
  .menu-container a {
    display: flex;
    justify-content: center;
  }
  .menu {
    padding: 0 1.5em;
  }
  .menu-container,
  .menu-container a,
  .menu,
  .menu-item,
  .menu-item-seperator,
  .menu-item-seperator img {
    width: 100%;
  }
  .menu-item-project,
  .menu-item-role {
    float: left;
    width: 100%;
  }
  .menu-item-project p,
  .menu-item-role p { /* SELECT PROJECTS TITLE */
    opacity: .5;
  }
  .menu-item h2 { /* THIS IS WHERE THE HEIGHT COMES FROM */
    margin: .75em 0 0 0;
  }
  #more-item h2 {
    margin: 1.625em 0;
  }
  .menu-item p {
    margin: -1px 0 .75em 0; /*-1px counters line hight limits*/
  }
  .menu-item-seperator,
  .menu-item-seperator img {
    display: flex;
    height: 1px;
  }
  #last-seperator {
    opacity: 0;
  }
  .more-container {
    display: flex;
    justify-content: center;
    /*margin: -2.4em 0 -1.9em 0;*/
    margin: 2.6em 0 -1.9em 0;
  }
  .more-container a {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .more {
    width: 100%;
    text-align: center;
    margin: 1.6em 0;
    padding: 0 1.5em;
  }
  #more-footer {
    margin: 4em 0 4em 0;
  }
  .footer-container {
    display: flex;
    justify-content: center;
  }
  .footer {
    width: 100%;
    margin: 6.5em 0 4em 0; /* footer hight */
    padding: 0 1.5em;
  }
  .footer-spacer,
  .footer-name-spacer {
    display: none;
  }
  .footer-copyright,
  .footer-links {
    float: none;
  }
  .footer-copyright {
    padding-top: 1.25em;
  }
}
/* Medium Screens */
@media (min-width: 30em) {
  .menu-item-project,
  .menu-item-role {
    width: 50%;
  }
  .menu-item-role p { /* SELECT PROJECTS TITLE */
    opacity: 1;
  }
  .menu-item-role {
    float: right;
    text-align: right;
  }
  #misc-title {
    width: 30%;
  }
  #misc-description {
    width: 70%;
  }
  .menu-item h2,
  .menu-item p {
    margin: 1.625em 0;
  }
  #select-projects p {
    margin: 0 0 2.625em 0;
    padding-top: 2.75em;
  }
  #additional-projects p {
    margin: 0 0 2.625em 0;
    padding-top: 3.5em;
  }
  .footer-created-by,
  .footer-name {
    display: inline-block;
  }
  .footer-created-by {
    padding-right: 4px;
  }
  .footer-name-spacer {
    display: inline-block;
  }
}
/* 50% Header Width Breakpoint */
@media (min-width: 43em) {
  .header,
  .linked-header {
    padding: 4.625em 1.5em 3.75em 1.5em;
  }
  .header h1 {
    float: left;
    margin-top: -.3125em
  }
  .linked-header h1 {
    margin-top: -.3125em
  }
  .header p,
  .linked-header p {
    padding-top: 1.8em;
  }
  #my-name {
    padding-top: 1.78em;
  }
  #intro-text {
    padding-top: 10.5%;
    line-height: 1.8em;
  }
  .header img {
    float: right;
    margin: -3.2em 0 2em 3em;
    width: 50%;
  }
  .more-container {
    margin: 6em 0 1em 0;
  }
  .footer-home {
    text-align: right;
  }
  .footer-copyright {
    float: left;
    margin: 0;
    padding-top: 0;
  }
  .footer-links {
    float: right;
    padding-top: 2px;
  }
  .footer-resume,
  .footer-spacer,
  .footer-contact {
    display: inline-block;
    margin: 0;
  }
}
/* Large Screens */
@media (min-width: 54em) {
  .header,
  .linked-header {
    width: 50em;
  }
  .menu-container a {
    display: flex;
    justify-content: center;
    width: 50em;
  }
  .menu,
  .menu-item {
    width: 50em;
  }
  .menu-item-project,
  .menu-item-role {
    width: 25em;
  }
  .menu-item-seperator,
  .menu-item-seperator img {
    width: 50em;
  }
  .more-container {
    margin: 5em 0 0 0;
  }
  .more-container a {
    display: flex;
    justify-content: center;
    width: 50em;
  }
  .more {
    width: 50em;
    padding: 0;
  }
  #more-footer {
    margin: 5.1em 0 4em 0;
  }
  .footer {
    width: 50em;
  }
}



/* HOVER STYLES */
.menu-container a {
  transition: background-color .275s ease-in-out 0s, width 0s ease .275s;
}
.menu-container img {
  transition: opacity .275s ease-in-out;
}
.menu-container h2,
.menu-container p {
  transition: color .275s ease-in-out;
}
#bluescape a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #007bbf;
}
#bluescape a:hover h2,
#bluescape a:hover p {
  color: white;
}
#bluescape a:hover img {
  opacity: .0;
}
#dreamhost a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #3366CC;
}
#dreamhost a:hover h2,
#dreamhost a:hover p {
  color: white;
}
#dreamhost a:hover img {
  opacity: .0;
}
#dungeon-highway a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #7772D3;
}
#dungeon-highway a:hover h2,
#dungeon-highway a:hover p {
  color: white;
}
#dungeon-highway a:hover img {
  opacity: .0;
}
#plandangle a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #FF8B00;
}
#plandangle a:hover h2,
#plandangle a:hover p {
  color: white;
}
#plandangle a:hover img {
  opacity: .0;
}
#neato a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #ff6811;
}
#neato a:hover h2,
#neato a:hover p {
  color: white;
}
#neato a:hover img {
  opacity: .0;
}
#screen-candy a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #EF5050;
}
#screen-candy a:hover h2,
#screen-candy a:hover p {
  color: white;
}
#screen-candy a:hover img {
  opacity: .0;
}
#prioritask a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #BF1F1F;
}
#prioritask a:hover h2,
#prioritask a:hover p {
  color: white;
}
#prioritask a:hover img {
  opacity: .0;
}
#misc-projects a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  /*background-color: #9699aa;*/
  /*background-color: #9c9eaa;*/
  /*background-color: #9e9ea4;*/
  /*background-color: #b0b6c2;*/
  background-color: #b0b6c2;
}
#misc-projects a:hover h2,
#misc-projects a:hover p {
  color: white;
  opacity: 1;
}
#misc-projects a:hover img {
  opacity: .0;
}


#stranger a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #436293;
}
#stranger a:hover h2,
#stranger a:hover p {
  color: white;
}
#stranger a:hover img {
  opacity: .0;
}

#substantial a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #F23D3D;
}
#substantial a:hover h2,
#substantial a:hover p {
  color: white;
}
#substantial a:hover img {
  opacity: .0;
}

#loveisaction a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #09b3f7;
}
#loveisaction a:hover h2,
#loveisaction a:hover p {
  color: white;
}
#loveisaction a:hover img {
  opacity: .0;
}

#groupon a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #348700;
}
#groupon a:hover h2,
#groupon a:hover p {
  color: white;
}
#groupon a:hover img {
  opacity: .0;
}

#whitepages a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #6383e3;
}
#whitepages a:hover h2,
#whitepages a:hover p {
  color: white;
}
#whitepages a:hover img {
  opacity: .0;
}



.more-container a {
  transition: background-color .275s ease-in-out 0s, width 0s ease .275s;
  background-color: #DCDCE2;
}
.more-container p {
  transition: color .275s ease-in-out;
}
.more-container a:hover {
  transition: width 0s ease 0s, background-color .275s ease-in-out 0s;
  width: 100%;
  background-color: #ededed;
}

p a {
  transition: background-color .275s ease-out;
  background-color: #EDEDED;
}
a:hover {
  background-color: white;
}
#logo-link {
  transition: background-color .275s ease-out;
}
#logo-link:hover {
  background-color: #EDEDED;
}




/* FONT STYLES */
h1 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-size: 1.2em;
  color: #606066;
  margin: 0;
  line-height: 1.8em;
}
h2 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-size: 1em;
  color: #606066;
  margin: 0;
  line-height: 1.8em;
}
p {
  font-family: 'Inconsolata', monospace;
  font-weight: 400;
  font-size: 1em;
  color: #606066;
  margin: 0;
  line-height: 1.8em;
}
a {
  color: #606066;
  text-decoration: none;
}
.dark-link {
  color: #636366;
  text-decoration: none;
}



/* CLASS SPECIFIC FONT STYLES */
#misc-projects h2 {
  color: #9e9ea4
}
/*#misc-projects h2 {
  color: #636366;
}*/