body {
    background-color: #000; /* Black background */
    color: #fff; /* White text for contrast */
    font-family: 'Arial', sans-serif;
    text-align: center;
    padding: 40px; /* Increased padding for more space */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative; /* Relative positioning for absolute children */
}

h1 {
    font-size: 2.5em; /* Larger for emphasis */
    margin-bottom: 15px; /* Adjusted spacing */
    color: #6c5ce7; /* Calming purple */
}

h2 {
    font-size: 1.2em; /* Slightly larger */
    margin-bottom: 25px; /* More spacing below */
    text-shadow: 2px 2px 5px #ff0000, 1px 1px 5px #3cff00;
    color: blue;
}

h3 {
    margin-bottom: 20px;
    color: rgb(134, 236, 134);
}

#currentSong {
    color: red;
    margin: 15px 0; /* Adjusted margin for more space */
    font-size: 1.2em; /* Increased font size */
}

#gameBoard {
    display: grid;
    margin-top: 30px; /* More space above the game board */
    gap: 15px; /* Increased gap between boxes */
}

.guessRow {
    display: flex; /* Align boxes in a row */
    justify-content: center; /* Center align */
    margin: 10px 0; /* Spacing between rows */
}

.box {
    width: 60px; /* Increased width */
    height: 60px; /* Increased height */
    margin: 0 5px; /* Increased margin */
    border: 2px solid #dfe6e9; /* Light border */
    background-color: #2d3436; /* Dark box color */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* Increased font size */
    color: #fff; /* White text */
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.7); /* Glow effect */
}

.box:focus {
    outline: none;
    box-shadow: 0 0 20px rgba(108, 92, 231, 1); /* Brighter glow on focus */
    animation: pulse 0.6s infinite; /* Animation on focus */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#hintDisplay {
    font-family: 'Courier New', Courier, monospace; /* Change to your preferred font */
    font-size: 1.2em; /* Adjust the size */
    color: #ff0000; /* Change the text color */
    margin-top: 20px; /* Space above the hint */
    display: none; /* Initially hidden */
    text-shadow: 1px 1px 5px #ccc; /* Soft shadow */
}

#resultMessage {
    margin-top: 30px; /* More space above */
    font-size: 1.5em; /* Larger font for better visibility */
    box-shadow: 0 0 10px 5px #48abe0,
                0 0 20px 7px #ebecca,
                0 0 25px 20px #8a2be2,
                0 0 30px 25px #ff1493;
}

button {
    margin-top: 20px; /* Spacing above button */
    padding: 10px 20px; /* Padding for buttons */
    font-size: 1em; /* Font size for buttons */
    background-color: #6c5ce7; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
}

button:hover {
    background-color: #a29bfe; /* Lighter purple on hover */
}

/* Positioning for the Play Music button */
#PlayAudio {
    position: absolute; /* Position it absolutely */
    top: 20px; /* Distance from the top */
    left: 20px; /* Distance from the left */
    z-index: 10; /* Ensure it stays above other elements */
    padding: 10px 20px; /* Padding for the button */
    font-size: 1em; /* Font size for the button */
}

a {
    position: relative;
    padding: 12px 28px; /* Adjusted padding */
    margin: 15px; /* Spacing between links */
    color: #21ebff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px; /* Reduced spacing */
    font-size: 1.2em; /* Increased font size */
    transition: 0.5s;
    display: inline-block; /* Inline-block for better layout */
}

a:hover {
    background: #21ebff;
    color: #111;
    box-shadow: 0 0 50px #21ebff;
}

a:before,
a:after {
    content: ' ';
    position: absolute;
    transition: 0.5s;
}

a:before {
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #21ebff;
    border-left: 2px solid #21ebff;
}

a:hover:before {
    width: 100%;
    height: 100%;
}

a:after {
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #21ebff;
    border-right: 2px solid #21ebff;
}

a:hover:after {
    width: 100%;
    height: 100%;
}

@keyframes shake {
    10% {
        transform: translateX(-5%);
    }
    30% {
        transform: translateX(5%);
    }
    50% {
        transform: translateX(-7.5%);
    }
    70% {
        transform: translateX(7.5%);
    }
    90% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(0);
    }
}