body {
}

/* https://www.color-hex.com/color-palette/98713 */

@media only screen and (min-width: 768px) {
    div.qx-scores-container {
        background: black;
        box-shadow: none;
    }
}

.keypad {
    font-family: "Body-Font";
    font-weight: 400;
    font-size: 28px;
}

.pincode {
    font-family: "Body-Font";
    font-size: 12px;
}

.caption-text {
    font-size: 16px;
}

.caption-status {
    overflow: inherit;
}

.buttontext {
    font-family: "Body-Font";
    font-size: 10vh;
}

.scores-value {
    color: var(--ferrari-yellow);
    font-size: calc(min(8vh, min(20vw, 100px)));
}

.rank-value {
    color: var(--ferrari-yellow);
    font-size: calc(min(8vh, min(20vw, 100px)));
}

.scores-name {
    color: var(--ferrari-yellow);
}

.scores-header {
    font-size: calc(min(6vh, 30vw));
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 3vh;
}

.rank-header {
    font-size: calc(min(6vh, 30vw));
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 3vh;
}

div.qx-scores-container {
    background: var(--ferrari-red-dark);
}

@media only screen and (max-width: 768px) {
    div.qx-scores-container {
        width: 100%;
        height: 100%;
        padding: 1.5vh;
        padding-top: 10vh;
    }
}

button.submit-button {
    font-family: inherit;
}

button.letter-button {
    font-family: inherit;
}

p.qx-question {
    font-family: inherit;
    color: black;
}

button.qx-mpc-button {
    font-family: inherit;
}