body {
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background */
    color: white; /* Text color for banner */
    font-family: Arial, sans-serif;
}

.banner {
    text-align: center;
    padding: 10px;
    font-size: 2em;
}

.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 100px); /* Adjusted to make space for the button */
}

.full-page-gif {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 100px); /* Ensure the GIF doesn't overflow the viewport */s
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.rainbowbutton {
    /* Base styling for the rainbow effect */
    position: relative; /* Ensure proper stacking context */
    overflow: hidden;   /* Prevents overflow of animated gradients */
    text-align: center;
    font-size: 24px;
    background-image: repeating-linear-gradient(
        45deg,
        rgb(149, 0, 255), 
        rgb(0, 225, 255),
        rgb(0, 255, 0), 
        rgb(255, 255, 0), 
        rgb(255, 166, 0), 
        rgb(255, 0, 0), 
        rgb(255, 0, 255)
    );
    background-size: 800% 800%;
    animation: rainbowbutton 10s linear infinite;
}
button#rgbWaveButton {
    padding: 20px 50px;
    font-size: 24px;
    font-weight: 800;
    color: rgb(0, 0, 0);
    border-radius: 50px;
    border: none;
    
}
button#rgbWaveButton:hover {
    border: solid;
    border-color: rgb(0, 153, 255);
}
button#rgbWaveButton:active{
    border: none;
}
/* Animation for the rainbow wave effect */
@keyframes rainbowbutton {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 25%
    }

    100% {
        background-position: 0% 50%
    }
}
#confettiCanvas {
    position: relative;
}
@font-face {
    font-family: 'Aston Script'; /*a name to be used later*/
    src: url("Aston Script.ttf") format(ttf),
    local("Aston Script"), format(ttf); /*URL to font*/
}
.rainbow{
    background-image: repeating-linear-gradient(45deg, rgb(149, 0, 255), rgb(0, 225, 255), rgb(0, 255, 0), rgb(255, 255, 0), rgb(255, 166, 0), rgb(255, 0, 0), rgb(255, 0, 255));
    text-align: center;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2em;
    font-family: "Aston Script";
    font-weight: 800;
    animation: rainbow 7s linear infinite;
}
@keyframes rainbow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 25%
    }

    100% {
        background-position: 0% 50%
    }
}