/* START HERE: change these values to customize the bell and display pages.
   Save this file and refresh the browser. No .NET rebuild is needed for CSS. */
:root {
    --page-background: #ffd54f;
    --card-background: #183b42;
    --card-text: #fffbee;
    --caption-color: #ffe078;
    --content-background: #fffbee;
    --content-text: #172f35;
    --page-font: Arial, Helvetica, sans-serif;

    /* Main and building bell cards */
    --bell-columns: 2;
    --bell-card-radius: 20px;
    --bell-gap: 3vh 3vw;
    --bell-number-size: clamp(20px, 6vw, 140px);
    --remaining-number-size: clamp(48px, 8vw, 130px);

    /* Objectives display */
    --display-radius: 14px;
    --display-clock-size: clamp(16px, 6.2vw, 180px);
    --lesson-font-size: clamp(14px, 5.0vw, 140px);
    --subject-font-size: clamp(14px, 4.6vw, 140px);
    --objective-font-size: clamp(12px, 5.2vw, 140px);


    --lesson-width: calc(11ch);
    --objective-line-spacing: 1.0;

}

body.main-bells, body:has(main.display) {
    background: var(--page-background);
    color: var(--content-text);
    font-family: var(--page-font);
}
.main-clock {
    grid-template-columns: repeat(var(--bell-columns), minmax(0, 1fr));
    gap: var(--bell-gap);
}
.main-clock-field {
    background: var(--card-background);
    color: var(--card-text);
    border-radius: var(--bell-card-radius);
}
.clock-label, .bell-caption { color: var(--caption-color); }

.display-bell-bar .bell-caption {font-size: 1.5vw;}
.clock-label {  font-size: 48px;}

.clock-value { font-size: var(--bell-number-size); }
.main-clock .remaining .clock-value { font-size: var(--remaining-number-size); }
.display-bell-bar {
    background: var(--card-background);
    color: var(--card-text);
    border-radius: var(--display-radius);
}
.bell-number { font-size: var(--display-clock-size); }
.display .viewport, .lesson-subject-row .display-subject {
    background: var(--content-background);
    color: var(--content-text);
}
.lesson-subject-row .display-subject {
    border-radius: var(--display-radius);
    font-size: var(--subject-font-size);
}
.lesson-subject-row select {
    border-radius: var(--display-radius);
    font-size: var(--lesson-font-size);
    width: var(--lesson-width);
}
.scroll-part {
    font-size: var(--objective-font-size);
    line-height: var(--objective-line-spacing);
}

/* Phone sizes: edit separately from the large-screen values above. */
@media (max-width: 600px) {
    :root {
        --bell-columns: 1;
        --bell-gap: 12px;
        --bell-number-size: clamp(30px, 10vw, 60px);
        --remaining-number-size: clamp(40px, 12vw, 72px);
        --display-clock-size: clamp(13px, 3.8vw, 22px);
        --subject-font-size: clamp(20px, 5vw, 30px);
    }
}