@font-face {
    font-family: 'Grundschrift';
    src: url('../assets/fonts/grundschrift-beta.ttf');
}

.logo {
  height: 2.5em;
  padding: 0.25em;
  will-change: filter;
  transition: 0.75s;
  filter: drop-shadow(0 0 0.2em #24c8db);
}

.info {
    margin-top: 3px;
}

.score {
    font-weight: bold;
    font-family: monospace;
}

#highscore-info {
    display: inline-block;;
    color: gray;
}

#score.is-highscore::after {
    content: '🏆';
    padding-left: 5px;
}

#status {
    display: block;
    margin: 3px auto;
    width: 40px;
    height: 40px;
    font-size: 2em;
}

#question {
    position: relative;
    display: inline-block;
    margin-top: 5px;
    padding: 5px 10px 1px 10px;
    font-size: 2.5em;
    font-weight: bold;
}

#question.grundschrift {
    font-family: Grundschrift;
}

/* render Grundlinie */
#question.grundschrift::after {
    position: absolute;
    content: '';
    z-index: -1;  /* make sure it's behind the text */
    left: 0;
    bottom: 0.5em;  /* adjust position */
    width: 100%;
    height: 2px;
    background-color: #cacaca;
}

#answers {
    margin: 30px 0;
}

#answers .answer {
    display: inline-block;
    border: solid 1px #2f2f2f;
    border-radius: 8px;
    outline-offset: 2px;
    outline-width: 5px;
    width: 66px;
    height: 60px;
    cursor: pointer;
}

@media (min-width: 768px) {
    #answers .answer {
        border-radius: 16px;
        width: 114px;
        height: 124px;
    }
}

#answers .answer.type-color {
    background-color: inherit;
}

#answers .answer.type-emoji,
#answers .answer.type-symbol {
    font-size: 2em;
}

@media (min-width: 768px) {
    #answers .answer.type-emoji,
    #answers .answer.type-symbol {
        font-size: 4em;
    }
}

#answers .answer.type-alphanumeric {
    font-size: 2.2em;
    font-family: Grundschrift;
    padding: 8px 0 0px 0;  /* offset for Grundschrift */
}

@media (min-width: 768px) {
    #answers .answer.type-alphanumeric {
        font-size: 4.2em;
        padding: 21px 0 0px 0;  /* offset for Grundschrift */
    }
}

#answers .answer.correct {
    outline-style: solid;
    outline-color: green;
}

#answers .answer.wrong {
    outline-style: solid;
    outline-color: red;
}

#note {
    font-size: 0.7em;
    color: gray;
}

.disable-clicks {
    pointer-events: none;
    cursor: default;
}

#settingsPanel {
    display: none;
}