#intro-head{
  font-size: calc(10px + 1.6vw);
  margin: 20% 0 0 5%;
}

#intro-body{
  font-size: calc(8px + 0.5vw);
  margin: 0 2% 2% 5%;
  padding: 2% 0 0 2%;
  border-left: solid 3px #8490ff;
}

#my-intro-sectn #contact-button{
  margin: 5% 2% 15% 5%;
}

#about-me-sectn{
  color: #222;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

#about-me-sectn img{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin-top: 10%;
}

.ball {
  pointer-events: none;
  position: absolute; 
  width: 10px;
  height: 10px;
  border-radius: 50%; 
  background: gray;
  animation: implode 1s ease-in-out;
  animation-fill-mode: both;
  opacity: .5;
  z-index: 0;
}

@keyframes implode {
  100% {transform: scale(0)}
}

#abt-1{
  padding-left: 10%;
  font-size: calc(10px + 1vw);
}

.hidden {
  opacity: 0;
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.4s;
}


@media screen and (max-width: 700px){
  #abt-1{
    margin-top: 10%;
  }
  #about-me-sectn{
    flex-direction: column;
  }
}