* {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

header {
  background: #333;
  padding: 3em;
  display: flex;
  justify-content: center;
}

header h1 {
  color: #fff;
  overflow: hidden;
  border-right: .15em solid #ff6600;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
}

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

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #ff6600;
  }
}
@keyframes animateLink { 
  50%{
    margin-left: 100%;
    width:0%;
    }
  51%{
    margin-left: 0%;
    width:0%;
  }
  100%{
    width:100%;
    }
  }
main .wrapper {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 1.5em auto;
  color: #0C3C26;
}

main .wrapper .avatar {
  width: 35%;
  text-align: center;
  font-size: 1.3em
}

main .wrapper .avatar > img {
  width: 90%;
}
main .wrapper .contacts p{
  padding: 3em 0 1em;
}
main .wrapper .content{
  padding: 0 3em;
  font-size: 1.2em;
}
main .wrapper .content h2{
  text-align: center;
  font-size: 2em;
  padding: 1em 0 1.5em;
  color: #51be95;
}
main .wrapper .avatar a,
main .wrapper .content .link, 
footer .link{
  position: relative;
  color: #51be95;
  text-decoration: none;
}
main .wrapper .content .link::before{
  position: absolute;
  bottom: 0;
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #51be95;

}
main .wrapper .content .link:hover::before{
  animation: 0.8s ease-in-out animateLink;
}
main .tech{
  padding: 1em;
}
main .tech img{
  width: 3em;
  transition: .5s ease-in-out transform;
}
main .tech img:hover{
  transform: scale(-1, 1)
}
footer{
  background-color: #0C3C26;
  text-align: center;
  padding: 2em;
  color: #CFE3DC;
  font-size: 1.5em;
}