/*!
 * Jon Stacey v1 2017-02-20 (http://jonstacey.com)
 */
html {
  font-size: 100%;
}

 @media (max-width: 500px) {
     .center {}
     .center-inner {
         left: 7.5%;
         top: 5%;
         position: absolute;
         width: 85%;
         /*height: 300px;*/
         /*background: #f0f;*/
         text-align: center;
         max-width: 500px;
         /*max-height: 500px;*/
     }
 }

@media (min-width: 500px) {
    .center {
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .center-inner {
        width: 500px;
        height: 100%;
        /*margin-left: -250px;*/
        /*height: 300px;*/
        /*background: #f0f;*/
        text-align: center;
        max-width: 500px;
        /*max-height: 500px;*/
    }
}

body {
    height: 100vh;
    width: 100vw;
    /*background-color: #0099CC;*/
    /*background-color: #0971B2;*/ /* darker blue */
    background-color: #288BC3;
    font-family: 'Roboto', 'Noto Sans', 'Open Sans', sans-serif;
    color: white;
    position: relative;
    text-align: center;
}

/*.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.avatar img {
    opacity: 0;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url("../img/Jon-Face.jpg") no-repeat;
    background-size: 150px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 0 auto;
    margin-bottom: 0.7em;
}

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-size: 2em;
    /*margin: 0.67em 0;*/
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

h1 {
  font-size: 3em;
}

.contact, .name h1 {
    margin: 0.25em;
}

.contact i {
    margin: 0.25em;
    font-size: 1.8em;
    color: white;
}

.about {
    display: inline;
    /*font-size: 2em;*/
    margin: 0;
    padding: 0;
    border: 0;
}

.tagline-container {
  margin-top: -0.75em;
  margin-bottom: 1.5em;
}

.tagline {
  font-size: 1.5em;
}

p.text-heavy {
    font-size: 1.3em;
    text-align: left;
    font-weight: 100;
}

img {
    border: 0;
}