/* Embrace the chaos */
body {
    /* Link to your uploaded graffiti image */
    background-image: url('mainbackground.webp');
    
    /* This makes sure the background stays put when you scroll */
    background-attachment: fixed;
    
    /* This scales the image to cover the whole screen */
    background-size: cover;
    
    /* Fallback color in case the image loads slowly */
    background-color: #000000; 

    color: #00FF00;
    font-family: "Comic Sans MS", "Times New Roman", serif;
    margin: 20px;
    cursor: crosshair; /* Edgy cursor */
}

/* Add a solid background behind floating text elements */
h1, h3 {
    background-color: #000000;
    display: inline-block; /* This makes the black box wrap tightly around the text */
    padding: 10px;
    border: 2px solid #FF00FF; 
}

h1 {
    font-family: "Impact", sans-serif;
    color: #FF00FF;
    font-size: 4em;
    text-shadow: 3px 3px #00FFFF;
    margin-bottom: 5px;
}

h2 {
    color: #FFFF00;
    text-decoration: underline;
}

.marquee-text {
    color: #FF0000;
    font-weight: bold;
    font-size: 1.5em;
    background-color: #000000;
    border: 2px dashed #00FF00;
    padding: 5px;
}

hr {
    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    margin: 30px 0;
}

.content-box {
    background-color: #000000; /* Solid black to block the graffiti */
    border: 4px solid #00FFFF;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 0px #FF00FF;
}

/* Tour Table Styling */
.tour-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background-color: #111111;
}

.tour-table th, .tour-table td {
    padding: 10px;
    border: 2px solid #00FF00;
}

.button {
    background-color: #FF00FF;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border: 2px outset #FFFFFF;
    cursor: pointer;
}

.button:active {
    border: 2px inset #FFFFFF;
}

/* Merch Store */
.merch-section {
    text-align: center;
}

/* Guestbook Styles */
.guestbook-entries {
    background-color: #222222;
    border: 2px inset #FFFFFF;
    padding: 10px;
    margin-bottom: 15px;
    height: 150px;
    overflow-y: scroll; /* Classic scroll box */
    text-align: left;
    font-family: monospace;
}

.guestbook-entries p {
    border-bottom: 1px dashed #00FF00;
    padding-bottom: 5px;
    margin-top: 0;
}

.retro-input {
    background-color: #000000;
    color: #00FF00;
    border: 2px solid #FF00FF;
    font-family: "Courier New", Courier, monospace;
}

/* Spotify Winamp Container */
.winamp-container {
    border: 4px ridge #AAAAAA;
    background-color: #C0C0C0;
    padding: 10px;
    display: inline-block;
    width: 90%;
    max-width: 500px;
}

/* Fix the loose Netscape text and hit counter at the bottom */
center p {
    background-color: #000000;
    display: inline-block;
    padding: 5px 10px;
    border: 1px dotted #00FF00;
    margin: 5px;
}

/* The invisible box for the Easter Egg */
#easter-egg-zone {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: help;
    z-index: 9999;
}

/* Class added by JavaScript when the Easter egg is triggered */
.barrel-roll {
    animation: roll 3s infinite linear;
}

@keyframes roll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}