Scrap.css

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

.header>.header-col-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.header-col-2{
    width: 100%;
    max-width: 266px;
    align-self: center;
    justify-content: center;
}

.header>.header-col-1>.header-title-avatar {
    margin-bottom: 16px;
}

.header>.header-col-1 .header-title-name {
    font-size: 36px;
    margin-bottom: 8px;
}

.header>.header-col-1 .header-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-text{
    font-family: "Patrick Hand";
    font-size: 16px;
}

body {
    background-image: linear-gradient(to bottom right, #FFD8D0, #FFEED0, #FFFDD0, #D9FFD0, #D0E9FF, #EDD0FF);
}

.posts{
    border-radius: 0px;
    gap: 16px;
    background: none;
    padding: 8px;
}

.post{
    border-radius: 12px;
    box-shadow: 2px 1px 4px 1px #2E0037;
}

.posts{
    box-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px #0ff,
        0 0 10px #0ff,
        0 0 12px #0ff,
        0 0 14px #0ff,
        0 0 16px #0ff;

}

@-webkit-keyframes heartBeat {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    14% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  
    28% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    42% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  
    70% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes heartBeat {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    14% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  
    28% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    42% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  
    70% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

@-webkit-keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }

    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
@keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }

    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
.post:hover{
    -webkit-animation: heartBeat 2s ease;
    animation: heartBeat 2s ease;
}
.posts:hover{
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7ae058, 0 0 40px #7ae058, 0 0 50px #7ae058, 0 0 60px #7ae058;
}