/*
 * deutschMill additions to the tutorial-screen library
 * (js/node_modules/tutorial-screen/styles/tutorial.css, loaded first from index.php).
 *
 * The library's own classes (tutorial_veil, tutorial_tip, tutorial_tip_small, ...) are snake_case:
 * they are its API, so they are used as-is. Only deutschMill elements are styled here.
 */

/* Close button colours (library variables): darker "X", light hover so it stays readable (WCAG AA) */
.tutorial_veil,
.tutorial_veil_controls {
    --tutorial-close-color: var(--rose-taupe);
    --tutorial-close-hover-bg: var(--case-acc);
}

/* App buttons placed inside a tip (e.g. "finish tutorial" in the last stage) */
.tutorial_veil .btn {
    margin: 26px auto;
    float: none;
    line-height: 90px;
    height: 90px;
    font-size: 2em;
    font-weight: bold;
    width: auto;
    text-align: center;
}

@media (max-width: 900px) {
    .tutorial_veil div .btn {
        height: 75px;
        line-height: 75px;
        margin: 10px auto;
        font-size: 1em;
    }
}

/* Stage "Let's try": push the sentences down so the tip fits above #generate */
#main_container.moved-down {
    top: 140px;
}