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





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Exo;
  }

  /* body{
     background-image: url("./pexels-francesco-ungaro-998641.jpg")  
     
  } */


  /* body {
    background: linear-gradient(to bottom, #000428, #004683);
    animation: background-color 20s;
    min-height: 100vh
}

@keyframes background-color {
    0% {
        background: linear-gradient(to bottom, #000428, #004683)
    }

    25% {
        background: linear-gradient(135deg, #1a4223, #5ee95e)
    }

    50% {
        background: linear-gradient(to bottom, #421a31, #e95ed2)
    }

    100% {
        background: linear-gradient(-135deg, #fae37d, #881da8, #20668f)
    }
} */

body{
  background: #333;
}


  .main{
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top:20px; */
    /* background-color: rgb(22, 18, 18); */
    /* background-image: url("./pexels-francesco-ungaro-998641.jpg") */
  }


  h1 {
    font-weight: 200;
    margin: 0.4em 0;
    text-align: center;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    padding: 1em 2em;
    font-size: 18px;
  }
  h1 { font-size: 3.5em; }


  span{
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
  }

  .profile-card{
    position: relative;
    font-family: sans-serif;
    width: 220px;
    height: 220px;
    background: #fff;
    padding: 30px;
    border-radius: 50%;
    box-shadow: 0 0 22px #3336;
    transition: .6s;
    margin: 50px 25px;
    
  }

  .profile-card:hover{
    border-radius: 10px;
    height: 260px;
  }

  .profile-card .img{
    position: relative;
    width: 100%;
    height: 100%;
    transition: .6s;
    z-index: 99;
  }

  .img img{
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 22px #3336;
    transition: .6s;
  }

  .profile-card:hover .img{
    transform: translateY(-60px);
  }

  .profile-card:hover img{
    border-radius: 10px;
  }

  .caption{
    text-align: center;
    transform: translateY(-80px);
    opacity: 0;
    transition: .6s;
  }
  .profile-card:hover .caption{
    opacity: 1;
  }
  .caption h3{
    font-size: 21px;
    font-family: sans-serif;
  }
  .caption p{
    font-size: 15px;
    color: #0c52a1;
    font-family: sans-serif;
    margin: 2px 0 9px 0;
  }

  .caption .social-links a{
    color: #333;
    margin-right: 15px;
    font-size: 21px;
    transition: .6s;
  }
  .social-links a:hover{
    color: #0c52a1;
  }

/*################ FOOTER STYLING ########################*/
.footer{
  margin-top: 50px;
  /* margin-bottom: 50px; */
  /* background: #054666; */
  border-top: #f4f4f4 solid;
  color: #f4f4f4;
  padding: 2rem;
  text-align: center;
  font-size: larger;
}
.social-media-links i{
  margin: 2rem;
}