/* General Styling */
body {
    font-family: 'Space Mono';
}

/* Header Styling */
header a, header a:hover {
    text-decoration: none;
    color: black;
}

/* Feedback Styling */
#loginFeedback {
    height: 30px;
}

#passwordFeedback {
    height: 30px;
}

/* Main Content Styling */
#menuWrapper, #profileWrapper, #updateWrapper, #adminWrapper, #gameLandingWrapper {
    margin-left: 3%;
    margin-right: 3%;
    height: 56vh;
    width: 94vw;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

#editQuestionsWrapper input {
    margin: 1%;
}

#editQuestionsWrapper select {
    margin: 1%;
}

/* Question List Styling */
#questionListWrapper, #quizWrapper, #createWrapper,  #editQuestionsWrapper, #displayQuizWrapper, #musicQuizWrapper, #addQuestionsWrapper, #chooseQuizWrapper, #scoreboardWrapper, #fetchQuestionsWrapper, #rubricWrapper {
    margin-left: 3%;
    margin-right: 3%;
    width: 94vw;
    background-color: rgba(0, 0, 0, 0.5);
    color: black;
}

.container {
    background-color: rgba(0, 0, 0, 0.5);
    width: 94vw;
}

#questionListWrapper a {
    text-decoration: none;
    color: black
}

#questionListWrapper a:hover {
    color: teal;
} 

/* Button Styling */
#menuWrapper button, #profileWrapper button, #updateWrapper button, #adminWrapper button, #gameLandingWrapper button, #quizForm input, #chooseQuizWrapper button, #fetchQuestionsWrapper button {
    height: 60px;
    background-color: whitesmoke;
    width: 40%;
}

#editQuestionsWrapper button, #createWrapper button, #addQuestionsWrapper button, #displayQuizWrapper button, #searchWrapper button {
    height: 60px;
    width: 60%;
    background-color: whitesmoke;
    align-self: center;
}

#addQuestionsWrapper .backButton, #fetchQuestionsWrapper .backButton, #displayQuizWrapper .backButton, #chooseQuizWrapper .backButton {
    margin-bottom: 22vh;
}

#editQuestionsWrapper .backButton, #rubricWrapper button {
    height: 60px;
    width: 40%;
    background-color: whitesmoke;
    margin-bottom: 22vh;
    align-self: center;
}

#questionListWrapper button, #quizWrapper button  {
    height: 60px;
    width: 40%;
    background-color: whitesmoke;
    margin-bottom: 22vh;
}

#buttonWrapper button {
    background-color: whitesmoke;
    margin-bottom: 22vh;
    height: 60px;
    width: 40%;
}

#createWrapper .backButton {
    margin-bottom: 24vh;
}

.answerButton {
    min-height: fit-content;
}

#quizSubmitBtn {
    visibility: hidden;
}

#adminOptions {
    visibility: hidden;
}

/* Rubric Styling */
table {
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 2px 3px -1px whitesmoke;
}

tr {
    border-bottom: 1px solid whitesmoke;
}

td {
    border-right: 1px solid whitesmoke;
    border-left: 1px solid whitesmoke;
}

/* Footer Styling */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: fit-content;
    align-items: center;
    text-align: center;
    font-family: 'Space Mono';
    letter-spacing: 1px;
    font-weight: 400;
    padding: 1%;
    box-shadow: 0px 0px 3px 1px black;
    background-color: white;
}

footer p {
    font-size: small;
}

footer a {
    color: rgb(70, 70, 70);
    text-decoration: none;
    font-size: smaller;
}

.footer-text {
    margin: 0;
}

.copy {
    font-family: 'Roboto';
    font-size: 100%;
}

/* Scoreboard styling */
#currUserHighScore {
    color: green;
}


#scoreboardBack {
    margin-bottom: 22vh;
    width: 94vw;
    
    margin-left: auto;
    margin-right: auto;
}

#scoreboardBack button {
    height: 60px;
    width: 40%;
    background-color: whitesmoke;
    justify-self: center;
    align-self: center;
}

.scoreboard {
    border: 1px solid black;
    width: 90%;
}

.scoreboard tr {
    border-bottom: 1px solid black;
}

.scoreboard td {
    border: 1px solid black;
}

.scoreboard a {
    color: black;
}

#testScoresBtns, #scoreboardBack {
    
    justify-content: center;
}

#artistSearch {
    margin-right: 20px;
}

#artist-dropdown {
    top: 100%;
    padding: 10px;               
}