body {
    margin: 0;
    height: auto; 
    display: flex;
    flex-direction: column; /* Change to column layout */
    background: linear-gradient(135deg, #000000, #8f0aee); /* Match the gradient of the background */
    font-family: 'Playfair Display', sans-serif; /* Use the correct fancy font */
    position: relative; /* Set position relative for absolute positioning of text */
    overflow: hidden; /* Prevent overflow */
}

.toolbar {
    display: flex;
    align-items: center; /* Center items vertically */
    background: linear-gradient(135deg, #000000, #4b0082); /* Match the gradient of the background */
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Shadow for toolbar */
    border-bottom: 2px solid #2a0a30; /* Bottom border for a defined look */
    position: relative; /* Position relative for absolute children */
}

.toolbar-icon {
    width: 50px; /* Set the width of the toolbar image */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between the image and tabs */
}

.tab {
    margin-right: 20px;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    color: white; /* Text color */
    font-weight: bold; /* Bold text */
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
}

.tab:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Highlight on hover */
    transform: none; /* Remove scaling effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow effect on hover */
}

.container {
    display: flex; /* Flexbox for icon and text */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    margin-top: 20px; /* Space below the toolbar */
}

.text-container {
    flex: 1; /* Take up the remaining space on the right */
    position: relative; /* Keep absolute positioning for text */
    z-index: 1; /* Ensure text is above the background */
    text-align: center; /* Center the text and buttons */
}

h1 {
    color: white;
    font-size: 4.5rem; /* Increased font size for the title */
    transition: transform 0.2s ease, text-shadow 0.2s ease; /* Smooth transform and text-shadow on hover */
    text-shadow: 
        0 0 15px black,   /* Increased black shadow glow */
        0 0 25px black,   /* Increased black shadow glow */
        0 0 35px black,   /* Increased black shadow glow */
        0 0 20px rgba(68, 0, 149, 0.8),  /* Darker pinkish glow */
        0 0 30px rgba(45, 0, 147, 0.8),  /* Darker purplish-pink glow */
        0 0 5px rgba(68, 0, 149, 0.8),    /* Bright dark purple glow */
        0 0 10px rgba(68, 0, 149, 0.8),   /* Bright dark purple glow */
        0 0 15px rgba(68, 0, 149, 0.8),   /* Additional glow for a thicker border effect */
        0 0 20px rgba(68, 0, 149, 0.8);   /* Additional glow for a thicker border effect */
    margin-bottom: 10px; /* Space between title and description */
    opacity: 0.85; /* Slight transparency */
    padding: 10px; /* Padding around the text */
}

h1::before {
    content: ''; /* Create a pseudo-element */
    position: absolute; /* Position it absolutely */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    bottom: 0; /* Align to the bottom */
    
    border-radius: 10px; /* Rounded corners for the border */
    z-index: -1; /* Place it behind the text */
    opacity: 0.5; /* Adjust opacity for a subtle effect */

}

.description {
    color: white; /* Text color for the description */
    font-family: 'Playfair Display', sans-serif; /* Same font as title */
    font-size: 1.2rem; /* Decreased font size for description */
    margin-bottom: 30px; /* Increased space below the description */
    text-align: center; /* Center the description */
    text-shadow: 
        0 0 15px black,   /* Increased black shadow for description */
        0 0 25px black,   /* Increased black shadow for description */
        0 0 35px black,   /* Increased black shadow for description */
        0 0 40px rgba(68, 0, 149, 0.8),  /* Darker pinkish glow */
        0 0 60px rgba(45, 0, 147, 0.8); /* Darker purplish-pink glow */
    transition: transform 0.2s ease; /* Smooth transform for description */
    opacity: 0.85; /* Slight transparency */
}

/* Button styles */
.button-container {
    margin-top: 40px; /* Increased space between title/description and buttons */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons horizontally */
}

.store-button {
    width: 115px; /* Set a specific width for the Store button */
    margin-bottom: 15px; /* Increased space below the Store button */
    font-size: 1rem; /* Smaller font size for the Store button */
}

.sub-buttons {
    display: flex; /* Flexbox for the two buttons */
    justify-content: center; /* Center the buttons */
}

.fancy-button {
    background-color: rgba(255, 255, 255, 0.1); /* Darker semi-transparent background */
    color: white;
    border: 2px solid rgba(68, 0, 149, 0.8); /* Bright dark purple border for buttons */
    border-radius: 10px;
    padding: 10px 20px; /* Smaller padding for smaller buttons */
    font-family: 'Playfair Display', sans-serif; /* Use Playfair Display font */
    font-size: 1.2rem; /* Font size for Discord and Guide buttons */
    font-weight: 400; /* Regular weight */
    margin: 10px; /* Increased space between buttons */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; /* Smooth transition for hover effects */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 10px black, 0 0 20px black; /* 3D effect and black glow */
    text-shadow: 0 0 5px black, 0 0 10px black; /* Black glow effect for button text */
}

.fancy-button:hover {
    transform: translateY(-5px) scale(1.05); /* Lift effect and slight scale on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), 0 0 15px black, 0 0 30px black; /* Enhanced shadow and glow on hover */
    text-shadow: 0 0 10px black, 0 0 20px black; /* Enhanced glow effect on hover */
    border: 2px solid rgba(255, 0, 255, 0.8); /* Change border color on hover for buttons */
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.background-gif {
    position: fixed; /* Fix the position to the viewport */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Cover the entire area */
    z-index: -1; /* Place it behind other content */
    opacity: 0.5; /* Adjust opacity for a subtle effect */
}

.vouch-image {
    position: absolute; /* Position them absolutely */
    opacity: 0.1; /* Low transparency */
    pointer-events: auto; /* Allow interaction with the images */
    transition: opacity 0.3s ease; /* Smooth transition for hover effects */
    cursor: grab; /* Change cursor to grab */
}

.vouch-image:nth-child(4) { /* Adjust position for the first image */
    top: 10%; /* Adjust as needed */
    left: 7%; /* Adjust as needed */
}

.vouch-image:nth-child(5) { /* Adjust position for the second image */
    top: 20%; /* Adjust as needed */
    right: 3%; /* Adjust as needed */
}

.vouch-image:nth-child(6) { /* Adjust position for the third image */
    bottom: 5%; /* Adjust as needed */
    left: 10%; /* Adjust as needed */
}

.vouch-image:nth-child(7) { /* Adjust position for the fourth image */
    top: 140%; /* Adjust as needed */
    left: 35%; /* Adjust as needed */
}

.vouch-image:nth-child(8) { /* Adjust position for the fifth image */
    bottom: 20%; /* Adjust as needed */
    right: 7%; /* Adjust as needed */
}

/* Add more nth-child selectors for additional images as needed */