{{ block title }}
Break Time
{{ endblock }}

{{ block content }}
<style>
    .otree-title {
        display: none;
    }


    .otree-body {
        text-align: center;
    }

    .otree-timer {
        font-size: 32px;
        margin-top: 120px;
    }

    .break-text {
        font-size: 32px;
        font-weight: bold;
        margin-top: 40px;
    }

    .instruction-box {
        max-width: 950px;
        margin: 0 auto;
        padding: 20px 28px;
        line-height: 1.7;
        font-size: 18px;
    }

    .instruction-section {
        margin-bottom: 28px;
    }

    .instruction-heading {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 14px;
        color: #1f1f1f;
    }

    .instruction-paragraph {
        margin-bottom: 16px;
        text-align: justify;
    }

    .highlight {
        font-weight: 700;
    }

    .formula-box {
        background-color: #f8f9fa;
        border-left: 5px solid #4a90e2;
        padding: 16px 18px;
        margin: 20px 0;
        border-radius: 6px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }

    .note-box {
        background-color: #fcfcfc;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        padding: 16px 18px;
        margin-top: 18px;
    }

    .otree-btn-next {
        margin-top: 25px;
        font-size: 18px;
        padding: 8px 24px;
    }
</style>

<style>
.powered-by-otree {
    display: none !important;
}
</style>

<div class="instruction-box ">
    <p class="instruction-paragraph" style="margin-bottom: 12px;">
        <span class="highlight">Please take a short break</span>
    </p>

    <p class="instruction-paragraph" style="margin-bottom: 12px;">
        To switch from the experiment tab to a standard web browser, press
        <span class="highlight">Alt + Tab</span> at the same time.
        You can switch back by pressing <span class="highlight">Alt + Tab</span> again.
    </p>
</div>
<p></p>
{{ next_button }}

{{ endblock }}