/* GLOWING LINKS */
@keyframes glow1 {
    0% { color: #FFB6C1; }
    100% { color: #ff0780; }
}
@keyframes glow2 {
    0% { color: blue; }
    100% { color: aqua; }
}
@keyframes glow3 {
    0% { color: gold; }
    100% { color: yellow; }
}
@keyframes glow4 {
    0% { color: green; }
    100% { color: springgreen; }
}

.glow {
    animation: 1s infinite alternate; /* Default animation duration */
}

.glow1 { animation-name: glow1; }
.glow2 { animation-name: glow2; animation-duration: 1.25s; }
.glow3 { animation-name: glow3; animation-duration: 0.9s; }
.glow4 { animation-name: glow4; animation-duration: 1.5s; }

.title {
    color: violet;
    font-size: 250%; /* Increase the font size of the title */
    font-weight: bold;
    margin-top: 5px; /* Reduce the top margin to condense spacing */
    padding: 5px; /* Optional: Adjust padding if needed */
}

.container {
    display: grid;
    place-items: center;
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 128%;
    background-color: #ffffff;
    padding: 5px; /* Reduce padding to condense the body div */
}


.monster-image {
    max-width: 25%;
    height: auto;
    display: block;
    margin: 0 auto;
    pointer-events: none; /* Disable click events on the image */
}

.link-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.link-container a {
    margin: 15px;
    padding: 5px;
    text-decoration: none;
    font-size: 128%; /* Adjust the font size as needed */
    font-weight: bold; /* Make the font bold */
    color: inherit; /* Ensure the color is inherited from the glow classes */
}

.footer {
    font-size: 21px;
    color: black;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .link-container {
        flex-direction: column; /* Stack links vertically on mobile */
        align-items: center; /* Center links */
    }
}

@media (max-width: 768px) {
    .monster-image {
        max-width: 50%; /* Increase max-width for mobile */
    }
}