body {
    background: black;
    background-size: 400% 700%;
    font-family: 'Ubuntu Condensed', sans-serif;
    color: white;
}


@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }


.avatar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 100px; 
    border: 5px solid white;
    border-radius: 100%;
    
    
}




@keyframes filter {
  
    50% {
      filter: grayscale(80%);
    }

    100% {
      filter: grayscale(0%);
    }
}
.Name {
    margin-top: auto;
    text-align: center;
    font-size: 25px;
    /*animation: fall 3s ease infinite;*/
}

@keyframes fall {
  25% {
    transform:  translateY(10px);
  }

  50% {
    transform:  translateY(-10);
  }

  100% {
    transform:  translateY(0px);
  }
}

.About {
    margin-top: auto;
    text-align: center;
    font-size: 18px;
}

.links div {
    position: relative;
    display: block;
    margin-bottom: 25px;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    letter-spacing: 2px;
    text-align: center;
    border: 2px solid white;
    border-radius: 40px;
    width: 500px;
    transition: 0.3s all ease-in-out;
    
    
}

.links>div:hover {
    background-color: white;
    transition: 0.5s all ease-in;
    color: black;
}

.links>div:hover a{
    color: black;
    transition: 0.5s all ease-in;
}

a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 20px;
    
}

#icons {
    display: flex;
    transform: translateY(20px) translateX(15px);
    padding-top: 0%;
    

}



.footer-text{
  text-align: center;
  font-weight: lighter;
}

.footer-text>a{
  transition: 0.3s all ease-in;
  
}

footer>h5:hover a{
  transition: 0.3s all ease-in;
  color: black;
}

footer>h5{
  text-align: center;
}

@media (max-width: 548px) {
  .links div {
    position: relative;
    display: block;
    width: 290px;
    text-align: center;
  }

}