:root {
    --blue: #0d5893;
}

body {
    margin: 50px 100px;
}

h1 {
    text-align: center;
}

h2 {
    border-bottom: 1px dashed black;
    margin-top: 100px;
}

h2 a, .backbutton {
    text-decoration: none;
    color: var(--blue);
    font-weight: normal;
}

h2 a:hover, .backbutton:hover {
    text-decoration: underline;
}

.training_button {
    color: var(--blue);
    font-size: 20px;
    text-decoration: none;
    border: 1px solid var(--blue);
    padding: 5px 10px;
    margin: 10px;
}

.training_button:hover {
    background: #0d589321;
}

.infobox {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 10px;
    opacity: 0.5;
    font-size: 13px;
}

.upload_info {
    border: 1.5px solid black;
    padding: 8px 15px;
    width: 60%;
    border-radius: 30px;
}

.success {
    color: #1f7c23;
}

.error {
    color: #7c1f1f;
    font-weight: bold;
}

.otable {
    border-collapse: collapse;
}

.otable td {
    vertical-align: top;
    border: 1px solid black;
    padding: 20px 20px;
}

.otable th {
    text-align: left;
    padding-bottom: 5px;
}

.extra_info_thema {
    display: block;
    color: grey;
    font-size: 10px;
}

.extra_info_counter {
    display: inline-block;
    padding: 3px 13px;
    font-family: monospace;
    margin-top: 20px;
}

.ccorrect {
    background: #0080033d;
    color: #008003;
}

.cok {
    background: #decc344a;
    color: #9e9017;
}

.cincorrect {
    background: #961d142b;
    color: #961d14;
}

.cflagged {
    background: #decc344a;
    color: #9e9017;
    float: right; 
}


select, input {
    border: 1px solid black;
    background: white;
    border-radius: 8px;
    padding: 4px 10px;
}


.exitbutton {
    font-size: 7vw;
    font-family: monospace;
    position: fixed;
    top: 3vw;
    left: 5vw;
    color: grey;
}

.counter {
    font-size: 7vw;
    position: fixed;
    top: 3vw;
    right: 5vw;
    color: grey;
}

.questionarea {
    position: fixed;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 70vh;
    background: white;
    border: 1px dotted black;
    /* border-bottom: 1px dotted black; */
    text-align: center;
    overflow-y: scroll;
    transition: 0.4s transform, 0.2s color, 0.2s background, 0.2s border;
}

.answer_submitted_correct {
    transform: rotate(-20deg) translateX(0vw) translateY(-100vh);
    color: #008003;
    background: #00800357;
    border: 5px solid #008003;
}


.answer_submitted_ok {
    transform: rotate(-0deg) translateX(0vw) translateY(-100vh);
    color: #9e9017;
    background: #9e90174f;
    border: 5px solid #9e9017;
}


.answer_submitted_flagged {
    transform: rotate(-0deg) translateX(0vw) translateY(-100vh);
    color: #424242;
    background: #605f564f;
    border: 5px solid #343434;
}


.answer_submitted_incorrect {
    transform: rotate(20deg) translateX(0vw) translateY(-100vh);
    color: #961d14;
    background: #961d1447;
    border: 5px solid #961d14;
}

.top_info {
    color: grey;
    margin-top: 3vw;
    font-size: 4vw;
}

.question {
    font-size: 7vw;
    padding: 15vw 5vw;
}

.answershowbutton {
    color: grey;
    font-size: 6vw;
    border: 0.3vw solid grey;
    display: inline-block;
    border-radius: 100vw;
    padding: 0.6vw 4vw;
}


.answershowbutton:hover {
    background: #80808024;
}

.answer {
    display: none;
    font-size: 5.5vw;
    padding: 5vh 5vw;
    text-align: left;
}

.show_answer {
    display: block;
}

.selectarea {
    position: fixed;
    width: 100vw;
    top: 80vh;
    left: 0;
    text-align: center;
    font-size: 9vw;
    font-family: monospace;
}

.selectarea div {
    width: 27vw;
    margin: 0;
    display: inline-block;
}

.correctbutton {
    color: #008003;
}

.okbutton {
    color: #9e9017;
}

.incorrectbutton {
    color: #961d14;
}

.done_text {
    color: #008003;
    font-size: 15vw;
    margin-top: 10vh;
}

.done_button {
    margin-top: 15vh;
    font-size: 7vw;
    color: grey;
    border: 1px solid grey;
    display: inline-block;
    padding: 1.5vw 6vw;
    border-radius: 12vw;
}



.historie_box {
    display: inline-block;
    width: 35px;
    padding: 2px 0;
    font-family: monospace;
    text-align: center;
    margin: 0 3px;
}

.historie_box_1 {
    color: grey;
    background: #8080803b;
}

.historie_box_2 {
    color: #008003;
    background: #00800333;
}


.historie_box_3 {
    color: #008003;
    background: #00800370;
}

.display_on_mobile {
    display: none;
}


@media only screen and (max-width: 1200px) {

    .display_on_mobile {
        display: inline;
    }

    .training_button {
        display: block;
    }

    select, input {
        width: 100%;
    }

}