/* General Styling */
body {
    background-color: #b3b3b3;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Container */
.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}

/* Title */
h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Buttons */
button {
    background-color: #c0392b;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    border-radius: 5px;
}

button:hover {
    background-color: #a93226;
}

/* Card Layout */
.card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    justify-content: center;
    padding: 20px;
}

/* Card Styling */
.card {
    width: 150px;
    height: 200px;
    background: linear-gradient(135deg, #f7f7f7, #e3e3e3);
    border: 3px solid black;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

/* Insert Effects */
.rink-collection {
    border-color: lightgreen;
    box-shadow: 0px 0px 20px rgba(144, 238, 144, 1);
}

.artist-proof {
    border-color: darkgreen;
    box-shadow: 0px 0px 30px rgba(0, 100, 0, 1);
    animation: flashGlow 1s infinite alternate;
}

.clear-shots {
    border-color: lightblue;
    box-shadow: 0px 0px 60px rgba(173, 216, 230, 1);
    animation: ultraFlash 0.6s infinite alternate;
}

.first-strike {
    border-color: brown;
    box-shadow: 0px 0px 20px rgba(139, 69, 19, 1);
}

.full-contact {
    border-color: red;
    box-shadow: 0px 0px 35px rgba(255, 69, 0, 1);
}

.global-gold {
    border-color: gold;
    box-shadow: 0px 0px 40px rgba(255, 215, 0, 1);
}

.masks {
    border-color: purple;
    box-shadow: 0px 0px 80px rgba(128, 0, 128, 1);
    animation: ultraFlash 0.4s infinite alternate;
}

.roaring-20s {
    border-color: orange;
    box-shadow: 0px 0px 35px rgba(255, 165, 0, 1);
}

/* Flashing Effects */
@keyframes flashGlow {
    0% { box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0px 0px 50px rgba(255, 255, 255, 1); }
}

@keyframes ultraFlash {
    0% { box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0px 0px 100px rgba(255, 255, 255, 1); }
}