@font-face {
    font-family: 'LibreFranklin Variable'; /* Specify the font name */
    src: url('./fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;  /* This range depends on the specific variable font. For Libre Franklin, it should cover from Extra Light (100) to Black (900) */
    font-style: normal;  /* Use the appropriate style, e.g., italic */
  }

/* Style for the body element to create a flexbox container */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    margin: 0;
    font-family: 'LibreFranklin Variable', sans-serif;
    font-weight: 200;
    background-color: #F7DA21; /* Updated to yellow background */;
}

#title {
    font-size: 36px;
    font-weight: 600;
}

/* Add a container for all the elements to keep them together */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 50%; /* Ensure it never goes below 90% of viewport width */
    max-width: 50%; /* Updated max-width to 600px */
    height: 620px; 
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-top: 10px;
}


/* Increase the size of the text field */
#inputWord {
    font-size: 40px;
    padding: 10px;
    width: 100%;
    max-width: 300px;
    margin: 20px 0 20px 0; /* Add space between the text field and the Next button */
    box-sizing: border-box;
    text-align: center; /* Center-align text */
    border: 2px solid #000; /* Adding a border to make the input field more prominent */
    border-radius: 5px; /* Adding some border-radius for a rounded look */

}

/* Style the buttons */
button {
    font-size: 26px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    background-color: black; /* Updated background to black */
    color: #FFEB3B; /* Updated text color to yellow */
    border: none;
    border-radius: 5px; /* Added border-radius */
    font-family: 'LibreFranklin ExtraLight', sans-serif;
    font-weight: 400;
}

button:hover {
    background-color: #FFEB3B; /* Updated hover background to yellow */
    color: black; /* Updated hover text color to black */
}

button:disabled {
    background-color: #cccccc; /* Gray background */
    cursor: not-allowed; /* Prevent cursor from changing to a pointer */
    color: #000000; /* Black color for the text */

}

audio {
    width: 100%;
}

.audio-input-container {
    /* min-height: 110px; Reserve space for the audio file, input field, and "Next" button */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* Style the feedback text */
#feedback {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    min-height: 40px;
}

/* Style for when the input is correct */
input.correct {
    color: green;
}

/* Style for when the input is incorrect */
input.wrong {
    color: red;
}

#score {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    display: none; /* Initially hidden */
}

#nextButton {
    display: none; /* Initially hidden */
    background-color: #FFEB3B; /* Updated hover background to yellow */
    color: black; /* Updated hover text color to black */

}

.level-selection {
    text-align: center;
    margin-bottom: 20px;
}

.level-selection p {
    font-size: 26px;
    margin-bottom: 10px;
}

.level-button {
    display: block; /* Makes the buttons appear one below the other */
    margin: 10px auto; /* Centers the buttons and adds some space between them */
    font-size: 26px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px; /* Makes the buttons rounded */
    cursor: pointer;
    background-color: #F7DA21; /* Background color for the buttons */
    color: black; /* Text color for the buttons */
    width: 200px; /* Sets a fixed width for the buttons */
}

.level-button:hover {
    background-color: #f0e68c; /* Lighter yellow for hover effect */
}


/* Focus styles for better accessibility */
button:focus, .level-button:focus, #startOverButton:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 2px #FFEB3B; /* Add a noticeable yellow glow */
}


.level-selection {
    margin-bottom: 20px;
}

.word-info-text {
    font-style: italic;
    margin-bottom: 16px; /* This adds a gap between the lines */
}

#definition {
    font-style: italic;
    border-bottom: 1px solid #000; /* This adds a line between the definition and the example */
    padding-bottom: 16px; /* This adds some space between the text and the line */
}
#example {
    font-style: italic;
    margin-top: 16px; /* This adds some space between the line and the text */
}

.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 50%; 
    max-width: 50%;
    height: 620px;
    box-sizing: border-box;
    margin-top: 20px;
}



.landing-page h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.landing-page p {
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 400;
}

.landing-page button, #startOverButton {
    font-size: 26px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: black;
    color: #FFEB3B;
    border: none;
    border-radius: 5px;
}

#startOverButton {
    margin-top: 20px;
}

#startOverButton:hover {
    background-color: #FFEB3B;
    color: black;
    font-size: 26px;

}
#nextButton, #startOverButton, #submitButton {
    display: inline-block;
    margin-right: 10px; /* Add some spacing between the buttons */
    font-size: 26px;
    margin: auto;
    /* width: 100%; */
}

#timerDisplay {
    font-size: 30px;
}

#startOverButton {
    background-color: #FFEB3B; /* Updated hover background to yellow */
    color: black; /* Updated hover text color to black */

}

/* Additional styles to ensure centering */
.score-page .progress-bar-container {
    /* If specific adjustments are needed for the score page */
    margin: 0 auto; /* Adjust the margin as needed */
  }

.score-page h1 {
    font-size: 24px;
}

.wordListsContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
}

#correctWordsList, #incorrectWordsList {
    width: 48%;  /* To leave some gap in between. Adjust accordingly. */
    box-sizing: border-box;
    display: block;  /* Initially hidden */
    
}

.container #correctWordsList, .container #incorrectWordsList {
    display: none;  /* Initially hidden in the game container */
}

.hidden {
    display: none;
}

/* Remove default bullet points */
.word-list-section ul {
    list-style-type: none;
    padding-left: 0;
    column-count: 2;  /* Split the list into two columns. Adjust as needed. */
    column-gap: 20px; /* Gap between columns. Adjust as needed. */
    width: 50%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.correct-word::before {
    content: '\2714';  /* Unicode for a checkmark */
    color: green;
    margin-right: 10px;
}

.incorrect-word::before {
    content: '\2716';  /* Unicode for a cross */
    color: red;
    margin-right: 10px;
}

#shareResultsButton {
    font-size: 26px;
}

#challengeFriendButton {
    font-size: 26px;

}

.score-streak-container {
    display: flex;
    justify-content: center;  /* Adjust as per your layout preference */
    align-items: center;
    gap: 70px;  /* This will create a gap between score and streak. You can adjust this value */
}

.profile-container {
    display: flex;
    align-items: center;  /* Vertically centers the name with the profile picture */
    gap: 15px;  /* Gap between the profile picture and the name */
}

#profilePic {
    border-radius: 50%;  /* Makes the profile picture circular */
    border: 2px solid #333;  /* Adds a border around the profile picture */
}

#playerNameDisplay {
    font-size: 1.5rem;  /* Adjust the font size as needed */
    font-weight: normal;  /* Makes the name bold */
    color: #333;  /* Adjust the color as needed */
}

footer {
    /* position: fixed; */
    /* left: 0; */
    /* bottom: 0; */
    width: 100%;
    text-align: center;
    /* padding: 20px 0; */
}

#todayDate {
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
}

.progress-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%; /* Adjust width as necessary */
    margin-bottom: 25px;
  }
  
  .progress-bar {
    height: 20px; /* Adjust height as necessary */
    width: calc(100% / 12 - 5px); /* Adjust spacing as necessary */
    background-color: lightgray; /* Default color */
    transition: background-color 3s; /* Smooth transition for color change */
  }




/* Media query for smaller screens */
@media (max-width: 480px) {
    #inputWord {
        margin-right: 0;
        margin-bottom: 20px;
        font-size: 40px; /* Adjusted font size */
    }

    button, #startOverButton, #nextButton {
        width: 100%;
        font-size: 26px;
        font-weight: 400;
    }
    #score, #feedback {
        font-size: 16px; /* Adjusted font size */
    }
    .landing-page p {
        font-size: 26px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    #todayDate {
        font-size: 16px;
        font-weight: 600;
        font-style: italic;
    }

    .correct-word::before {
        content: '\2714';  /* Unicode for a checkmark */
        color: green;
        margin-right: 10px;
    }
    
    .incorrect-word::before {
        content: '\2716';  /* Unicode for a cross */
        color: red;
        margin-right: 10px;
    }

    .landing-page {
        min-width: 90%;
        max-width: 90%;
    }
    
    .container{
        min-width: 90%;
        max-width: 90%;
    
    }
    .word-list-section ul {
        width: 80%;
    }
}