body {
    font-family: 'Quantico', sans-serif;
    background-color: #010028;
    color: #5c95f8;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 40px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}




.grid button {
    padding: 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    background-color: #0e0b35;
    color: #ddddff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
    z-index: 1;
}

.grid button.page-load {
    animation: pageLoad 1s ease forwards;
}

.grid button:nth-child(1).page-load { animation-duration: 1s; }
.grid button:nth-child(2).page-load { animation-duration: 1.1s; }
.grid button:nth-child(3).page-load { animation-duration: 1.2s; }
.grid button:nth-child(4).page-load { animation-duration: 1.3s; }
.grid button:nth-child(5).page-load { animation-duration: 1.4s; }
.grid button:nth-child(6).page-load { animation-duration: 1.5s; }

/* Hover animation */
button.hovered {
    z-index: 10;
    animation: hoverEffect 2.4s ease forwards;
}

/* Hover-out animation */
button.hoverOut {
    animation: hoverOutEffect 0.8s forwards;
}

/* Shrink other buttons */
button.shrink {
    z-index: 1;
    animation: shrinkEffect 0.3s forwards;
}

/* Grow other buttons */
button.grow {
    animation: growEffect 0.8s forwards;
}

/* Click animation */
button.clicked {
    animation: clickEffect 0.4s;
}

/* Keyframes */
@keyframes pageLoad {
    0% { transform: scale(0.0) rotate(-30deg) skewX(10deg) skewY(-10deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg) skewX(-5deg) skewY(5deg); opacity: 0.6; }
    100% { transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg); opacity: 1; }
}

@keyframes hoverEffect {
    0% { transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg); box-shadow: 100vw 150vh 100px 0px #5c95f815, -100vw 150vh 100px 0px #5c95f815; }
    10% { transform: scale(1.5) rotate(365deg) skewX(-25deg) skewY(-25deg); box-shadow: 100vw 150vh 100px 0px #5c95f815, -100vw 150vh 100px 0px #5c95f815; }
    15% { transform: scale(2.5) rotate(355deg) skewX(5deg) skewY(5deg); box-shadow: 100vw 150vh 100px 0px #5c95f815, -100vw 150vh 100px 0px #5c95f815; }
    30% { transform: scale(2.0) rotate(360deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 100px 85px #5c95f815,0 0 100px 85px #5c95f815; }
    50% { transform: scale(2.0) rotate(360deg) skewX(-2deg) skewY(-2deg); box-shadow: 0 0 100px 115px #5c95f815,0 0 100px 115px #5c95f815; background-color: #5c95f8;}
    64% { transform: scale(2.05) rotate(360deg) skewX(-2deg) skewY(-2deg); box-shadow: 0 0 100px 100px #5c95f815,0 0 100px 100px #5c95f815; background-color: #5c95f8;}
    100% { transform: scale(1.95) rotate(360deg) skewX(-2deg) skewY(-2deg); box-shadow: 0 0 100px 100px #5c95f815,0 0 100px 100px #5c95f815; background-color: #5c95f8;}
}

@keyframes hoverOutEffect {
    0% { transform: scale(1.95) rotate(360deg) skewX(-2deg) skewY(-2deg); box-shadow: 0 0 100px 100px #5c95f815,0 0 100px 100px #5c95f815; background-color: #5c95f8;}
    50% { transform: scale(1.5) rotate(-10deg) skewX(-10deg) skewY(10deg); box-shadow: 0 0 15px #5c95f8, 0 0 30px #5c95f8; }
    85% { transform: scale(0.85) rotate(5deg) skewX(5deg) skewY(-5deg); box-shadow: none; background-color: #0e0b35; }
    100% { transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg); box-shadow: none; background-color: #0e0b35; }
}

@keyframes shrinkEffect {
    0% { transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg); opacity: 1; }
    100% { transform: scale(0.5) rotate(-360deg) skewX(0deg) skewY(0deg); opacity: 0.5; }
}

@keyframes growEffect {
    0% { transform: scale(0.5) rotate(-360deg) skewX(0deg) skewY(0deg); opacity: 0.5; }
    85% { transform: scale(1.15) rotate(5deg) skewX(0deg) skewY(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg); opacity: 1; }
}

@keyframes clickEffect {
    0% { transform: scale(1.95) rotate(360deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 100px 100px #5c95f815,0 0 100px 100px #5c95f815, 0 0 0px #ff00ff00, 0 0 0px #ff00ff00 inset; background-color: #5c95f8;}
    10% { transform: scale(2.15) rotate(360deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 100px 100px #5c95f8,0 0 100px 100px #5c95f8, 0 0 0px #ff00ffff, 0 0 0px #ff00ffff inset; background-color: #5c95f8;}
    50% { transform: scale(0.85) rotate(0deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 20px #5c95f8, 0 0 40px #5c95f8, 0 0 60px #5c95f8,0 0 10px #ff00ffff, 0 0 20px #ff00ffff inset; background-color: #5c95f8;}
    90% { transform: scale(4.9) rotate(-5deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 40px #ff00ffff, 0 0 80px #ff00ffff inset; background-color: #5c95f8;}
    100% { transform: scale(4.85) rotate(-5deg) skewX(0deg) skewY(0deg); box-shadow: 0 0 40px #ff00ff44, 0 0 80px #ff00ff44 inset; background-color: #5c95f8;}
}