@import url('https://fonts.googleapis.com/css?family=Montserrat');

html, body{
  height: 150vh;
  font-weight:900;
}

body{
  background-size: cover;
    font-family: Arial;
}

svg {
  display: block;
    font: 10.5em 'Montserrat';
    width: 70%;
    height: 50%;
    margin: 0 auto;
  margin-top: -10%;
    
}

.icons {
    z-index: 999;
    position: fixed;
    top: 40%;
    left: 0%;
    width: 11.25rem;
    display: flex;
    flex-direction: column;
  }
  
  .icons a {
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.25rem;
    font-size: 1.188rem;
    font-family: Oswald, sans-serif;
    margin: 0.063rem;
    text-align: right;
    border-radius: 0rem 3.125rem 3.125rem 0rem;
    transform: translate(-7.438rem, 0rem);
    transition: 1s;
  }
  .linkedin {
    background-color: #0e76a8;
    color: white;
  }
  .github {
    background-color: black;
    color: white;
  }
  .instagram {
    background-color: #dd2a7b;
    color: white;
  }
  .icons i{
  font-size: 110%;
  }

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}


.text-copy:nth-child(1){
	stroke: #ff00b7;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #fcc204;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #94bd00;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #08e6e6;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #51ff00;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

@media screen and (max-width:800px) and (min-width:456px) {
  h2 {
    margin-bottom: 5%;
    margin-top: -20%;
    position: relative;
    font-family: Wynford, sans-serif;
    letter-spacing: 0.313rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 300%;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(top, rgb(245, 252, 255), rgb(122, 215, 240)) text;
}
svg {
  width: 95%;
}
  
}
@media screen and (max-width:455px) {
  h2 {
    margin-bottom: 5%;
    margin-top: -40% !important;
    position: relative;
    font-family: Wynford, sans-serif;
    letter-spacing: 0.313rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 300%;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(top, rgb(245, 252, 255), rgb(122, 215, 240)) text;
}
svg {
  width: 95%;
  height: 60%;
  margin-top: -60%;
}
  
}
@media screen and (min-width:400px) and (max-width:454){
  svg {
    height: 80%;
  }
}