:root {
    --inav-columns: repeat(5, 1fr);
    --inav-rows: repeat(2, 1fr);
    --inavli-height: 15vw;
    --article-minwidth: 300px;
    --article-height: clamp(185px, 13vw, 650px);
}

@media screen and (max-width: 875px) {
    :root {
        --inav-columns: repeat(2, 1fr);
        --inav-rows: repeat(4, 1fr);
        --inavli-height: clamp(150px, 46vw, 175px);
        --article-minwidth: calc(240px + 15vw);
    }
}

@media screen and (min-width: 2500px) {
    :root {
        --inavli-height: 13vw;
    }
}

main-navbar,
main-navopen {
    width: 100vw;
    position: fixed !important;
}

main-navbar {
    display: none;
}

/* video */
#edudentLogoVideo {
    width: calc(200px + 15vw);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 7;
    filter: brightness(0) invert(1);
}

#ivideo {
    width: 100%;
    height: clamp(500px, 100vh, 2500px);
    position: relative;
    z-index: 6;
    overflow: hidden;
}

video {
    position: absolute;
    box-sizing: border-box;
    object-fit: cover;
    filter: brightness(0.95);
}

svg {
    width: calc(100% + 1vw);
    height: auto;
    position: absolute;
    margin: auto;
    left: -1vw;
    bottom: 0;
    right: 0;
    fill: white;
}

/* itext */
#itext h1 {
    margin-bottom: calc(var(--mp) * 1.5);
}

.container {
    width: calc(var(--container-width) * 0.9);
}

#itext {
    min-height: 60vh;
    padding-bottom: calc(var(--mp) * 2);
}

h1>span {
    position: relative;
    left: -50px;
    opacity: 0;
    animation: appear-left linear forwards;
    animation-timeline: view();
    animation-range-start: entry;
    animation-range-end: 250px;
}

#itext>div {
    /* animation */
    position: relative;
    bottom: -20px;
    opacity: 0.7;
    animation: appear-bottom linear forwards;
    animation-timeline: view();
    animation-range-start: entry;
    animation-range-end: 150px;
}

/* inav */
#inav h2,
#inav i {
    font-size: calc(var(--h2-fontsize) * 0.9);

    /* animation */
    position: relative;
    bottom: -20px;
    opacity: 0.7;
    animation: appear-bottom linear forwards;
    animation-timeline: view();
    animation-range-start: entry;
    animation-range-end: 150px;
}

#inav ul {
    display: grid;
    grid-template-columns: var(--inav-columns);
    grid-template-rows: var(--inav-rows);
}

#inav ul li {
    height: var(--inavli-height);
}

.inavimg {
    overflow: hidden;
}

.inavimg img {
    transition: scale 1s;
}

.inavtext {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inavtext a {
    display: flex;
    transition: scale 1s;
}

#inav h2 {
    margin-left: var(--mp5);
}

#inav li:nth-child(2) {
    background-color: #4ecbe7;
}

#inav li:nth-child(4) {
    background-color: #1389dc;
}

#inav li:nth-child(6),
#inav li:last-child {
    background-color: var(--color1);
}

#inav li:nth-child(8) {
    background-color: #417ba4;
}

/* ievents */
#ievents {
    min-height: 50vh;
}

#ievents>div>h2 {
    width: fit-content;
    margin: auto;
}

#carousel-container {
    margin-top: calc(22px + 1vw);
    margin-bottom: 0;
    overflow: hidden;
}

#carousel {
    position: relative;
    height: calc(var(--article-height) * 1.2);
}

#ievents article {
    min-width: var(--article-minwidth);
    width: 21vw;
    height: var(--article-height);
    position: absolute;
    margin: var(--mp1);

    box-shadow: var(--boxshadow) var(--color1);
    overflow: hidden;
}

#ievents article h2 {
    font-size: calc(var(--h2-fontsize) * 0.85);
}

#ievents article h3 {
    font-size: calc(var(--h3-fontsize) * 0.92);
}

.eventTitle,
#ievents article div:nth-child(3) {
    width: 98%;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    padding: var(--mp4);
    text-align: left;
}

.eventTitle {
    top: 0;
}

#ievents article div:nth-child(3) {
    font-size: var(--p-fontsize);
    bottom: 0;
}

/* responsive */
@media screen and (max-width: 975px) {
    main-navbar {
        display: block;
        visibility: hidden;
        position: fixed !important;
        z-index: 10 !important;
    }
}

@media screen and (max-width: 875px) {
    #itext h1 {
        margin-bottom: var(--mp7);
    }

    #itext {
        padding-bottom: var(--mp);
    }

    #inav li:first-child {
        grid-row-start: 1;
        grid-column-start: 1;
    }

    #inav li:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;
    }

    #inav li:nth-child(6) {
        grid-row-start: 1;
        grid-column-start: 2;
    }

    #inav li:nth-child(7) {
        grid-row-start: 2;
        grid-column-start: 2;
    }

    #inav li:nth-child(8) {
        grid-row-start: 3;
        grid-column-start: 2;
    }

    #inav li:nth-child(9) {
        grid-row-start: 4;
        grid-column-start: 2;
    }

    #inav h2,
    #inav i {
        font-size: var(--h2-fontsize);
    }

    #carousel>p{
      width: calc(var(--container-width) * 0.9)!important;
      text-align: center;
      margin: auto;
    }
}