/* General Resets and Styles */
body {
    background-color:black; /* Background color */
    color: white; /* Default text color */
    font-family: 'Times New Roman', Times, serif; /* Font styles */
    height: 100vh; /* Set height to the full viewport height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.music-bg {
    background-image: url('Beach.gif'); /* Music background image */
    background-size: cover; /* Ensure image covers entire page */
    background-repeat: no-repeat; /* Prevent image from repeating */
    background-attachment: fixed; /* Keep image fixed when scrolling */
}

/* Centering utility */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

/* Link Styles */
a {
    color: orangered; /* Default link color */
    text-decoration: none; /* Remove underline by default */
    font-size: 1.5em; /* Increase font size of links */
    font-weight: bold; /* Make the link text bold */
}

a:hover {
    color: red; /* Hover color */
    background-color: transparent; /* Transparent background on hover */
    text-decoration: underline; /* Underline on hover */
}

/* Heading Styles */
h1 {
    border: 2px inset silver; 
    padding: 10px;
    text-align: center;
}

h2, h3, h4 {
    text-align: center; /* Centralize headings */
}

/* Frame Style */
.frame {
    display: flex; 
    width: 100vw; /* Full viewport width */
    height: 35vh; /* Height set to 35% of viewport height */
    justify-content: center; 
    align-items: center; 
}

/* Navigation Styles */
nav {
    text-align: center; /* Center the navigation text */
}

.nav-list {
    display: inline-block; /* Make the list inline-block for centering */
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* No padding */
    margin: 0; /* No margin */
}

.nav-list li {
    display: inline; /* Keep list items inline */
    margin-right: 20px; /* Space between links */
}

/* Additional Styles for Visual Hierarchy (optional) */
footer {
    text-align: center; 
    margin-top: 20px; /* Space above footer */
}