html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: transparent; /* Fallback black background */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    overflow: hidden;
}

/* Background image */
body {
    background-image: url('wowza.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Create the black semi-transparent rectangle for text and buttons */
.container {
    background: rgba(0, 0, 0, 0.55); /* 55% opacity black */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: fit-content;
    transform: translateY(-50px); /* Shifts the container 50px higher */
}

/* Optional: Style your text */
h1, p {
    color: white;
    margin: 10px 0;
    text-shadow: 
        2px 2px 0px rgb(255, 60, 229),
        -2px -2px 0px rgb(255, 60, 229),
        -2px 2px 0px rgb(255, 60, 229),
        2px -2px 0px rgb(255, 60, 229);
}

/* Button styling applied to the <a> tag */
a.action-button {
    display: block;
    text-align: center;
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 1.5em;
    color: white;
    background-color: rgb(255, 60, 229);
    text-decoration: none; /* Remove underline from link */
    border-radius: 8px;
    border: 2px solid black;
    cursor: pointer;
    text-shadow: 3px 3px 3px black;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

a.action-button:hover {
    transform: scale(1.1); /* Slightly enlarge button on hover */
}

a.action-button:active {
    transform: scale(1); /* Return to original size when clicked */
}