/* Import the Sixtyfour Convergence font */
@font-face {
    font-family: 'Sixtyfour Convergence';
    src: url('fonts/SixtyfourConvergence-Regular.woff2') format('woff2'),
        url('fonts/SixtyfourConvergence-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* Set a background image for the entire page */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    font-family: Arial, sans-serif;
    position: relative; 
    transition: background 0.5s ease; 
     /* Replace with the actual image path */
     background-image: url('images/background1.gif');
     
}



.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: transparent; /* Transparent black background */
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 1000;
}

/* Buttons for background preview */
.bg-button {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: black;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Hover effect for buttons */
.bg-button:hover {
    
    background-color: rgb(137, 212, 241); /* Changes the background color */
    transform: scale(1.1);  
    text-shadow: 0 0 10px #fff,   /* White glow */
    0 0 20px #4716f7, 
    0 0 30px #4716f7, 
    0 0 40px #4716f7; 
}


/* Container to center the box */
.container {
    display: flex;
    flex-direction: column; /* Ensures the boxes are stacked vertically */
    justify-content: center;
    align-items: center;
    height: auto; /* Adjusted to allow the height to fit the content */
}

/* Black rounded box */
.box {
    background-color: black;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}

.links {
    background-color: black;
    padding: 40px; /* Adjust padding for the link box */
    border-radius: 10px; /* Slightly smaller radius for the link box */
    margin-top: 30px; /* Adds space between the boxes (adjust this value for more or less gap) */
    text-align: center;
    width: 234px; /* Set the same fixed width as the box */

}



/* Link styling */
.link-text {
    font-family: "Sixtyfour Convergence", sans-serif;
    color: white; /* Link text color */
    text-decoration: none; /* Remove underline */
    font-size: 2.5em; /* Font size for the link */
    transition: text-shadow 0.3s ease; /* Transition for the glow effect */
}

/* Link glow effect on hover */


/* Text styling for 'Jupiter' */
.text {
    font-family: "Sixtyfour Convergence", sans-serif; /* Use the custom font */
    color: white;
    text-decoration: none;
    font-size: 2.5em;
    transition: transform 0.3s ease;
}


.audio-container {
    margin-top: 30px; /* Add more space below the button */
    background-color: black; /* Make the background black */
    padding: 20px; /* Add padding inside the container */
    border-radius: 20px; /* Round the edges */
    width: 300px; /* Same width as the other boxes */
    text-align: center;
}

/* Optional: Style the audio player */
audio {
    width: 100%; /* Make the audio player full width */
    background-color: black; /* Set the background color to black */
    color: white; /* Make controls white (if supported by the browser) */
    border: none; /* Remove border if needed */
}
/* Text enlarges on hover */
.text:hover {
    transform: scale(1.3);  
    text-shadow: 0 0 10px #fff,   /* White glow */
    0 0 20px #3ac4ee, 
    0 0 30px #3ac4ee, 
    0 0 40px #3ac4ee; 
}

.link-text:hover {
    transform: scale(1.4);  
    text-shadow: 0 0 10px #fff,   /* White glow */
    0 0 20px #4716f7, 
    0 0 30px #4716f7, 
    0 0 40px #4716f7; 
}



.playlist {
    margin-top: 20px; /* Add some space above the buttons */
    text-align: center;
}

.song-button {
    background-color: black;
    color: white;
    padding: 15px 25px;
    margin: 10px 0;
    border-radius: 10px;
    border: 2px solid white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1.2em; /* Increase the size of the button text */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.song-button:hover {
    
    transform: scale(1.05); 
    text-shadow: 0 0 10px #fff,   /* White glow */
    0 0 20px #3ac4ee, 
    0 0 30px #3ac4ee, 
    0 0 40px #3ac4ee; 
}


.corner-buttons {
    position: absolute; /* Make the container absolute */
    bottom: 20px;       /* 20px from the bottom of the viewport */
    right: 20px;        /* 20px from the right side of the viewport */
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    gap: 10px;          /* Space between the buttons */
}

/* Styling for individual buttons */
.user-button {
    background-color: black;
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid black;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1.1em;
    width: 150px;       /* Set button width */
    text-align: center;
}



/* Hover effect for user buttons */
.user-button:hover {
    background-color: gray;
    transform: scale(1.1);
}

.text1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Use the custom font */
    color: white; /* Link text color */
    text-decoration: none; /* Remove underline */
    font-size: 1.5em; /* Font size for the link */
    transition: text-shadow 0.3s ease; /* Transition for the glow effect */
}


.text1:hover {
    transform: scale(1.4);  
    text-shadow: 0 0 10px #fff,   /* White glow */
    0 0 20px #942df5, 
    0 0 30px #942df5, 
    0 0 40px #942df5; 
}

