:root {
    --main-bg-color: #313B72;
    --card-bg-color: #7EE081;
    --font-color: #200f27;
    --question-bg-color: #62A87C;
    --question-hover-color: #5b9a73;
    --heading-font: Josefin Sans;
}

body, html {
    background-color: var(--main-bg-color);
}

.title {
    font-family: var(--heading-font);
    font-size: 50px;
}

.subtitle {
    font-family: var(--heading-font);
    font-size: 30px;
}

.shown {
    display: block;
}

.hidden {
    display: none;
}

.correct {
    background-color: rgb(14, 139, 14) !important;
}

.incorrect {
    background-color: rgb(232, 34, 34) !important;
}

.unclickable {
    pointer-events: none;
}

/*Styling for all cards*/

.card {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    border: 3px solid var(--font-color);
    color: var(--font-color);
    text-align: center;
    width: 45%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.card .image {
    width: 80%;
    border-radius: 5px;
    border: 3px solid var(--font-color);
}

/*Styling for authentication card*/

.authentication .auth-form {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
}

.authentication .auth-form .input-field {
    font-size: 20px;
    font-family: var(--heading-font);
    margin-bottom: 10px;
    color: var(--font-color);
    border-radius: 5px;
    border-color: var(--font-color);
}

.authentication .auth-form .submit {
    width: 70%;
    background-color: var(--question-bg-color);
    margin: auto;
}

.authentication .auth-form .submit:hover {
    background-color: var(--question-hover-color);
}

/*Styling for the start card*/

.start .question-numbers {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.start .question-numbers .question-amount {
    background-color: var(--question-bg-color);
    padding-left: 10px;
    padding-right: 10px;
    border: 3px solid var(--font-color);
    border-radius: 5px;
}

.start .question-numbers .question-amount:not(:last-child) {
    margin-right: 30px;
}

.start .question-numbers .question-amount:hover {
    background-color: var(--question-hover-color);
    cursor: pointer;
}

/*Styling for the question card*/

.question .current-answers {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
}

.question .current-answers .answer {
    background-color: var(--question-bg-color);
    border: 3px solid var(--font-color);
    border-radius: 5px;
    margin-bottom: 15px;
    color: var(--font-color);
}

.question .current-answers .answer:hover {
    background-color: var(--question-hover-color);
    cursor: pointer;
}

.question .next-question {
    background-color: var(--question-bg-color);
    border: 3px solid var(--font-color);
    border-radius: 5px;
    color: var(--font-color);
    width: 50%;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 30px;
}

.question .next-question:hover {
    background-color: var(--question-hover-color);
    cursor: pointer;
}

.question .end-quiz {
    background-color: var(--question-bg-color);
    border: 3px solid var(--font-color);
    border-radius: 5px;
    color: var(--font-color);
    width: 50%;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 30px;
}

.question .end-quiz:hover {
    background-color: var(--question-hover-color);
    cursor: pointer;
}

/*Styling for the end card*/
.end .play-again {
    background-color: var(--question-bg-color);
    border: 3px solid var(--font-color);
    border-radius: 5px;
    color: var(--font-color);
    width: 50%;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 60px;
}

.end .play-again:hover {
    background-color: var(--question-hover-color);
    cursor: pointer;
}

/*Font*/

.josefin-sans {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

/*Mobile Version*/

@media only screen and (max-width: 600px) {
    .card {
        width: 90%;
    }
  }