body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
    font-family: 'Helvetica', sans-serif;
    color: rgb(249, 136, 209);
    
}
.concert-vid{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.container {
    text-align: center;
    background-color: rgba(3, 0, 0, 0.8);
    border-radius: 20px;
    padding: 20px;
}

#skills-heading {
    font-size: 4rem;
    cursor: pointer;
    animation: throb 4s infinite;
    text-shadow: 0 0 10px rgba(252, 175, 248, 0.4);
}

@keyframes throb {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}



#skills-list {
    list-style-type: none;
    padding: 0;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#skills-list.visible {
    opacity: 1;
}

#skills-list li {
    margin: 0.5rem 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

#skills-list.visible li {
    opacity: 1;
    transform: translateY(0);
}

#skills-list.visible li:nth-child(1) { transition-delay: 0.1s; }
#skills-list.visible li:nth-child(2) { transition-delay: 0.2s; }
#skills-list.visible li:nth-child(3) { transition-delay: 0.3s; }
#skills-list.visible li:nth-child(4) { transition-delay: 0.4s; }
#skills-list.visible li:nth-child(5) { transition-delay: 0.5s; }
#skills-list.visible li:nth-child(6) { transition-delay: 0.6s; }
#skills-list.visible li:nth-child(7) { transition-delay: 0.7s; }
#skills-list.visible li:nth-child(8) { transition-delay: 0.7s; }

/* New styles for the audio player */
#audio {
    position: fixed; /* Fix the audio player to the viewport */
    bottom: 20px; /* Position it 20px from the bottom */
    right: 20px; /* Position it 20px from the right */
    z-index: 1000; /* Ensure it's above other content */
    /*background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    border-radius: 10px; /* Rounded corners */
    padding: 10px; /* Add some padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

#audio audio {
    width: 200px; /* Adjust the width of the audio player */
    height: 40px; /* Set a fixed height for the controls */
    -webkit-appearance: none; /* Disable default Chrome/Safari styling */
    appearance: none; /* Disable default styling in other browsers */
    background-color: transparent; /* Make the background transparent */
}

#audio audio::-webkit-media-controls-panel {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for controls */
    border-radius: 10px; /* Rounded corners for controls */
}

#audio audio::-webkit-media-controls-play-button,
#audio audio::-webkit-media-controls-current-time-display,
#audio audio::-webkit-media-controls-time-remaining-display {
    color: #000; /* Ensure controls are visible (black) */
}

#HL{
    position: fixed;
    /* background-color: black; */
    top: 90%;
    left: 10%;
    text-shadow: 0 0 10px rgba(223, 80, 248, 0.9);
}
#HL:hover {  
    animation: float 2s ease-in-out infinite;  
    filter: drop-shadow(0 0 8px rgba(239, 188, 248, 0.7));
}  
@keyframes float {  
    0% { transform: translateY(0); }  
    50% { transform: translateY(-5px); }  
    100% { transform: translateY(0); }  
}  

.concert-vid{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

#song{
    position: absolute;
    right: 1%; /* Adjust as needed */
    bottom: 80px;
    padding-left: 6%;
    color:  rgb(239, 188, 248);
    text-shadow: 0 0 10px rgba(223, 80, 248, 0.9); 
}