/* Apply this to the main container or the body */
body {
  margin: 0;
  min-height: 100vh;
  text-align: center;
  /* LAYER 1: 50% Black Overlay (Top) */
  /* LAYER 2: Red, Purple, Blue Gradient (Bottom) */
  /* 225deg flows from Bottom-Right to Top-Left */
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    linear-gradient(225deg, red, purple, blue);
  
  /* Ensures the background covers the entire screen even if content is short */
  background-size: cover;
  background-attachment: fixed;

  /* Essential for readability on dark backgrounds */
  color: #ffffff;
  font-family: sans-serif;
}

.button {
  /* 1. Resetting the look to a button */
  display: inline-block;
  padding: 12px 24px;
  margin: 10px 5px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  
  /* Initial colors */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 2. Setting up the smooth animation */
  transition: transform 0.2s ease, background-color 0.3s ease;
}

/* 3. The Hover State */
.button:hover {
  /* 3% size increase */
  transform: scale(1.03); 
  
  /* Dark red background */
  background-color: #8b0000; 
  
  /* Optional: Keep text white and remove underline */
  color: #ffffff;
  text-decoration: none;
  animation: shake 0.2s;
}
.button2 {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px 5px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  
  /* Initial colors */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 2. Setting up the smooth animation */
  transition: transform 0.2s ease, background-color 0.3s ease;
}

/* 3. The Hover State */
.button2:hover {
  /* 10% size increase */
  transform: scale(2); 
  /* Dark red background */
  background-color: #8b0000; 
  /* Optional: Keep text white and remove underline */
  color: #ffffff;
  text-decoration: none;
  animation: shake2 0.2s;
}
.button3 {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px 5px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  
  /* Initial colors */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 2. Setting up the smooth animation */
  transition: transform 0.2s ease, background-color 0.3s ease;
}

/* 3. The Hover State */
.button3:hover {
  /* 10% size increase */
  transform: scale(2); 
  /* Dark red background */
  background-color: #8b0000; 
  /* Optional: Keep text white and remove underline */
  color: #ffffff;
  text-decoration: none;
  animation: shake3 0.2s infinite;
}
/* This creates the side-to-side shaking motion */
@keyframes shake2 {
  0% { transform: scale(2) rotate(0deg); }
  25% { transform: scale(2) rotate(8deg); }
  50% { transform: scale(2) rotate(0deg); }
  75% { transform: scale(2) rotate(-8deg); }
  100% { transform: scale(2) rotate(0deg); }
}
@keyframes shake {
  0% { transform: scale(1.03) rotate(0deg); }
  25% { transform: scale(1.03) rotate(1deg); }
  50% { transform: scale(1.03) rotate(0deg); }
  75% { transform: scale(1.03) rotate(-1deg); }
  100% { transform: scale(1.03) rotate(0deg); }
}
@keyframes shake3 {
  0% { transform: scale(0.5) rotate(0deg); }
  25% { transform: scale(1) rotate(16deg); }
  50% { transform: scale(3) rotate(0deg); }
  75% { transform: scale(6) rotate(-16deg); }
  100% { transform: scale(3) rotate(0deg); }
}