body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1c1c1c;
    margin: 0;
    padding: 0;
    color: #f0f0f0;
    overflow-x: hidden; /* Prevent horizontal overflow */
    overflow-y: auto; /* Allow vertical scrolling */
}

#gameContainer {
    width: 100%;
    max-width: 900px; /* Adjusted max width */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* Added padding for better spacing */
    box-sizing: border-box; /* Ensuring padding is included in the width */
    height: auto; /* Adjust height to auto */
    min-height: 100vh; /* Ensure container takes full height */
}

#title {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 2.5em; /* Adjusted font size for better visibility */
    color: #f0f0f0;
    margin: 0;
    margin-bottom: 15px; /* Adjusted margin for spacing */
}

#subtitle {
    text-transform: uppercase;
    font-size: 10pt;
    letter-spacing: 2px;
    color: #f0f0f0;
    font-weight: normal;
    margin-bottom: 0;
}

#instructions {
    font-size: 10pt;
    font-style: italic;
    color: #f0f0f0;
    margin: 10px 0 15px 0; /* Adjusted margin for spacing */
}

h2 {
    margin: 0 0 5px 0; /* Updated margin */
    color: #A7226F;
}

h2.difficulty-header,
h2.quality-header,
h2.extensions-header,
h2.guess-header {
    display: block;
    width: 100%;
    text-align: center;
}

h2.difficulty-header {
    color: #e36f46;
}

h2.quality-header {
    color: #9a2b6b;
}

h2.extensions-header {
    color: #e3c33b;
}

h2.guess-header {
    color: #1D929A;
}

button {
    font-size: 1em; /* Reduce the font size */
    padding: 8px; /* Adjust padding to make the buttons smaller */
    margin: 5px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #f0f0f0;
    background-color: #1c1c1c;
}

button.wide {
    border-radius: 10px;
    width: auto;
    padding: 8px 16px; /* Default padding for wide buttons */
}

button.round {
    width: 50px; /* Default width */
    height: 50px; /* Default height */
}

button:hover {
    background-color: #1D929A;
    transform: scale(1.1);
}

button.selected {
    background-color: #1D929A;
    color: #f0f0f0;
}

button.difficulty {
    background-color: #1c1c1c;
    color: #e36f46;
    border: 2px solid #e36f46;
}

button.difficulty:hover {
    background-color: #e36f46;
    color: #1e1d1d;
}

button.difficulty.selected {
    background-color: #e36f46;
    color: #1e1d1d;
}

button.quality {
    background-color: #1c1c1c;
    color: #9a2b6b;
    border: 2px solid #9a2b6b;
    position: relative;
    font-size: 1em; /* Ensure the font size is consistent */
}

button.quality:hover,
button.quality.selected {
    background-color: #9a2b6b; /* Change background to purple on hover */
    color: #000; /* Change the text color to black on hover */
}

button.extension {
    background-color: #1c1c1c;
    color: #e3c33b;
    border: 2px solid #e3c33b;
}

button.extension:hover {
    background-color: #e3c33b;
    color: #1e1d1d;
}

button.extension.selected {
    background-color: #e3c33b;
    color: #1e1d1d;
}

button#playChord, button#submitChord, button#newGame {
    background-color: #f0f0f0;
    color: #1c1c1c;
    border: none;
}

button#playChord:hover, button#submitChord:hover, button#newGame:hover {
    background-color: #1D929A;
    color: #f0f0f0;
}

button#playChord.selected, button#submitChord.selected, button#newGame.selected {
    background-color: #1D929A;
    color: #f0f0f0;
}

div.center {
    text-align: center;
    margin-bottom: 0;
}

#chordDisplay {
    font-size: 2em;
    font-family: Arial, sans-serif;
    color: #1D929A;
    border: 2px solid #1D929A;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0; /* Removed bottom margin */
}

.flat {
    font-family: 'Noto Music', sans-serif;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.2em;
}

.sharp {
    font-family: 'Noto Music', sans-serif;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.3em;
}

#feedback {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #1D929A;
}

button#playChord {
    display: flex;
    align-items: center;
    margin-top: 5px; /* Adjusted margin-top */
}

button#playChord svg {
    margin-right: 10px;
    width: 14px;
    height: 14px;
    fill: #1c1c1c;
    transition: fill 0.3s;
}

button#playChord:hover svg, button#playChord.selected svg {
    fill: #f0f0f0;
}

.container {
    display: flex;
    align-items: center;
}

.vertical-line {
    width: 2px;
    height: 50px;
    border-left: 2px dotted teal;
    margin: 5px 0;
}

/* Mobile styling */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* Allow vertical scrolling on mobile */
    }

    #gameContainer {
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto; /* Allow vertical scrolling on mobile */
        min-height: 100vh; /* Ensure container takes full height */
    }

    .center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Ensure everything is centered horizontally */
        width: 100%;
    }

    button.wide {
        padding: 8px 10px; /* Adjust padding for wide buttons on mobile */
    }

    button.round {
        width: 45px; /* Adjust width for mobile */
        height: 45px; /* Adjust height for mobile */
    }

    h2 {
        margin: 0 0 5px 0; /* Updated margin for mobile */
    }

    button#playChord {
        margin-top: 5px; /* Adjust margin-top for mobile */
    }

    .difficulty,
    .quality {
        width: 22%;
        margin: 1%;
        box-sizing: border-box;
        text-align: center;
        font-size: 1em; /* Ensure font size is consistent */
    }

    .quality[data-quality="minor"]::before {
        content: "min";
        font-size: 1em; /* Ensure font size is consistent */
        color: #9a2b6b;
        display: block;
    }

    .quality[data-quality="major"]::before {
        content: "maj";
        font-size: 1em; /* Ensure font size is consistent */
        color: #9a2b6b;
        display: block;
    }

    .quality[data-quality="diminished"]::before {
        content: "dim";
        font-size: 1em; /* Ensure font size is consistent */
        color: #9a2b6b;
        display: block;
    }

    .quality[data-quality="augmented"]::before {
        content: "aug";
        font-size: 1em; /* Ensure font size is consistent */
        color: #9a2b6b;
        display: block;
    }

    .quality span {
        display: none; /* Hide the original text on mobile */
    }

    .quality:hover::before,
    .quality.selected::before {
        background-color: #9a2b6b; /* Change background to purple on hover */
        color: #000; /* Change the text color to black on hover */
    }

    .vertical-line {
        height: 25px; /* Adjust height for mobile */
    }
}

@media (min-width: 769px) {
    #gameContainer {
        height: 100vh; /* Ensure container takes full height on desktop */
        display: flex;
        justify-content: center;
    }

    .quality[data-quality="minor"]::before,
    .quality[data-quality="major"]::before,
    .quality[data-quality="diminished"]::before,
    .quality[data-quality="augmented"]::before {
        display: none; /* Hide the abbreviated text on desktop */
    }

    .quality[data-quality="minor"]::after {
        content: "minor";
        font-size: 1em; /* Ensure font size is consistent */
    }

    .quality[data-quality="major"]::after {
        content: "major";
        font-size: 1em; /* Ensure font size is consistent */
    }

    .quality[data-quality="diminished"]::after {
        content: "diminished";
        font-size: 1em; /* Ensure font size is consistent */
    }

    .quality[data-quality="augmented"]::after {
        content: "augmented";
        font-size: 1em; /* Ensure font size is consistent */
    }

    .quality:hover::after,
    .quality.selected::after {
        background-color: #9a2b6b; /* Change background to purple on hover */
        color: #000; /* Change the text color to black on hover */
    }
}