.hero-item{
    background-image: linear-gradient(#a200e2, #560ccc);
    padding:5% 1%;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    width:100vw;
    
    
  }
  .colordiv {
 
    background-image: 
  linear-gradient(to top, transparent, rgb(141, 71, 118)),    
  linear-gradient(to right, rgb(74, 46, 138), rgb(33, 32, 129), rgb(207, 197, 106),  rgb(74, 46, 138));
    background-size: 100% 100%, 2000% 100%;
    animation: move1 5s infinite;
  }
  
  @keyframes move1 {
  from {background-position: center center, left center;}
  to {background-position: center center, right center;}
  }

  .myname{
      text-align: center;
      font-size: 5rem;
      font-family: 'Open Sans', sans-serif;
      color: white;
      font-weight:300;
      margin-top:10%;
  }
  @media only screen and (max-width: 480px) {

    .myname{font-size:2rem; margin-top: 25%;}
  }
  .profile-links{
    padding: none;
    text-align: center;
    list-style: none;
    margin: 10px auto;
    text-decoration: none;
    vertical-align:middle;
  }
  .profile-links li{ 
      margin: 0px;
      padding: 0px;
      list-style: none;
      text-decoration: none;
      width: 100px;
      height: 100px;
      background-color:#ffffff;
      margin: 2px 2px;
      float: left;
      vertical-align:middle;
  }
  .profile-links li:hover{
      cursor: pointer; 
      background-color: aquamarine; 

  }

  .profile-links li a{ 
    text-decoration: none;
    color: black;
    font-weight: 500;
   


}