body {
    margin: 0;
    padding: 0;
    background: #1487B1;
    /* background:  #439DD5; */
    /* font-family: proxima-nova, sans-serif; */
    /* font-family: "Open Sans"; */
    /* font-family: New, Courier; */
    font-family: Lucida Sans Typewriter,Lucida Console,monaco,Bitstream Vera Sans Mono,monospace; ;

    font-weight: 400;
    /* color: #707070; */
    /* color: #0C536C; */
    color: #000000;
    letter-spacing: 0.5px;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */


    /* display:flex;
  flex-direction:column;  */

}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.header {
    max-width: 750px;
    display: block;
    text-align: center;
    margin: 0 auto 150px auto;
    padding: 0% 12%;
}
.header-title {
    font-size: 90px;
    font-weight: 700;
    margin: 80px auto 15px auto;
    /* color: #E30A23; */
    /* color: #626669; */
    color: #000000;
    text-align: left;
}
.header-text span-h {
    font-weight: 700;
}
.header-text span-h:hover {
    /* color: #7FC5A8; */
    /* color: #0C536C; */
    color: #000000;
    transition: 0.5s;

}

/* start typewriter effect */
.header-text{
  width:500;
margin:0;
padding:0;
    /* background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
     max-width: 640px; */
}


/* @keyframes letters {
  from {
    left: 0;
  }
  to {
    left: 50ch;
  }
}
@keyframes lines {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}
@keyframes cursor-type {
  50% {
    border-color: #000;
  }
}
@keyframes cursor-wait {
  0% {
    box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
  }
  1% {
    box-shadow: inset 2px 0 0 0 black;
  }
  40% {
    box-shadow: inset 2px 0 0 0 black;
  }
} */

/* .type {
  position: relative;
  font-family: Consolas, Monaco, monospace;
  width: 50ch;
  line-height: 1.2;
  word-break: break-all;
  overflow: hidden;
} */

.typing {
  position: relative;
  font-family: Consolas, Monaco, monospace;
  width: 50ch;
  line-height: 1.27;  /* 1.2 */
  /* word-break: break-all; */
  word-break: normal;
  overflow: hidden;

  /* width: auto; */
  /* display: inline-block; */
  /* overflow: hidden; */
  /* border-right: .15em solid white; */
  /* white-space: nowrap; */
  /* margin: 0 auto; */
  /* letter-spacing: .15em; */
  /* animation: typing 3.5s steps(120, end),
			 blink-caret .5s step-end infinite; */
}


@keyframes typing {
    from { width: 100% }
    to { width: 0 }

}

.header-text {
  position: relative;
  font-family: Consolas, monospace;
}

.typing {
  position: absolute;
  top: 0;
  margin: 0;
  z-index: -1;
}

.hiders {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.hiders p {
  position: relative;
  clear: both;
  margin: 0;
  float: right; /* makes animation go left-to-right */
  /* width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
  width: 50ch;

  background: white; /* same as page background */
  animation: typing 2s steps(20, end);
  animation-fill-mode: both;  /* load first keyframe on page load, leave on last frame at end */
}

.hiders p:nth-child(2) {
  animation-delay: 2s;
}
.hiders p:nth-child(3) {
  animation-delay: 4s;
}
.hiders p:nth-child(4) {
  animation-delay: 6s;
}
.hiders p:nth-child(5) {
  animation-delay: 8s;
}



/*
@supports (width: 1ch) {
  .type:before, .type:after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    height: 1.2em;
    width: 100%;
    background-color: #fff;
  }
  .type:before {
    border-left: 2px solid transparent;
    top: 100%;
    animation-name: letters, lines, cursor-type, cursor-wait;
    animation-fill-mode: both, both, both, backwards;
  }
  .type:after {
    content: '';
    height: 100%;
    top: 100%;
    left: 0;
    margin-top: 1.2em;
  }
}


.type:before {
  animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
  animation-iteration-count: 1, 1, 35, 2;
  animation-delay: 1.6s, 1.6s, 1.6s, 0s;
}
.type:after {
  animation: lines 1.4285714286s steps(1, end) 1;
  animation-fill-mode: both;
  animation-delay: 1.6s;
}


.type + .type:before {
  animation-duration: 1.4285714286s, 5.7142857143s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(4, end), step-end, ease-out;
  animation-iteration-count: 4, 1, 181, 2;
  animation-delay: 4.2s, 4.2s, 4.2s, 2.6s;
}
.type + .type:after {
  animation: lines 5.7142857143s steps(4, end) 1;
  animation-fill-mode: both;
  animation-delay: 4.2s;
} */



/* end typewriter effect */



/* #content1::after{
    content: "\a";
    white-space: pre;
}
#content2::after{
    content: "\a";
    white-space: pre;
}#content3::after{
    content: "\a";
    white-space: pre;
} */


/* projects */
.proj-wrapper {
    margin: 0 auto;
    width: 92%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* overflow-y: scroll; */
    overflow-y: auto;
}
.proj-box {
    margin: 0px 10px 100px 10px;
    width: 600px;
    height: auto;
    flex-direction: column;
}
.proj-image {
    border-radius: 5px;
    height: 400px;
    width: 600px;
    position: relative;
    overflow: hidden;
    border: none;
}
.proj-image img {
    height: auto;
    max-width: 100%;
    overflow: hidden;
    transition: 0.3s;
}
.proj-image:hover img {
    transform: scale(1.05);
}
.proj-text {
    max-width: 600px;
    margin: 20px 0px 20px 10px;
}
/* .proj-title {
    font-size: 30px;
    position: relative;
    margin-bottom: 10px;
    font-weight: 700;
}
.proj-body {
    font-size: 18px;
} */
.proj-title{
  font-size: 20px;
  position: relative;
  margin-bottom: 10px;
  font-weight: 700;
}
.proj-label-box {
    display: flex;
}
.proj-label {
    font-weight: 700;
    height: 20px;
    font-size: 16px;
    background-color: transparent;
    /* color: #7FC5A8; */
    color: #AB6EBD;
    margin: 15px 10px 2px 0px;
    padding: 5px 10px;
    /* border: 1px solid #7FC5A8; */
    border-radius: 20px;
}
/* end projects */
















/* .footer { */
  /* margin-top:auto; */

    /* text-align: center;
    margin-bottom: 50px; */

    /* font-family: "Lato";
    font-weight: 900;
    font-size: 12px; */
    /* color: #B2C2A8; */
    /* background-color: #E30A23; */

    /* position: absolute;
    bottom: 0;
    width: 100%; */
    /* height: 2.5rem;      */

    /* clear: both;
   position: relative;
   height: 200px;
   margin-top: -200px; */
/* } */

/* footer {
  display: inline;
   margin-right: 20px;
} */



/* .footer span {
    display: inline-block;
}

.footer-container {
    width: 95%;
    height: 110px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-copyright {
    margin-top: 3em;
} */


#footerLinks li{
  list-style-type: none;
  /* font-family: New, Courier; */
  font-family: Lucida Sans Typewriter,Lucida Console,monaco,Bitstream Vera Sans Mono,monospace; ;

  font-weight: 400;
  letter-spacing: 0.5px;
/* padding: 20px; */
    line-height: 1.3em;

  /* color: #000000;
  display: block;
  line-height: 3em;
  padding: 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700; */
}

/* .footer {
    text-align: center;
    margin-bottom: 50px;

    /* background: #ffab62;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0; */
/* }
.footer span {
    display: inline-block;
} */


.footer {
    width: 95%;
    height: 110px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

  position: relative;
 width: 700px;
 height: 200px; */
/* min-height: calc(100vh - 120px); */
 /* flex-wrap: wrap; */
/* overflow-x: hidden;

/* text-align: center;
   margin-bottom: 50px; */
   /* min-height: calc(100vh - 120px);
display:inline-block; */
}
/* .footer span {
    display: inline-block;
} */
/* #intro-footer{

  display:inline-block;
  text-align: center;
     margin-bottom: 50px;
     min-height: calc(100vh - 120px);
   } */

 /* .footer-container {
    width: 95%;
    height: 110px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

/* .footer-copyright {
    margin-top: 3em;
} */



/* #work {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 91vw;
    margin: auto;
    background-color: #B2C2A8;
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 600;
} */



/* nav {
    font-family: "Lato";
    font-weight: 900;
    color: #283C37;
    background-color: #B2C2A8;
} */



#navLink li{
  list-style-type: none;
}

nav {
    background-color: #1487B1;
    padding: 2% 12%;
}
nav ul {
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
}
nav ul li a {
    color: #000000;
    display: block;
    line-height: 3em;
    padding: 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}
/* nav ul li:first-child {
    margin-right: auto;
} */
nav ul li a:hover {
    color: #000000;
    transition: 0.5s;
}




/* nav {
    background-color: #fff;
    padding: 2% 12%;
}
nav ul {
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
}
nav ul li a {
    color: #7FC5A8;
    display: block;
    line-height: 3em;
    padding: 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}
nav ul li:first-child {
    margin-right: auto;
}
nav ul li a:hover {
    color: #707070;
    transition: 0.5s;
} */




.about-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 10%;
}
.about-col {
    height: 550px;
    width: 400px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    margin: 0 30px;
}
.about-image {
    border-radius: 5px;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.about-text {
    width: 40%;
}
.about-text h1 {
    font-size: 40px;
    font-weight: 700;
}
.about-text p {
    font-size: 18px;
    margin-bottom: 3%;
    line-height: 28px;
}

#intro-greeting{
  font-size: 35px;
  font-weight: 700;
  line-height: 28px;
}



@media screen and (max-width: 800px) {
    .about-text {
        font-size: 22px;
        width: 75%;
    }
}
@media screen and (max-width: 665px) {
    body {
        overflow-x: hidden;
    }
    nav {
        padding: 5%;
    }
    nav ul li a {
        font-size: 14px;
        padding: 0 10px;
    }
    .logo {
        width: 40px;
    }
    .header-title {
        font-size: 60px;
    }
    .header-text {
        font-size: 22px;
        line-height: 32px;
    }
    .proj-wrapper {
        width: 100%;
    }
    .proj-box {
        width: 330px;
        margin: 0 5px;
    }
    .proj-image {
        width: 330px;
        height: 220px;
    }
    .proj-title {
        font-size: 22px;
    }
    .proj-body {
        font-size: 16px;
    }
    .proj-box {
        margin: 0 auto 50px auto;
    }
    .proj-label {
        font-size: 10px;
        margin: 20px 5px 0px 0px;
        padding: 3px 5px;
        border-radius: 10px;
    }
    .about-col {
        width: 330px;
        height: auto;
        overflow: hidden;
    }
    .about-text h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 325px) {
    html {
        overflow-x: hidden;
    }
    nav ul li a {
        font-size: 12px;
        padding: 0 8px;
    }
    .proj-image {
        width: 300px;
        height: 200px;
    }
    .proj-box {
        width: 300px;
        margin: 0 auto 50px auto;
    }
    .proj-label {
        font-size: 8px;
    }
}






.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}