/* 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;
}
.container {
  width: 100%;
}
/* SMALL FLEXIBLE LAYOUT */
@media (min-width: 0em) {
  .header-container {
    display: flex;
    justify-content: center;
  }
  .header {
    width: 100%;
    margin: 1.6em 0;
    padding: 0 1.5em;
  }
  .header-logo {
    float: left;
  }
  .header-links {
    float: right;
  }
  .header-resume,
  .header-spacer,
  .header-contact {
    display: inline-block;
  }
  .title {
    width: 100%;
    margin: 1.6em 0;
    padding: 0 1.5em;
  }
  .title-container {
    display: flex;
    justify-content: center;
  }
  .text-single-image {
    display: inline-block;
  }
  .text-single-image,
  .hero,
  .code,
  .code-css {
    margin-bottom: 5em;
  }
  .small-container-seperation {
    margin-bottom: 3.75em;
  }
  .content-container {
    display: flex;
    justify-content: center;
  }
  .content {
    width: 100%;
    padding: 0 1.5em;
  }
  .content-text h1 {
    margin: 0 0 .5em 0;
  }
  .content-image {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
  }
  .content-image,
  .content-video {
    padding-top: .8em;
  }
  .content-image img {
    display: block;
    width: 100%;
  }
  .content-image-solo {
    max-width: 100%;
    max-height: 100%;
    padding-top: .5em;
    margin: 0;
  }
  .content-image-solo img {
    display: block;
    width: 100%;
  }
  .hero {
    margin-top: 1.85em;
    display: inline-block;
  }
  #hero-text h1 {
    display: none;
  }
  #hero-text {
    position: relative;
    padding-bottom: 74%;
  }
  #hero-text img {
    position: absolute;
    bottom: 0;
    margin-top: .6em;
  }
  .code {
    background-color: #282C34;
    border-radius: 0;
    margin-left: -1.5em;
    margin-right: -1.5em;
    padding: 1.5em;
  }
  .code p {
    color: #ABB2BF;
  }
  .code img {
    display: block;
  }
  .more-container {
    display: flex;
    justify-content: center;
    margin: -2.4em 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;
  }
  .details-container {
    display: flex;
    justify-content: center;
  }
  .details {
    width: 100%;
    padding: 0 1.5em;
  }
  .details  h2 {
    margin: 1.6em 0 1.25em 0;
  }
  .details-seperator,
  .details-seperator img {
    display: block;
    height: 1px;
    width: 100%;
  }
  .details-element,
  .details-element-70,
  .details-element-30 {
    width: 100%;
  }
  .details-right {
    text-align: left;
  }
  .footer-container {
    display: flex;
    justify-content: center;
  }
  .footer {
    width: 100%;
    margin: 4em 0 4em 0;
    padding: 0 1.5em;
  }
  .footer-spacer,
  .footer-name-spacer {
    display: none;
  }
  .footer-copyright,
  .footer-links {
    float: none;
  }
  .footer-copyright {
    padding-top: 1.25em;
  }
}
/* FOOTER LEGAL BREAKPOINT */
@media (min-width:27em) {
  .footer-created-by,
  .footer-name {
    display: inline-block;
  }
  .footer-created-by {
    padding-right: 4px;
  }
  .footer-name-spacer {
    display: inline-block;
  }
}
/* LARGE FLEXIBLE LAYOUT */
@media (min-width: 43.1em) {
  .content-text h1 {
    margin: 0 0 1em 0;
  }
  .hero {
    margin-top: 4.25em;
  }
  #hero-text h1 {
    display: block;
    margin: 0px 0 1em 0;
  }
  #hero-text {
    padding-bottom: 0;
  }
  #hero-image {
    position: absolute;
    bottom: 0;
    padding-right: 2.5em;
  }
  #hero-text img {
    position: static;
    float: left;
    width: 50%;
    max-width: 50%;
    max-height: 50%;
    margin-top: 0;
    margin-bottom: .5em;
    padding: 9px 2.5em 0 0;
  }
  .text-single-image,
  .code,
  .code-css {
    margin-bottom: 8em;
  }
  .hero {
    margin-bottom: 7em;
  }
  .medium-container-seperation {
    margin-bottom: 7em;
  }
  .small-container-seperation {
    margin-bottom: 6em;
  }

  .content-image,
  .content-video {
     padding-top: 1.5em;
  }

  .code {
    border-radius: .6em;
    margin-left: 0;
    margin-right: 0;
    padding: 1.5em;
  }
  .more-container {
    margin: -2em 0 1em 0;
  }
  .details-element {
    width: 50%;
  }
  .details-element-70 {
    width: 70%;
  }
  .details-element-30 {
    width: 30%;
  }
  .details-left {
    float: left;
  }
  .details-right {
    float: right;
    text-align: right;
  }
  .details h2 {
    margin-bottom: .85em;
  }
  .footer-home {
    text-align: right;
  }
  .footer-copyright {
    float: left;
    margin: 0;
    padding-top: 0em;
  }
  .footer-links {
    float: right;
    padding-top: 2px;
  }
  .footer-resume,
  .footer-spacer,
  .footer-contact {
    display: inline-block;
    margin: 0;
  }
}
/* FULL WIDTH LAYOUT */
@media (min-width: 53em) {
  .header {
    width: 50em;
    padding: 0;
  }
  .title {
    width: 50em;
    padding: 0;
  }
  .content {
    width: 50em;
  }
  .more-container a {
    width: 50em;
  }
  .more {
    width: 50em;
    padding: 0;
  }
  .details {
    width: 50em;
    padding: 0;
  }
  .footer {
    width: 50em;
    padding: 0;
  }
}


/* HOVER STYLES */
.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;
}

/* IMAGE HOVER STYLES */
.linked-image {
  /*border-radius: 4px;*/
  -webkit-transition: .275s ease-in-out;
  transition: .275s ease-in-out;
}
.linked-image:hover {
  opacity: .7;
}

a {
  transition: background-color .275s ease-out;
  background-color: #EDEDED;
}
#logo-link {
  background-color: #DCDCE2;
}
#logo-link:hover,
a:hover {
  /*color: white;*/
  background-color: white;
}
/* FONT STYLES */
h1 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-size: 1em;
  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;
}*/
/*#logo-link a {
  color: #636366;
  text-decoration: none;
}*/
/* CLASS FONT STYLES */
.content-text h1 {
  text-transform: uppercase;
}
.title h1 {
  color: white;
}
.code-class-color {
  color:#E06C75;
}
.code-file-color {
  color: #D19A66;
}
.code-object-color {
  color:#C678DD;
}
.code-property-color {
  color: #558EFF;
}
.code-generic-color {
  color: #5C6370;
}

.success-color {
  color:#00C196
}
.light-color {
  color:#9e9ea4
}