body {
    background-color: #F8F8f0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.2em;
    margin-top: -5px;

}

.link {
    float: right;
    padding: 12px;
    padding-bottom: 8px;
    margin-bottom: -24px;

    background-color: white;
    font-size: 20pt;
    position: relative; /* ensure z-index takes effect */
    top: -15px;
    left: 4px;
    z-index: 2; /* keep link above overlapping heading */
    cursor: pointer;


}


.jumbotron h1 {
    color: rgba(225, 243, 250, 0.97);

    opacity: 0.9;
    font-family: 'Helvetica-Neue', 'Arial', sans-serif;
    font-size: 70pt;
    font-weight: bold;
    text-shadow: 42px 18px 12px rgba(00, 40, 40, .6);
    -webkit-text-stroke: 2px #2d5d6b;
    margin-left: 40px;
    padding: 4px;
}

/*bootstrap repair for resize */
.jumbotron {
    background-image: url('images/raindrops4.jpg');
    background-repeat: repeat;
    background-position: 14% 49%;
    background-size: cover;
    margin: 6px;
    min-height: 100px;
    height: 120px;

    padding-top: 13px;
    padding-bottom: 5px;
}

.column {
    padding: 6px;
}

.block-course {
    margin: 5px 5px 5px 0;
    font-size: 12pt;
    border: solid #aaf thin;
    border-radius: 15px;
    width: 100%;
    background-color: rgba(255, 255, 255, .8);
    box-shadow: 4px 4px 4px rgba(220, 220, 220, .4);
    padding: 10px 14px; /* ensure content (including bullets) sits within the block */
}

/* Keep bullets and their text inside the block border for course lists */
.block-course ul {
    list-style-position: inside;
    padding-left: 0; /* inside makes markers part of text block; no extra indent needed */
    margin-left: 0;
}


.block {
    font-size: 12pt;
    border: solid #aaf thin;
    border-radius: 15px;

    /* Use flex to center content */
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    width: 100%;

    background-color: rgba(255, 255, 255, .8);
    box-shadow: 4px 4px 4px rgba(220, 220, 220, .4);

    text-align: center;
    margin: auto;
    min-height: 16vh; /* give the block some height so centering is visible */
}


.block img {
    display: block;
    margin: auto auto;
    max-height: 70%;
    max-width: 70%;
}


/* Image icon for jumbotron link */
.link::before {
    content: '';
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url('images/link-icon.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}


h3 {
    padding-top: 0;
    margin-top: 0;
    padding-left: 3px;
}

a.baseline {
    display: inline-block;
}

a.baseline {
    display: inline-block;
}
/* row container to keep baseline links on one line inside flex column */
.baseline-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
}

.course-title {
    margin: auto;
}

.course-title h2 {
    padding: 20px 10px 10px;
    font-size: 50pt;
}

.course-title h3 {
    font-size: 28pt;
}
.course-title p {
    padding: 10px;
}

.course-title h4 {
    padding: 10px;
}

ul.bar li {
    display: inline;
}

img {
    max-width: 95%;
}

section {
    margin: 5px;
}

/* Responsive: on 200small and medium screens show 2 blocks per row (index and similar pages) */
@media (max-width: 1024px) {
    .block {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20vh
    }
    /* Split course lists into two columns on small and medium devices */
    section ul {
        column-count: 2;
        column-gap: 10px;
        column-fill: balance;
        padding-inline-start: 0;
    }

    /* Ensure list items don’t break awkwardly across columns */
    section li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        height: 21vh;
        list-style-type: none;
    }

    .block img {
        max-height: 50%;
        max-width: 60%;
    }
}

@media (min-width: 1025px) {
    .block {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40vh;

    }

    /* Split course lists into two columns on small and medium devices */
    section ul {
        column-count: 4;
        column-gap: 10px;
        column-fill: balance;
        list-style-type: none;
        padding-inline-start: 0;
    }

    /* Ensure list items don’t break awkwardly across columns */
    section li {
        break-inside: avoid;
        page-break-inside: avoid;
        height: 42vh;
        list-style-type: none;

    }
}


@media (max-width: 800px) {
    .block {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40vh;

    }

    /* Split course lists into two columns on small and medium devices */
    section ul {
        column-count: 1;
        column-gap: 10px;
        column-fill: balance;
        padding-inline-start: 0;
    }

    /* Ensure list items don’t break awkwardly across columns */
    section li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        height: 42vh;
        list-style-type: none;

    }
}

/* Index page grid: make top-level list items flow into rows */
body > ul {
    list-style: none;
    padding: 0;
    margin: 0 6px;
}

body > ul > li {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: top;
}

@media (min-width: 800px) {
    .block-course {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 12px;
        box-sizing: border-box;
        align-items: center;
        height: 40vh
    }

    ul.course {
        column-count: 2;
        column-gap: 10px;
        column-fill: balance;
        padding-inline-start: 0;
    }

    .course li {
        break-inside: avoid;
        page-break-inside: avoid;
        height: 42vh;
        list-style-type: none;
    }

    .images-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }
}

.images-row img {
    max-height:6vh;
}

@media (max-width: 800px) {
    .block-course {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 12px;
        box-sizing: border-box;
        align-items: center;
        height: 40vh
    }

    ul.course {
        column-count: 1;
        column-gap: 10px;
        column-fill: balance;
        padding-inline-start: 0;
    }

    .course li {
        break-inside: avoid;
        page-break-inside: avoid;
        height: 42vh;
        list-style-type: none;
    }

    .images-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .images-row img {
        max-height:10vh;

    }
}

/* Large screens: show 4 blocks per row */