html, body {
    height: 100%;
    margin: 0;
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Prevent flash of unfiltered content - hide nav items initially when in course mode */
html.nav-loading .sidebar nav ul li {
    opacity: 0;
}

html:not(.nav-loading) .sidebar nav ul li {
    opacity: 1;
    transition: opacity 0.05s ease-out;
}

@font-face {
    font-family: 'EduSABeginner-VariableFont_wght';
    src: url('fonts/EduSABeginner-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Canonical pixel sizes for row1, row2, row3, col1, col2, col6 */
:root {
    --row1: 24px;
    --row2: 100px;
    --row3: 320px;
    --col1: 56px;
    --col2: 320px;
    --col6: 56px;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px 320px 0.5fr 1.6875fr 0.5fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar title box1 box1 ."
    ". sidebar text1 text2 text3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar text4 text5 text6 .";
}

.container2 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px auto auto auto 56px;
    grid-template-rows: 24px 100px auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 text5 text9 ."
    ". sidebar text1 text5 text10 ."
    ". sidebar text2 box2 text11 ."
    ". sidebar text2 box2 text11 .";
}

.container3 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 text5 text9 ."
    ". sidebar text1 text6 text10 ."
    ". sidebar text2 text7 text11 ."
    ". sidebar text2 text8 text12 .";
}

.containerprojects {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 56px 320px auto auto auto 56px;
    grid-template-rows: 24px 100px repeat(24, auto);
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 video1 video1 ."
    ". sidebar text1 video1 video1 ."
    ". sidebar text2 video2 video2 ."
    ". sidebar text2 video2 video2 ."
    ". sidebar text3 video3 video3 ."
    ". sidebar text3 video3 video3 ."
    ". sidebar text4 video4 video4 ."
    ". sidebar text4 video4 video4 ."
    ". sidebar text5 video5 video5 ."
    ". sidebar text5 video5 video5 ."
    ". sidebar text6 video6 video6 ."
    ". sidebar text6 video6 video6 ."
    ". sidebar text7 video7 video7 ."
    ". sidebar text7 video7 video7 ."
    ". sidebar text8 video8 video8 ."
    ". sidebar text8 video8 video8 ."
    ". sidebar text9 video9 video9 ."
    ". sidebar text9 video9 video9 ."
    ". sidebar text10 video10 video10 ."
    ". sidebar text10 video10 video10 ."
    ". sidebar text11 video11 video11 ."
    ". sidebar text11 video11 video11 ."
    ". sidebar text12 video12 video12 ."
    ". sidebar text12 video12 video12 ."
    ;
    
}

.container4 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px 320px 1fr 1fr 1fr;
    gap: 0px 0px; 
  grid-template-areas: 
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 text5 text9 ."
    ". sidebar text1 text6 text10 ."
    ". sidebar text3 text7 text11 ."
    ". sidebar text4 text8 text12 .";
}

.container5 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px 1fr 1fr 1fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar box1 box2 box3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar box7 box8 box9 .";
}

.container6 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px 1fr 1fr 1fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar box1 box1 box2 ."
    ". sidebar box1 box1 box3 ."
    ". sidebar box4 box5 box6 ."
}

.container7 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . ."
    ". logo header header header header header ."
    ". sidebar box1 box1 box1 box2 box2 ."
    ". sidebar box3 box3 box3 box4 box4 ."
    ". sidebar box5 box5 box5 box6 box6 ."
    ". sidebar box7 box7 box7 box8 box8 ."
    ". sidebar box9 box9 box9 box10 box10 ."
    ". sidebar box11 box11 box11 box12 box12 ."
    ". sidebar box13 box13 box13 box14 box14 ."
    ". sidebar box15 box15 box15 box16 box16 ."
    ". sidebar box17 box17 box17 box18 box18 .";
}

.container10 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 100px auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar box1 box2 box3 ."
    ". sidebar img1 img2 img3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar img4 img5 img6 ."
    ". sidebar box7 box8 box9 ."
    ". sidebar box10 box11 box12 ."
    ". sidebar box13 box14 box15 ."
    ". sidebar box18 img13 img14 ."
    ". sidebar box19 box20 box23 .";
}

.container9 {
        display: grid;
        height: auto;
        grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . box1 img1 img1 img2 img2 ."
        ". . box1 box2 box3 box4 box5 ."
        ". . box6 img3 img3 img4 img4 ."
        ". . box6 box7 box7 box8 box8 ."
        ". . box11 img5 img5 img6 img6 ."
        ". . box11 box12 box13 box14 box15 ."
        ". . box16 img7 img7 img8 img8 ."
        ". . box16 box17 box18 box19 box20 ."
        ". . box21 img9 img9 img10 img10 ."
        ". . box21 box22 box23 box24 box25 .";
}

.container8 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: repeat(5, 1fr);
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . box1 box2 box3 box4 box5 ."
    ". . box6 box7 box8 box9 box10 ."
    ". . box11 box12 box13 box14 box15 ."
    ". . box16 box17 box18 box19 box20 ."
    ". . box21 box22 box23 box24 box25 .";
}

.logo { 
    grid-area: logo;
    color: #bebebe;
    background-color: rgb(255, 255, 255); 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 2em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.logo a {
    color: inherit;
    text-decoration: none;
}

/* Subtle "return to top" button */
.scroll-to-top {
    background: transparent;
    border: none;
    color: #bebebe;
    font-size: 36px;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 200ms ease;
}
.scroll-to-top:hover {
    opacity: 1;
}
.scroll-to-top:focus {
    outline: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
}

.sidebar { 
    grid-area: sidebar;
    background-color: #ffffff; /* richer purple for contrast */
    color: #000000;
    padding: 20px;
}

.sidebar nav ul { list-style: none; padding: 0; margin: 8px 0 0 0; }
.sidebar nav li { margin: 6px 0; }
.sidebar nav h2 {
    margin: 0 0 8px 0;
    padding: 6px 8px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar nav a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    /* leave space on the left for the active indicator */
    padding: 6px 8px 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.9);
    background: #8f0cbb; /* dark grey interior */
    position: relative;
}
.sidebar nav a:hover { 
    background: #3a3a3a; 
    color:rgb(255, 255, 255)
}
.sidebar nav a[data-color="in"] { background: rgb(254, 5, 162); }
.sidebar nav a[data-color="introduction"] { background: rgb(56, 118, 29); }
.sidebar nav a[data-color="research"] { background: rgb(103, 78, 167); }
.sidebar nav a[data-color="thematic"] { background: rgb(11, 83, 148); }
.sidebar nav a[data-color="design"] { background: rgb(69, 129, 142); }
.sidebar nav a[data-color="dvc"] { background: rgb(17, 85, 204); }
.sidebar nav a[data-color="comp"] { background: rgb(19, 79, 92); }
.sidebar nav a[data-color="documentation"] { background: rgb(116, 27, 71); }
.sidebar nav a[data-color="technical"] { background: rgb(230, 145, 56); }
.sidebar nav a[data-color="y9dt"] { background: rgba(230, 144, 56); }
.sidebar nav a[data-color="y10dt"] { background: rgba(241, 194, 51); }
.sidebar nav a[data-color="y11dt"] { background: rgba(216, 234, 211); }
.sidebar nav a[data-color="y11dtdt"] { background: rgba(216, 234, 211); }
.sidebar nav a[data-color="y11dtmp"] { background: rgba(216, 234, 211); }
.sidebar nav a[data-color="y12dt"] { background: rgba(164, 194, 244) }
.sidebar nav a[data-color="y13dt"] { background: rgba(142, 124, 195) }
.sidebar nav a[data-color="y10arc"] { background:rgba(241, 194, 51); }
.sidebar nav a[data-color="y11dvc"] { background: rgba(182, 215, 168)}
.sidebar nav a[data-color="y12dvc"] { background: rgba(108, 158, 235); }
.sidebar nav a[data-color="y13dvc"] { background: rgba(103, 78, 166)}


/* Active link highlight: light green background for the current page */
.sidebar nav a.active,
.sidebar nav a[aria-current="page"] {
    background: #f2ff02; /* pale light green */
    color: #053607; /* dark green for contrast */
    border-color: rgba(0,0,0,0.08);
}
.sidebar nav a.active:hover,
.sidebar nav a[aria-current="page"]:hover {
    background: #fe0295;
}

/* left-side bullet / indicator for active link */
.sidebar nav a.active::before,
.sidebar nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 1px; /* sits inside the left padding */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 40%;
    background: #fe0295; /* brighter light-green */
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}

.sidebar nav a.active::after,
.sidebar nav a[aria-current="page"]::after {
    /* subtle outline on the left to increase contrast on pale backgrounds */
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 100%;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 221, 0, 0.08) inset;
    pointer-events: none;
}

.header { 
    grid-area: header;
    background-color: rgb(255, 255, 255);
    padding: 12px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.header > .header-text {
    display: block;
    line-height: 1;
        white-space: nowrap;
        transition: font-size 220ms cubic-bezier(.2,.9,.3,1);
        will-change: font-size;
}

.title {
    grid-area: title;
    background: #ffffff;
    font-family: 'EduSABeginner-VariableFont_wght';
    color: #000000;
    align-items: center;
    justify-content: left;
    display: flex;
    font-size: clamp(1rem, 2vw + 1rem, 2rem); 
}

.img {
    text-align: center;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo > .logo-text,
    .header > .header-text {
        transition: none !important;
        will-change: auto;
    }
}

.box1 { 
    grid-area: box1;
    background-color: rgb(255, 255, 255);
}

.box2 { 
    grid-area: box2;
    background-color: rgb(255, 255, 255);
}

.box3 { 
    grid-area: box3;
    background-color: rgb(255, 255, 255);
}

.box4 { 
    grid-area: box4;
    background-color: rgb(255, 255, 255);
}

.box5 { 
    grid-area: box5;
    background-color: rgb(255, 255, 255);
}

.box6 { 
    grid-area: box6;
    background-color: rgb(255, 255, 255);
}

.box7 { 
    grid-area: box7;
    background-color: rgb(255, 255, 255);
}

.box8 { 
    grid-area: box8;
    background-color: rgb(255, 255, 255);
}

.box9 { 
    grid-area: box9;
    background-color: rgb(255, 255, 255);
}

.box10 { 
    grid-area: box10;
    background-color: rgb(255, 255, 255);
}

.box11 { 
    grid-area: box11;
    background-color: rgb(255, 255, 255);
}

.box12 { 
    grid-area: box12;
    background-color: rgb(255, 255, 255);
}

.box13 { 
    grid-area: box13;
    background-color: rgb(255, 255, 255);
}

.box14 { 
    grid-area: box14;
    background-color: rgb(255, 255, 255);
}

.box15 { 
    grid-area: box15;
    background-color: rgb(255, 255, 255);
}

.box16 { 
    grid-area: box16;
    background-color: rgb(255, 255, 255);
}

.box17 { 
    grid-area: box17;
    background-color: rgb(255, 255, 255);
}

.box18 { 
    grid-area: box18;
    background-color: rgb(255, 255, 255);
}

.box19 { 
    grid-area: box19;
    background-color: rgb(255, 255, 255);
}

.box20 { 
    grid-area: box20;
    background-color: rgb(255, 255, 255);
}

.box21 { 
    grid-area: box21;
    background-color: rgb(255, 255, 255);
}

.box22 { 
    grid-area: box22;
    background-color: rgb(255, 255, 255);
}

.box23 { 
    grid-area: box23;
    background-color: rgb(255, 255, 255);
}

.box24 { 
    grid-area: box24;
    background-color: rgb(255, 255, 255);
}

.box25 { 
    grid-area: box25;
    background-color: rgb(255, 255, 255);
}

.box26 { 
    grid-area: box26;
    background-color: rgb(255, 255, 255);
}

.box27 { 
    grid-area: box27;
    background-color: rgb(255, 255, 255);
}

/** Image boxes **/

.img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10, .img11, .img12, .img13, .img14, .img15, .img16, .img17, .img18, .img19, .img20, .img21, .img22, .img23, .img24, .img25, .img26, .img27 {
    border: 5px solid rgba(255,255,255,0.9);
    box-sizing: border-box;
    min-height: 120px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.img1 { 
    grid-area: img1;
    background-color: rgb(255, 255, 255);
}

.img2 { 
    grid-area: img2;
    background-color: rgb(255, 255, 255);
}

.img3 { 
    grid-area: img3;
    background-color: rgb(255, 255, 255);
}

.img4 { 
    grid-area: img4;
    background-color: rgb(255, 255, 255);
}

.img5 { 
    grid-area: img5;
    background-color: rgb(255, 255, 255);
}

.img6 { 
    grid-area: img6;
    background-color: rgb(255, 255, 255);
}

.img7 { 
    grid-area: img7;
    background-color: rgb(255, 255, 255);
}

.img8 { 
    grid-area: img8;
    background-color: rgb(255, 255, 255);
}

.img9 { 
    grid-area: img9;
    background-color: rgb(255, 255, 255);
}

.img10 { 
    grid-area: img10;
    background-color: rgb(255, 255, 255);
}

.img11 { 
    grid-area: img11;
    background-color: rgb(255, 255, 255);
}

.img12 { 
    grid-area: img12;
    background-color: rgb(255, 255, 255);
}

.img13 { 
    grid-area: img13;
    background-color: rgb(255, 255, 255);
}

.img14 { 
    grid-area: img14;
    background-color: rgb(255, 255, 255);
}

.img15 { 
    grid-area: img15;
    background-color: rgb(255, 255, 255);
}

.img16 { 
    grid-area: img16;
    background-color: rgb(255, 255, 255);
}

.img17 { 
    grid-area: img17;
    background-color: rgb(255, 255, 255);
}

.img18 { 
    grid-area: img18;
    background-color: rgb(255, 255, 255);
}

.img19 { 
    grid-area: img19;
    background-color: rgb(255, 255, 255);
}

.img20 { 
    grid-area: img20;
    background-color: rgb(255, 255, 255);
}

.img21 { 
    grid-area: img21;
    background-color: rgb(255, 255, 255);
}

.img22 { 
    grid-area: img22;
    background-color: rgb(255, 255, 255);
}

.img23 { 
    grid-area: img23;
    background-color: rgb(255, 255, 255);
}

.img24 { 
    grid-area: img24;
    background-color: rgb(255, 255, 255);
}

.img25 { 
    grid-area: img25;
    background-color: rgb(255, 255, 255);
}

.img26 { 
    grid-area: img26;
    background-color: rgb(255, 255, 255);
}

.img27 { 
    grid-area: img27;
    background-color: rgb(255, 255, 255);
}
/* Add thin white borders to boxes for visual separation */
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15, .box16, .box17, .box18, .box19, .box20, .box21, .box22, .box23, .box24, .box25 {
    border: 5px solid rgba(255,255,255,0.9);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 30px;
    line-height: 1;
    text-align: justify;
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.text1 { 
    grid-area: text1; 
    background-color: rgb(255, 255, 255);
    text-align: center;
}

.text1 li {
  height: 25px;      /* Set a fixed height */
  line-height: .5;  /* Reduce space between lines of text within the item */
  margin-bottom: .5;  /* Remove gap below the item */
  margin-left: 30px;
  padding: 0px;        /* Remove internal spacing */
}

.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10, .text11, .text12, h1 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    line-height: .5; 
    font-family: 'EduSABeginner-VariableFont_wght';
    justify-content: center;

}

.text2 { 
    grid-area: text2; 
    background-color: rgb(255, 255, 255);
}

.text3 { 
    grid-area: text3; 
    background-color: rgb(255, 255, 255);
}
.text4 { 
    grid-area: text4; 
    background-color: rgb(255, 255, 255);
}

.text5 { grid-area: text5; 
    background-color: rgb(255, 255, 255);
}

.text6 {
    grid-area: text6; 
    background-color: rgb(255, 255, 255);
}

.text7 { 
    grid-area: text7;
    background-color: rgb(255, 255, 255);
}

.text8 { 
    grid-area: text8;
    background-color: rgb(255, 255, 255);
}

.text9 { 
    grid-area: text9;
    background-color: rgb(255, 255, 255);

}

.text10 { 
    grid-area: text10;
    background-color: rgb(255, 255, 255);

}

.text11 { 
    grid-area: text11;
    background-color: rgb(255, 255, 255);

}

.text12 { 
    grid-area: text12;
    background-color: rgb(255, 255, 255);

}

/* Add consistent padding to text areas and ensure padding doesn't increase layout size */
.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10, .text11, .text12 {
    padding: 14px 18px;
    box-sizing: border-box;
    /* Font size: 12pt ≈ 16px for readable body text */
    font-size: 14pt;
    line-height: 1.5;
    color: #000000;
    /* Justify paragraph text and enable hyphenation for better wrapping */
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* Keep last line left-aligned for readability */
    text-align-last: left;
    -moz-text-align-last: left;
}

/* Add thin white borders to text blocks as well */
.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10, .text11, .text12, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15, .box16, .box17, .box18, .box19 {
    border: 5px solid rgba(255,255,255,0.9);
}

/* Override border for text8 with red left border */
.text1 {
    border-left: 10px solid rgb(255, 230, 0);
    background-color: rgb(248, 240, 161);
}

.text2 {
    border-left: 10px solid rgb(255, 230, 0);
    background-color: rgb(248, 240, 161);
}

.text3 {
    border-left: 10px solid rgb(255, 230, 0);
    background-color: rgb(248, 240, 161);
}

.text4 {
    border-left: 10px solid rgb(255, 230, 0);
    background-color: rgb(248, 240, 161);
}

.text5 {
    border-left: 10px solid rgb(229, 167, 32);
    background-color: rgb(244, 218, 161);
}
.text6 {
    border-left: 10px solid rgb(229, 167, 32);
    background-color: rgb(244, 218, 161);
}

.text7 {
    border-left: 10px solid rgb(229, 167, 32);
    background-color: rgb(244, 218, 161);
}

.text8 {
    border-left: 10px solid rgb(229, 167, 32);
    background-color: rgb(244, 218, 161);
}

.text9 {
    border-left: 10px solid rgb(196, 52, 45);
    background-color: rgb(200, 147, 106);
}

.text9 {
    border-left: 10px solid rgb(196, 52, 45);
    background-color: rgb(200, 147, 106);
}

.text10 {
    grid-area: text10;
    border-left: 10px solid rgb(196, 52, 45);
    background-color: rgb(200, 147, 106);
}

.text11 {
    grid-area: text11;
    border-left: 10px solid rgb(196, 52, 45);
    background-color: rgb(200, 147, 106);
}

.text12 {
    border-left: 10px solid rgb(196, 52, 45);
    background-color: rgb(200, 147, 106);
}
.box2 {
    border-left: 10px solid rgb(229, 167, 32);
    background-color: rgb(244, 218, 161);
}

h1 { 
    margin-top: 0;
    margin-bottom: 0px;
    text-align: center;
    margin-bottom: 0px; /* add space below headings */
    line-height: 1;   /* comfortable line spacing within h2 */
    
}

h2 { 
    font-family: 'EduSABeginner-VariableFont_wght';
    margin-top: 0;
    margin-bottom: 0px; /* add space below headings */
    line-height: 1.5;   /* comfortable line spacing within h2 */
}

p {
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

p2 {
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.2rem;
    padding-top: 10px; 
    display: block;
    margin-top: 10px;
}

li {
    margin-left: 30px;
}

.centered-item {
  align-self: center; /* This specifically centers this single item vertically */
  justify-self: center; /* Use this to center it horizontally as well, if desired */
}

img {
    padding-top: 2%;
}

/* Global figure and figcaption styling */
figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    height: auto;
}

figcaption {
    font-size: 0.9rem;
    text-align: left;
    padding: 8px;
    margin-top: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Grid area assignments for containerprojects layout */
.text1 { grid-area: text1; }
.text2 { grid-area: text2; }
.text3 { grid-area: text3; }
.text4 { grid-area: text4; }
.text5 { grid-area: text5; }
.text6 { grid-area: text6; }
.text7 { grid-area: text7; }
.text8 { grid-area: text8; }
.text9 { grid-area: text9; }
.text10 { grid-area: text10; }
.text11 { grid-area: text11; }
.text12 { grid-area: text12; }

.video1 { grid-area: video1; }
.video2 { grid-area: video2; }
.video3 { grid-area: video3; }
.video4 { grid-area: video4; }
.video5 { grid-area: video5; }
.video6 { grid-area: video6; }
.video7 { grid-area: video7; }
.video8 { grid-area: video8; }
.video9 { grid-area: video9; }
.video10 { grid-area: video10; }
.video11 { grid-area: video11; }
.video12 { grid-area: video12; }

/* Video container styles for embedded YouTube videos */
.video1, .video2, .video3, .video4, .video5, .video6,
.video7, .video8, .video9, .video10, .video11, .video12 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

/* Hide empty video containers */
.video1:empty, .video2:empty, .video3:empty, .video4:empty, 
.video5:empty, .video6:empty, .video7:empty, .video8:empty,
.video9:empty, .video10:empty, .video11:empty, .video12:empty {
    display: none;
}

/* Hide empty text containers */
.text1:empty, .text2:empty, .text3:empty, .text4:empty,
.text5:empty, .text6:empty, .text7:empty, .text8:empty,
.text9:empty, .text10:empty, .text11:empty, .text12:empty {
    display: none;
}

.video1 iframe, .video2 iframe, .video3 iframe, .video4 iframe, 
.video5 iframe, .video6 iframe, .video7 iframe, .video8 iframe,
.video9 iframe, .video10 iframe, .video11 iframe, .video12 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}