/* Center the image and buttons */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

button {
    background-color: transparent;
    border: 2px solid black;
    padding: 20px 50px;
    font-size: 136px;
    width: 1000px; /*ensure sames size for all buttons */
    font-weight: bold;
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.4s ease;
    color: transparent
}

button:hover {
    background-color: rgb(255, 255, 255); /* 50% opaque black */
    color: none;
}

/* Adjust button layout */
div {
    display: flex;
    flex-wrap: wrap;
}

button img {
    width: 50px; /* Ensure the image size is consistent across buttons */
    height: auto;
    margin-right: 20px;
}

/* Positioning buttons at the bottom-right */
.merch-button {
    position: absolute;
    bottom: 297px;
    right: 160px;
    background-image: url('Merch\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.tickets-button {
    position: absolute;
    bottom: 82px;
    right: 160px;
    background-image: url('Tickets\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.latest-button {
    position: absolute;
    bottom: -132px;
    right: 160px;
    background-image: url('Latest\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.subscribe-button {
    position: absolute;
    bottom: -347px;
    right: 160px;
    background-image: url('Subscribe\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.contact-button {
    position: absolute;
    bottom: -562px;
    right: 160px;
    background-image: url('Contact\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.brand-button {
    position: absolute;
    bottom: -777px;
    right: 160px;
    background-image: url('Brand\ Button.png'); /* Add the image URL here */
    background-size: contain; /* Ensure the image fits within the button */
    background-repeat: no-repeat;
    background-position: center;
}

.logo-button {
    position: absolute;
    bottom: 297px;
    right: 1150px; 
    width: 200px;
    height: 50px;
    font-size: 1000px;
    padding: 98px 25px;   /* Increase padding for more space inside */
    background-image: url('musical_bgrem.png'); /* Ensure the image URL is correct */
    background-size: 175% 175%;
    background-repeat: no-repeat;
    background-position: center;
}

.logo-button-2 {
    position: absolute;
    bottom: 297px;
    right: -31px; 
    width: 200px;
    height: 50px;
    font-size: 1000px;
    padding: 98px 25px;   /* Increase padding for more space inside */
    background-image: url('musical_bgrem.png'); /* Ensure the image URL is correct */
    background-size: 175% 175%;
    background-repeat: no-repeat;
    background-position: center;
}