.button1 {
  background: linear-gradient(270deg, #ff7e5f, #feb47b, #ff7e5f);
  background-size: 600% 600%;
  color: white;
  padding: 10px 20px;
  border: none;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  animation: button1 3s ease infinite;

  transition: 
      background-position 0.5s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
}

.button1:hover {
    background-position:0% 0%;
    box-shadow: 0 0 10px rgba(255, 126, 95, 0.5);
    transform: scale(1.05);
}

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

.button2 {
    background: linear-gradient(100deg, #c1f7ff, #4b6b70, #c1f7ff);
    background-size: 600% 600%;
    background-position: 50% 50%; 
    color: white;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bolder;
    padding: 10px 20px;
    border: none;
    text-shadow: 3px 2.5px 5px #4b6b70, 0 0 10px #c1f7ff;
    box-shadow: 0 0 6px rgba(193, 247, 255, 0.2); 
    transition: 
        transform 0.3s ease,
        box-shadow 0.6s ease,
        background-position 0.6s ease;
}

.button2:hover {
    animation: moveGradient 3s ease infinite;
    transform: scale(1.05);
    box-shadow: 0 0 15px #c1f7ff, 0 0 25px #4b6b70;
}

.button3{
    animation: button3 6s infinite;
    background: linear-gradient(45deg, #ffafcc, #cdb4db, #ffafcc);
    background-size: 600% 600%;
    background-position: 50% 50%;
    color: white;
    cursor:pointer;
    border-radius:8px;
    font-weight:bolder;
    padding:10px 20px;
    transition:
        box-shadow 0.3s ease-in-out,
        transform 0.3s ease-in-out,
        background-position 0.3s ease-in-out,
        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border: none;
    box-shadow: 0 0 6px rgba(255, 175, 204, 0.2);
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button3:hover{
    transform:scale(1.05);
    box-shadow: 0 0 15px #ffafcc, 0 0 30px #cdb4db;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* colors for button4:
dark #250902
    #38040E
    #640D14
    #800E13
light #AD2831

This looks like a delete button. Very cool. Unintentional aswell, 
because i was just simply messing around with color palettes online..
*/
.button4{
    background: radial-gradient(circle, #250902, #640D14, #250902);
    animation: button4 6s ease-in-out infinite;
    background-size: 600% 600%;
    background-position: 50% 50%;
    color: #AD2831;
    cursor:pointer;
    border-radius:8px;
    font-weight:bolder;
    padding:10px 20px;
    transition:
        box-shadow 0.3s ease-in-out,
        transform 0.3s ease-in-out;
    border: none;
    box-shadow: 0 0 6px rgba(84, 9, 25, 0.2);
}

.button4:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #500a10, 0 0 30px #800E13;
    animation: subtle-shake 0.4s infinite;

}

@keyframes button4 {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 50% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*
added a little shake animation on hover,
also added the `scale` keyword so this animation doesn't
cancel out the growing effect upon hovering the button. */
@keyframes subtle-shake {
  0%   { transform: scale(1.05) translate(0px, 0px); }
  25%  { transform: scale(1.05) translate(0.5px, -0.5px); }
  50%  { transform: scale(1.05) translate(-0.5px, 0.5px); }
  75%  { transform: scale(1.05) translate(0.5px, 0.5px); }
  100% { transform: scale(1.05) translate(0px, 0px); }
}

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

    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 50% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}



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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #cdb4db;
    cursor: default;
    overflow-x:hidden;
    margin: 0; /* Add this! */
    padding: 0; /* Add this! */
}



hr {
    border-width: 0px;
    height: 3px;
    background-color: #afb0ff;
    border: 1px solid #515d87;
    border-radius: 5px;
    margin: 2rem 0;
    width: 80%;
}



.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:#333c5b;
    max-width:30%;
    height: auto;
    margin: 2% auto auto auto;
    padding:20px;
    border-radius:5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing:border-box;
    transition: box-shadow 0.7s ease-in-out, transform 0.7s ease-in-out, margin-top 0.7s ease-in-out;

}

.container:hover{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    transform: scale(1.2);
    margin-top: 3%;
}