@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Regular.ttf");
}

html {
    height:100%;
}

body {
    font-family: 'Montserrat', 'Helvetica', 'sans-serif';
    color: white;
    background-color: #00BCD4;
    font-size: 1.2rem;
    line-height: 120%;
}

header {
    background-color: #00BCD4;
    width: 100%;
    height: 13vh;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;

}

h1 {
    margin: 2rem auto;
    font-size: x-large;
    width: 50vw;
    line-height: 120%;
    color: black;
}

em {
    color:black;
    margin-top: 35px;
    display: block;
    text-align: center;
}

.right_answer {
    color: green
}

.nickname-panel {
    margin-top: 15%;
}

#nickname {
    width: 60%;
    font-size: xx-large;
    padding: 30px;
    border: 1px #00BCD4 solid;
    background: none;
    color: black;
}

.player-name {
    font-size: 6vh;
    display: inline;
    color: white;
    margin-left: 20px;
}

.gamepin{
    width: 80%;
    font-size: xx-large;
    padding: 30px;
    border: 1px #00BCD4 solid;
    background: none;
    color: whitesmoke;
    margin-bottom: 2rem;
}

.scoreboard {
    text-decoration: none;
    color: #00BCD4;
    margin-top: 2rem;
    display: block;
}

#time {
    position: absolute;
    top: 5vh;
    right: 5vw;
    font-size: 5vh;
}


fieldset {
    width: 85%;
    height: 60vh;
    margin: 0 auto 0;
    border: none;
}

.question-title {
    margin: 2vh auto 0 auto;
    font-size: xx-large;
    width: 50vw;
    border-bottom: 1px whitesmoke solid;
}

#question {
    color: #00BCD4;
    margin: 1.5rem;
}

#addQuestion textarea, #addQuestion input[type="text"] {
    font-size: XX-large;
    width: 90%;
    margin: auto;
    color: #00BCD4;
    word-wrap: break-word;
    padding-top: 10px;
    margin-bottom: 0.5rem;
}

.container {
    text-align: center;
}

.answer, .difficulty {
    text-align: center;
    color: black;
    border: 1px solid #00BCD4;
    display: table;
    width: 90%;
    height: 14vh;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    font-size: large;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    outline: none;
}

.difficulty{
    line-height: 14vh;
    display: inline-block;
    color: #262626;
    size: 0.1rem;
}

.selectedAnswer {
    background-color: #00BCD4;
    color: #262626;
}

.answer span {
    display: table-cell;
    vertical-align: middle;
}

#success,
#failure {
    margin-top: 5vh;
    text-align: center;
}

.info-image {
    width: auto;
    height: 25vh;
}

.info-text {
    color: #00BCD4;
}

.info-learn {
    margin-bottom: 5vh;
}

.info-next,
.info-learn,
.again {
    margin-top: 5vh;
    display: block;
    text-decoration: none;
    color: black;
}

.again-button {
    margin: 3vh auto;
    display: block;
    width: 30vh;
    height: auto;
}



#logo {
    width: 300px;
    margin-top: 8vh;
    margin-bottom: 2vh;
}

#loadingGif {
    margin-top: 250px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}

#clickMee {
    margin-top: 10vh;
    width: 40vh;
    display: block;
    margin: auto;
}

.final-screen {
    width: 80%;
    margin: auto;
    margin-top: 10%;
}

.score {
    font-size: 500%;
    margin: 0;
    font-weight: bolder;
    margin-top: 60px;
    margin-bottom: 60px;
    color:black;
    text-align: center;
}

.next {
    margin: 4vh auto;
    display: block;
    width: 25%;
    height: auto;
}

@media screen and (min-width: 900px){

    .next{
        width:10%;
    }
    
    }

.again {
    text-decoration: none;
    color: whitesmoke;
}

.hidden {
    display: none;
}

table tr:nth-child(even) {
    background-color: darkgray;
}

#home{
    margin: 0.6rem 0.2rem 0rem 1rem;
    fill: #00BCD4;
}

#difficulty{
    margin: 1rem;
}

#difficulty a{
    font-size: 4vh;
    margin-bottom: 1vh;
}

#edit, #delete{
    width: 60%;
    height: auto;
    align-content: center;
}

#lblquestion,#lblrightanswer,#lblwronganswer,#lblwronganswer2,#lblwronganswer3 {
    color: #00BCD4;
    width: 90%;
    display: inline-block;
}

#lblcategorie,#lblchapter {
    color: #00BCD4;
    display: inline;
}

#addQuestion > textarea {
    width: 90%;
    padding: 5px;
    margin: 0px auto;
}

#addQuestion > select {
    display: inline;
    border-radius: 20px;
}

#addQuestion > input[type="submit"] {
    width: 90%;
    height: 50px;
    margin: 0px auto;
    background-color: #00BCD4;
    font-size: 2rem;
    color: #262626;
    border: 2px solid #262626;
    border-radius: 20px;
}

#headerInfo {
    text-align: center;
}

.errors{
    color: #ff0033;
}
#welcome{
    width: 80%;
    margin: auto;
    margin-top: 0.4rem;
    text-align: justify;
    font-size: 1rem;
    margin-bottom: 1.2rem;
}

#chapters{
    margin: auto;
    margin-top: 2rem;
    width: 80%;
}


li{
    margin-bottom: 1rem;
}

#learnMore{
    text-decoration: none;
    color: #00BCD4;
}

.chapterScore{
    font-weight: bolder;
    display: block;
    margin-top: 1rem;
    color: #00BCD4;
}

.scoreperchapter {
    color: black;
}

.correct_answer{
    color:black;
}

table{
    margin: 2rem auto;
    width:80%;
}

th{
    color: #00BCD4;
}

#chapters #scoreperchapter li {
    color: black;
}

.correct_answer {
    color:black;
    padding: 2rem;
}