.footer {
    margin-top: 30px;
    padding-inline: 20px;
    padding-block: 50px;
    text-align: center;
    background: linear-gradient(180deg, #050505, #6f57f4);
    color: white; 
  }
  .theEnd1{
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    padding-top: 40px;
  }
  .footerFlex{
    display: flex;
    flex-wrap: wrap;
    font-size: medium;
    padding: 20px;
  }
  .footerLeft{
    flex: 30%;
    text-align: left;
    padding: 20px;
    margin: 5px;
    background-color: #f457c23b;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }
  .footerLeft a{
    text-decoration: none;
    color: white;
  }
.footer-middle{
  flex: 30%;
  padding: 20px;
  margin: 5px;
  background-color: #f457c23b;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.footer-middle h2{
  font-size: large;
  text-decoration: underline;

}
.footer-middle h3{
  font-size: medium;
  font-weight: 100;
  line-height: 100%;
}
  .footerRight{
    flex: 30%;
    text-align: center;
    padding: 20px;
    margin: 5px;
    background-color: #f457c23b;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }
  .footerSocialIcons{
    font-size: xx-large;
  }
  .footerSocialIcons a{
    text-decoration: none;
    color: white;
  }
  .footer:hover .footerSocialIcons{
    animation: shake 1s;
  animation-iteration-count: 1;
  }

  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  } 
    /* ------------------------------------------------screen size 550px --- */
    @media screen and (max-width: 800px){
      
      .footerFlex{
        padding: 0px;
      }
      .footerLeft{
          flex: 100%;
          text-align: left;
        }
        .footer-middle{
          flex:100%
        }
        .footerRight{
          flex: 100%;
        }
    }