/* fonts */
@font-face {
    font-family: 'Ade';
    src: url('/fonts/Ade/Ade-Display.otf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url('/fonts/LibreBaskerville/LibreBaskerville-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Belleza';
    src: url('/fonts/Belleza/Belleza-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Limelight";
    src: url("/fonts/Limelight/Limelight-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Averia";
    src: url("/fonts/Averia/Averia-Bold.ttf");
}
@font-face {
    font-family: "Lemon";
    src: url("/fonts/Lemon/Lemon-Regular.ttf");
}
/* colors */
.bg-dark{background-color: #BF8D4E;}
.bg-light{background-color: #FBE9CE;}
.bg-lighter{background-color: #FDF7ED;}
.bg-white{background-color: #FFFFFF;}
.bg-black{background-color: #3C3530;}
.bg-red{background-color: #E53A40;}
.bg-pink{background-color: #F199BC;}
.bg-orange{background-color: #FC913A;}
.bg-yellow{background-color: #FEEE7D;}
.bg-blue{background-color: #A5DFF9;}
.bg-lakeblue{background-color: #AACFD0;}
.bg-green{background-color: #88DBA3;}
.bg-purple{background-color: #6A60A9;}
:root{
    --base: 14px;
    --root: 14px;
    --gray0: #F8F9FA;
    --gray1: #F1F3F5;
    --gray2: #E9ECEF;
    --gray3: #DEE2E6;
    --gray4: #CED4DA;
    --gray5: #ADB5BD;
    --gray6: #868E96;
    --gray7: #495057;
    --gray8: #343A40;
    --gray9: #212529;
    --red0: #FFF5F5;
    --red1: #FFE3E3;
    --red2: #FFC9C9;
    --red3: #FFA8A8;
    --red4: #FF8787;
    --red5: #FF6B6B;
    --red6: #FA5252;
    --red7: #F03E3E;
    --red8: #E03131;
    --red9: #C92A2A;
    --pink0: #FFF0F6;
    --pink1: #FFDEEB;
    --pink2: #FCC2D7;
    --pink3: #FAA2C1;
    --pink4: #F783AC;
    --pink5: #F06595;
    --pink6: #E64980;
    --pink7: #D6336C;
    --pink8: #C2255C;
    --pink9: #A61E4D;
    --grape0: #F8F0FC;
    --grape1: #F3D9FA;
    --grape2: #EEBEFA;
    --grape3: #E599F7;
    --grape4: #DA77F2;
    --grape5: #CC5DE8;
    --grape6: #BE4BDB;
    --grape7: #AE3EC9;
    --grape8: #9C36B5;
    --grape9: #862E9C;
    --violet: #;
    --violet: #;
    --violet: #;
    --violet3: #B197FC;
    --violet: #;
    --violet: #;
    --violet: #;
    --violet: #;
    --violet: #;
    --violet: #;
    --indigo: #;
    --indigo: #;
    --indigo2: #BAC8FF;
    --indigo3: #91A7FF;
    --indigo: #;
    --indigo: #;
    --indigo: #;
    --indigo: #;
    --indigo: #;
    --indigo: #;
    --blue: #;
    --blue: #;
    --blue: #;
    --blue3: #74C0FC;
    --blue: #;
    --blue: #;
    --blue: #;
    --blue: #;
    --blue: #;
    --blue: #;
    --cyan: #;
    --cyan: #;
    --cyan: #;
    --cyan3: #66D9E8;
    --cyan: #;
    --cyan: #;
    --cyan: #;
    --cyan: #;
    --cyan: #;
    --cyan: #;
    --teal: #;
    --teal: #;
    --teal2: #96F2D7;
    --teal3: #63E6BE;
    --teal: #;
    --teal: #;
    --teal: #;
    --teal: #;
    --teal: #;
    --teal: #;
    --green: #;
    --green: #;
    --green: #;
    --green3: #8CE99A;
    --green: #;
    --green: #;
    --green: #;
    --green: #;
    --green: #;
    --green: #;
    --lime: #;
    --lime: #;
    --lime: #;
    --lime3: #C0EB75;
    --lime: #;
    --lime: #;
    --lime: #;
    --lime: #;
    --lime: #;
    --lime: #;
    --yellow: #;
    --yellow: #;
    --yellow2: #FFEC99;
    --yellow3: #FFE066;
    --yellow: #;
    --yellow: #;
    --yellow: #;
    --yellow: #;
    --yellow: #;
    --yellow: #;
    --orange: #;
    --orange: #;
    --orange2: #FFD8A8;
    --orange3: #FFC078;
    --orange: #;
    --orange: #;
    --orange: #;
    --orange: #;
    --orange: #;
    --orange: #;
    --navy: #;
    --navy: #;
    --navy: #;
    --navy3: #75BBE6;
    --navy: #;
    --navy: #;
    --navy: #;
    --navy: #;
    --navy: #;
    --navy9: #154D71;
    --macaron: #;
    --macaron: #;
    --macaron: #;
    --macaron3: #C8A7C2;
    --macaron: #;
    --macaron: #;
    --macaron: #;
    --macaron: #;
    --macaron: #;
    --macaron9: #640D5F;
    --scallion: #;
    --scallion: #;
    --scallion: #;
    --scallion3: #B8E2AE;
    --scallion: #AFE49B;
    --scallion: #;
    --scallion: #;
    --scallion: #;
    --scallion: #;
    --scallion9: #2CBF06;
}
/* basic settings */
*{
    margin: 0;
    padding: 0;
    border: none;
    /* box-sizing: border-box; */
    font-family: 'LibreBaskerville';
    color: #3C3530;
    scroll-margin-top: calc(70px + 2rem);
}
::selection{
    background-color: #1F696A;
    color: #FFFFFF;
}
html{
    overflow-x: hidden;
    overflow-y: scroll;
    /* scrollbar-width: none; */
    scroll-behavior: smooth;
    font-size: 16px;
}
body{
    width: 100dvw;
    background-color: #FBE9CE;
}
main{
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
}
section{
    width: 100%;
}
section.gap{
    width: 100vw;
    height: 2rem;
}
.sec-main{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    --text-height: calc(100dvh - 70px);
}
body[data-screen="desktop"] .sec-main{
    --text-width: calc(100dvw - 12rem - 25rem);
}
body[data-screen="mobile"] .sec-main{
    --text-width: calc(100dvw - 12rem);
}
#main{
    padding: 1rem 9rem 1rem 3rem;
    width: calc(100dvw - 25rem - 12rem);
    display: flex;
    flex-direction: column;
    gap: 3rem;
    flex-shrink: 0;
}
body[data-screen="mobile"] #main{
    padding: 1rem 3rem;
    width: calc(100% - 6rem);
}
.container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}
p{
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 1.5rem;
}
.emphasis{
    font-weight: bold;
    color: #465A18;
    filter: brightness(1.5);
}
/* width */
.w-full{
    width: 100%;
}
/* height */
/* padding */
/* nav */
nav{
    width: 100vw;
    height: 70px;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: #BF8D4E;
    box-shadow: 0 2px 5px rgb(0, 0, 0, 0.3);
    z-index: 900;
    position: fixed;
    transform: translateY(calc(-100% - 1rem));
    transition: all 0.3s ease;
}
nav.active{
    transform: translateY(0);
}
nav svg{
    width: 2rem;
    display: block;
}
nav .lab, nav .platform{
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
nav span{
    color: #FFFFFF;
    font-family: Belleza;
    font-size: 1.5rem;
    display: block;
}
/* nav .lab{
    background-color: #D4DECA;
} */
span[data-title="h0"]{
    /* width: 100%; */
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 150%;
    display: block;
}
span[data-title="h1"]{
    /* width: 100%; */
    max-width: calc(100% - 13rem);
    text-align: center;
    font-family: Cinzel;
    /* font-size: 2rem; */
    font-size: 2.8rem;
    /* font-size: 2vw; */
    font-weight: bold;
    line-height: 150%;
    display: block;
}
body[data-screen="mobile"] span[data-title="h1"]{
    font-size: 2rem;
}
span[data-title="h2"]{
    /* width: 100%; */
    width: fit-content;
    font-family: EagleLake;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 150%;
    margin-block-start: 1rem;
    margin-block-end: -0.5rem;
    display: block;
}
span[data-title="h3"]{
    /* width: 100%; */
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 150%;
    display: block;
    margin-block-end: -0.75rem;
}
span[data-title="h4"]{
    /* width: 100%; */
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 150%;
    display: block;
}
span[data-title="h5"]{
    /* width: 100%; */
    font-size: 1rem;
    font-weight: bold;
    line-height: 150%;
    display: block;
}
span[data-title="text"]{
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    line-height: 175%;
    text-align: justify;
    display: block;
}
span[text-type="quote"]{
    /* margin-left: 2rem; */
    /* width: calc(100% - 2rem); */
    font-size: 0.9rem;
    line-height: 150%;
    text-align: justify;
    display: block;
}
span[text-type="quote"]::before{
    content: "* ";
    font-size: 0.9rem;
}
span[text-type="equation"]{
    width: 100%;
    line-height: 100%;
    margin: -1rem 0;
}
span[data-texttype="equation"]{
    width: 100%;
    line-height: 100%;
    margin: -1rem 0;
}
span[data-highlight="underline"]{
    background: linear-gradient(to right, #FFD89E, #FFD89E) no-repeat center bottom;
    background-size: calc(100% + 2rem) 40%;
}
span[data-title="h1"][data-highlight="numbered"]{
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 5rem;
    position: relative;
}
span[data-title="h1"][data-highlight="numbered"]::before{
    content: attr(data-prefix);
    font-size: 2rem;
    position: absolute;
    left: 0;
    bottom: 0;
    /* align-self: baseline; */
}
span[data-highlight="starring"]{
    padding: 2rem 0 1rem 3rem;
    align-self: center;
    position: relative;
}
span[data-highlight="starring"]::before{
    content: " ";
    width: 3rem;
    aspect-ratio: 1 / 1;
    border-style: solid;
    border-width: 1rem;
    border-color: #FFD89E;
    border-radius: 50%;
    z-index: 0;
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translate(0, 50%);
}
span[data-title="h1"][data-titlespec="quaint"]{
    color: #465A18;
    align-self: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
    position: relative;
}
span[data-title="h1"][data-titlespec="quaint"] img[data-titleimg="background"]{
    width: calc(100% + 8rem);
    height: calc(100% + 1rem);
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
span[data-title="h1"][data-titlespec="quaint"] img[data-titleimg="leave-left"]{
    width: 7rem;
    position: absolute;
    bottom: -0.5rem;
    left: -6.5rem;
}
span[data-title="h1"][data-titlespec="quaint"] img[data-titleimg="leave-right"]{
    width: 9rem;
    position: absolute;
    top: -2.2rem;
    right: -6rem;
}
*[data-highlight="underline"]{
    background: linear-gradient(to bottom, transparent, transparent calc(100% - var(--highlightThickness)), var(--highlightColor)calc(100% - var(--highlightThickness)));
}
/* highlight */
.highlight{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    opacity: 0;
    transform: translate(0, 50%);
    transition: all 0.7s ease;
}
.highlight.active{
    opacity: 1;
    transform: translate(0, 0);
}
.highlight-card{
    position: relative;
    border-radius: 1rem;
    width: 100%;
    aspect-ratio: 2 / 1;
    background-color: #FDF7ED;
    overflow: hidden;
}
.highlight-card.grid-1-2{
    width: calc((100% - 2rem) / 2);
}
.highlight-card.grid-1-3{
    width: calc((100% - 4rem) / 3);
}
.highlight-card.grid-2-3{
    width: calc((100% - 4rem) / 3 * 2);
}
.highlight-card.grid-1-4{
    width: calc((100% - 6rem) / 4);
}
.highlight-card.grid-3-4{
    width: calc((100% - 6rem) / 4 * 3);
}
.highlight-card-container{
    position: absolute;
    left: 2rem;
    top: 4rem;
    width: calc(50% - 6rem);
    height: calc(100% - 8rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}
.highlight-card-title{
    color: #BF8D4E;
    font-size: 1.5rem;
    line-height: 150%;
}
.highlight-card-bt{
    padding: 1rem;
    height: 1.2rem;
    border-radius: 1.6rem;
    background-color: #BF8D4E;
    cursor: pointer;
    transition: all 0.3s ease;
}
.highlight-card-bt:hover{
    background-color: #FBE9CE;
}
.highlight-card-bt span{
    color: #FDF7ED;
    transition: all 0.3s ease;
}
.highlight-card-bt:hover span{
    color: #BF8D4E;
}
.highlight-card-img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    transform: translate(0, -50%);
    transition: all 2.1s ease;
}
.highlight.active .highlight-card-img{
    max-height: 100rem;
}
.highlight-card-img img{
    display: block;
    width: 75%;
    object-fit: contain;
}
/* edu map */
.edu-map{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* .edu-map-nav{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}
.edu-map-nav-item{
    padding: 1rem;
    height: 1.2rem;
    border-radius: 1.6rem;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.edu-map-nav-item img{
    height: 1.2rem;
    object-fit: contain;
    display: block;
}
.edu-map-nav-item.active{
    background-color: #BF8D4E;
    color: #FDF7ED;
}
.edu-map-nav-item.active span{
    color: #FDF7ED;
    cursor: default;
}
.edu-map-nav-item.active .inactive{
    display: none;
}
.edu-map-nav-item.inactive{
    background-color: #FDF7ED;
    color: #BF8D4E;
    cursor: pointer;
}
.edu-map-nav-item.inactive:hover{
    background-color: #BF8D4E;
    color: #FDF7ED;
}
.edu-map-nav-item.inactive span{
    color: #BF8D4E;
}
.edu-map-nav-item.inactive:hover span{
    color: #FDF7ED;
}
.edu-map-nav-item.inactive .active{
    display: none;
}
.edu-map-nav-item.inactive:hover .inactive{
    display: none;
}
.edu-map-nav-item.inactive:hover .active{
    display: block;
} */
.edu-map-panel{
    width: 100%;
    padding: 2rem 0 0 0;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}
.edu-map-panel-item{
    border: 0.125rem solid #BF8D4E;
    padding: 0.875rem;
    height: 1.5rem;
    border-radius: 1.75rem;
    font-size: 1rem;
    box-shadow: 0 0 0.125rem 0.125rem rgb(0, 0, 0, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-select: none;
    transition: all 0.3s ease;
    /* overflow: hidden; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.edu-map-panel-item[data-active='false']{
    cursor: pointer;
}
.edu-map-panel-item[data-active='false'][data-hovered='false']{
    background-color: #FDF7ED;
    color: #BF8D4E;
    /* gap: 0; */
    gap: 0.75rem;
}
.edu-map-panel-item[data-active='true'], .edu-map-panel-item[data-hovered='true']{
    background-color: #BF8D4E;
    color: #FDF7ED;
    gap: 0.75rem;
}
.edu-map-panel-item-span{
    display: grid;
    transition: all 0.3s ease;
}
.edu-map-panel-item-span span{
    white-space: nowrap;
    min-width: 0;
}
.edu-map-panel-item[data-active='true'] .edu-map-panel-item-span, .edu-map-panel-item[data-hovered='true'] .edu-map-panel-item-span{
    grid-template-columns: 1fr;
    opacity: 1;
}
.edu-map-panel-item[data-active='false'][data-hovered='false'] .edu-map-panel-item-span{
    grid-template-columns: 1fr;
    /* opacity: 0; */
}
.edu-map-panel-item[data-active='true'] span, .edu-map-panel-item[data-hovered='true'] span{
    color: #FDF7ED;
}
.edu-map-panel-item[data-active='false'][data-hovered='false'] span{
    color: #BF8D4E;
}
/* .edu-map-panel-item *{
    transition: all 0.3s ease;
} */
/* .edu-map-panel-item img{
    height: 1.5rem;
    object-fit: contain;
    display: block;
} */
.edu-map-panel-item[data-age]::after{
    content: attr(data-age);
    border: 0.125rem solid #537E33;
    background-color: #D9EACC;
    color: #537E33;
    /* border: 0.125rem solid #909090;
    background-color: #F2EBE1;
    color: #909090; */
    padding: 0.375rem 0.625rem;
    /* background-color: #3C3530;
    color: #FFFFFF;
    padding: 0.5rem 0.75rem; */
    width: max-content;
    height: 1rem;
    font-size: 0.8rem;
    border-radius: 1rem;
    opacity: 0;
    transition: all 0.3s ease;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
}
.edu-map-panel-item[data-hovered='true']::after, .edu-map-panel-item[data-active='true']::after{
    opacity: 1;
}
/* .edu-map-panel-item .inactive, .edu-map-panel-item .active{
    display: none;
} */
/* .edu-map-panel-item[data-hovered='true'] .active, .edu-map-panel-item[data-active='true'] .active, .edu-map-panel-item[data-hovered='false'][data-active='false'] .inactive{
    display: block;
} */
.edu-map-panel-item-age{
    height: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.75rem;
    background-color: #D9D9D9;
    color: #3C3530;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.edu-map-panel-item-age span{
    color: #3C3530 !important;
    font-size: 0.8rem;
}
.edu-map-descriptions{
    border: 0.125rem solid #BF8D4E;
    padding: 1rem 1.5rem;
    width: calc(100% - 3.25rem);
    border-radius: 1rem;
    background-color: #BF8D4E40;
}
.edu-map-description{
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 1rem;
}
.edu-map-description[data-active='true']{
    display: flex;
}
.edu-map-description span{
    width: 100%;
    font-family: Belleza;
    font-size: 1.2rem;
    line-height: 125%;
}
.edu-map-container-main{
    position: relative;
    display: flex;
    /* height: 28rem; */
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 1rem;
    overflow: hidden;
}
.edu-map-multiage-main-container{
    position: relative;
    width: 100%;
    /* height: 28rem; */
    overflow: hidden;
    display: none;
    flex-direction: row;
    justify-content: center;
    /* gap: 2rem; */
    gap: 1rem;
    flex-wrap: wrap;
}
.edu-map-multiage-main-container[data-active='true']{
    display: flex;
}
.edu-map-multiage-main-item{
    background-color: #FDF7ED;
    /* border: 0.125rem solid #BF8D4E; */
    width: calc((var(--text-width) - 2rem) / 3);
    /* width: 21rem; */
    /* height: 28rem; */
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
    /* box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 0, 0.1); */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}
.edu-map-multiage-main-item-tag{
    width: max-content;
    height: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    /* font-family: 'Source'; */
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.edu-map-multiage-main-item-tag[data-colorset='brightgreen']{
    background-color: #E6F8EC;
    color: #3AC569;
}
.edu-map-multiage-main-item-tag[data-colorset='gold']{
    background-color: #FDF4C8;
    color: #F9D423;
}
.edu-map-multiage-main-item-tag[data-colorset='green']{
    background-color: #D6EADF;
    color: #5CAB7D;
}
.edu-map-multiage-main-item-tag[data-colorset='greyblue']{
    background-color: #D3E1F1;
    color: #4F86C6;
}
.edu-map-multiage-main-item-tag[data-colorset='greypink']{
    background-color: #F2DCDC;
    color: #CB7575;
}
.edu-map-multiage-main-item-container{
    width: calc(100% - 4rem);
    height: calc(20% - 4rem);
    padding: 2rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
}
.edu-map-multiage-main-item:hover .edu-map-multiage-main-item-container{
    height: calc(40% - 4rem);
}
.edu-map-multiage-main-item-des{
    width: 100%;
    height: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.edu-map-multiage-main-item-des span{
    font-weight: bold;
    text-align: center;
    /* z-index: 1; */
    /* position: relative; */
}
/* .edu-map-multiage-main-item-des span::after{
    content: '';
    width: 100%;
    height: 0.5rem;
    background-color: #BF8D4E;
    z-index: -1;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0);
} */
.edu-map-multiage-main-item-ext{
    opacity: 0;
    height: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
}
.edu-map-multiage-main-item:hover .edu-map-multiage-main-item-ext{
    opacity: 1;
    height: 4.6rem;
}
.edu-map-multiage-main-item-div{
    width: 60%;
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: #BF8D4E;
    flex-shrink: 0;
}
.edu-map-multiage-main-item-row{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.edu-map-multiage-main-item-date, .edu-map-multiage-main-item-host, .edu-map-multiage-main-item-att, .edu-map-multiage-main-item-loc{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.edu-map-multiage-main-item-loc{
    width: 100%;
    justify-content: center;
}
.edu-map-multiage-main-item-date span, .edu-map-multiage-main-item-host span, .edu-map-multiage-main-item-att span, .edu-map-multiage-main-item-loc span{
    font-size: 0.8rem;
    text-align: justify;
    line-height: 150%;
}
.edu-map-multiage-main-item-date img, .edu-map-multiage-main-item-att img, .edu-map-multiage-main-item-loc img{
    display: block;
    width: 1rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.edu-map-multiage-main-item-title{
    display: block;
    font-size: 1.25rem;
    color: #3C3530;
    line-height: 200%;
}
.edu-map-multiage-main-item-text{
    display: block;
    color: #BF8D4E;
    line-height: 200%;
}
.edu-map-multiage-main-item-img{
    width: 100%;
    height: 80%;
    object-fit: contain;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    /* justify-content: flex-start; */
    justify-content: center;
    align-items: center;
    /* position: relative; */
}
.edu-map-multiage-main-item:hover .edu-map-multiage-main-item-img{
    height: 60%;
}
.edu-map-multiage-main-item-img img{
    display: block;
    height: 100%;
    object-fit: contain;
}
/* .edu-map-multiage-main-item-img-carousel{
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(calc((0.5 - var(--current-item)) / var(--items) * 100%));
} */
.edu-map-multiage-main-item-carousel-controller{
    height: 2.25rem;
    width: 8rem;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%, 0);
}
.edu-map-multiage-main-item-carousel-controller-left, .edu-map-multiage-main-item-carousel-controller-right{
    height: 0.75rem;
    aspect-ratio: 1 / 1;
    padding: 0.75rem;
    border-radius: 0.75rem;
}
.edu-map-multiage-main-item-carousel-controller-left:hover, .edu-map-multiage-main-item-carousel-controller-right:hover{
    background-color: #ECECEC;
}
.edu-map-multiage-main-item-carousel-controller-middle{
    height: 1em;
    aspect-ratio: 3 / 1;
    padding: 0.625rem 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.edu-map-multiage-main-item-carousel-controller-middle span{
    font-size: 0.8rem;
}
.edu-map-multiage-main-item-img-carousel-indicators{
    width: 100%;
    height: 0.75rem;
    opacity: 0.5;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    position: absolute;
    left: 0;
    bottom: 1rem;
}
.edu-map-multiage-main-item-img:hover .edu-map-multiage-main-item-img-carousel-indicators{
    opacity: 1;
}
.edu-map-multiage-main-item-img-carousel-indicator{
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.375rem;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}
.edu-map-multiage-main-item-img-carousel-indicator[data-active='true']{
    background-color: #BF8D4E;
}
.edu-map-multiage-main-control-left, .edu-map-multiage-main-control-right{
    position: absolute;
    top: 50%;
    padding: 1rem;
    width: 1rem;
    height: 1rem;
    background-color: #FDF7ED;
    border-radius: 1.5rem;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transform: translate(0, -50%);
    transition: all 0.3s ease;
}
.edu-map-multiage-main-control-left{
    left: 1rem;
}
.edu-map-multiage-main-control-right{
    right: 1rem;
}
.edu-map-multiage-main-control-left[data-active="true"], .edu-map-multiage-main-control-right[data-active="true"]{
    display: flex;
    cursor: pointer;
}
.edu-map-multiage-main-control-left img, .edu-map-multiage-main-control-right img{
    display: block;
    width: 1rem;
    height: 1rem;
}
.edu-map-container{
    position: relative;
    display: none;
    padding: 2rem;
    height: 32rem;
    width: calc(100% - 4rem);
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 2rem;
    background-color: #FDF7ED;
    overflow: hidden;
}
.edu-map-container.active{
    display: flex;
}
.edu-map-multiage{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.edu-map-multiage-panel{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.edu-map-multiage-panel-item{
    height: 1.5rem;
    padding: 0.75rem;
    border-radius: 1.5rem;
    background-color: #FBE9CE;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
}
.edu-map-multiage-panel-item img{
    display: block;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
}
.edu-map-multiage-panel-item span{
    color: #BF8D4E;
}
.edu-map-multiage-panel-item:hover{
    opacity: 1;
}
.edu-map-multiage-panel-item:hover span{
    display: block;
}
.edu-map-multiage-panel-item.active{
    opacity: 1;
    cursor: default;
}
.edu-map-multiage-container{
    position: relative;
    width: 100%;
    height: 28rem;
    display: none;
    flex-direction: row;
    gap: 2rem;
    overflow: hidden;
}
.edu-map-multiage-container.active{
    display: flex;
}
.edu-map-multiage-item{
    position: relative;
    height: calc(100% - 4px);
    aspect-ratio: 3 / 4;
    border: #FBE9CE 2px solid;
    border-radius: 1rem;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.edu-map-multiage-item-container{
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-end;
    align-items: flex-start;
}
.edu-map-multiage-item-title{
    display: block;
    font-size: 1.25rem;
    color: #3C3530;
    line-height: 200%;
}
.edu-map-multiage-item-text{
    display: block;
    color: #BF8D4E;
    line-height: 200%;
}
.edu-map-multiage-item-img{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    position: absolute;
    width: 160%;
    height: calc(400% / 3);
    border-radius: 50%;
    left: 20%;
    top: 0;
    transform: translate(0, -50%);
    overflow: hidden;
}
.edu-map-multiage-item-img img{
    display: block;
    height: 50%;
    object-fit: contain;
}
.edu-map-multiage-control-left, .edu-map-multiage-control-right{
    position: absolute;
    top: calc(50% + 2rem);
    padding: 1rem;
    width: 1rem;
    height: 1rem;
    background-color: #FBE9CE;
    border-radius: 1.5rem;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transform: translate(0, -50%);
    transition: all 0.3s ease;
}
.edu-map-multiage-control-left{
    left: 1rem;
}
.edu-map-multiage-control-right{
    right: 1rem;
}
.edu-map-multiage-control-left.active, .edu-map-multiage-control-right.active{
    display: flex;
    cursor: pointer;
}
.edu-map-multiage-control-left img, .edu-map-multiage-control-right img{
    display: block;
    width: 1rem;
    height: 1rem;
}
.edu-map-timeline{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.edu-map-timeline-column{
    height: 100%;
    min-width: 1rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.edu-map-timeline-column:hover .edu-map-timeline-cover{
    filter: blur(0.5rem);
}
.edu-map-timeline-column-upper, .edu-map-timeline-column-lower{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 13.7rem;
    padding: 1rem;
}
.edu-map-timeline-read-more-upper, .edu-map-timeline-read-more-lower{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    width: fit-content;
    color: #FFFFFF;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}
.edu-map-timeline-read-more-upper{
    bottom: 7rem;
}
.edu-map-timeline-read-more-lower{
    top: 7rem;
}
.edu-map-timeline-column:hover .edu-map-timeline-read-more-upper, .edu-map-timeline-column:hover .edu-map-timeline-read-more-lower{
    opacity: 1;
}
.edu-map-timeline-cover{
    display: block;
    height: 11rem;
    width: fit-content;
    object-fit: contain;
    border-radius: 0.5rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}
.edu-map-timeline-column-upper{
    justify-content: flex-end;
}
.edu-map-timeline-column-lower{
    justify-content: flex-start;
}
.edu-map-timeline-column-upper.center, .edu-map-timeline-column-lower.center{
    align-items: center;
}
.edu-map-timeline-time{
    display: block;
    width: 20rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}
.edu-map-timeline-description{
    width: 20rem;
    font-size: 0.8rem;
    text-align: justify;
}
.edu-map-timeline-properties{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: left;
    align-items: center;
    width: 20rem;
}
.edu-map-timeline-properties img{
    display: block;
    width: 1rem;
    aspect-ratio: 1 / 1;
}
.edu-map-timeline-properties span{
    display: block;
    font-size: 0.8rem;
    line-height: 150%;
    /* color: #C9C9C9; */
}
.edu-map-timeline-column-div{
    height: 0.6rem;
    background-color: #BF8D4E;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.edu-map-timeline-node-light{
    position: absolute;
    height: 1rem;
    width: 1rem;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
}
.edu-map-timeline-node-dark, .edu-map-timeline-node-red, .edu-map-timeline-node-yellow, .edu-map-timeline-node-blue, .edu-map-timeline-node-green, .edu-map-timeline-node-purple, .edu-map-timeline-node-lakeblue, .edu-map-timeline-node-pink, .edu-map-timeline-node-orange{
    position: absolute;
    height: 0.6rem;
    width: 0.6rem;
    border-style: solid;
    border-width: 0.2rem;
    border-color: #BF8D4E;
    border-radius: 0.5rem;
}
.edu-map-timeline-node-dark{
    background-color: #3C3530;
}
.edu-map-timeline-node-red{
    background-color: #E53A40;
}
.edu-map-timeline-node-pink{
    background-color: #F199BC;
}
.edu-map-timeline-node-orange{
    background-color: #FC913A;
}
.edu-map-timeline-node-yellow{
    background-color: #FEEE7D;
}
.edu-map-timeline-node-blue{
    background-color: #A5DFF9;
}
.edu-map-timeline-node-lakeblue{
    background-color: #AACFD0;
}
.edu-map-timeline-node-green{
    background-color: #88DBA3;
}
.edu-map-timeline-node-purple{
    background-color: #6A60A9;
}
.edu-map-timeline-column-div.head{
    border-radius: 0.3rem 0 0 0.3rem;
}
.edu-map-timeline-column-div.tail{
    border-radius: 0 0.3rem 0.3rem 0;
}
.edu-map-timeline-control{
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.edu-map-timeline-control-bt{
    padding: 1rem;
    width: 1rem;
    aspect-ratio: 1 / 1;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    transition: all 0.3s ease;
}
.edu-map-timeline-control-bt.active{
    opacity: 1;
    cursor: pointer;
}
.edu-map-timeline-control-bt.active:hover{
    background-color: #FBE9CE;
}
.edu-map-timeline-control-bt img{
    display: block;
    width: 1rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.edu-map-timeline-full-bt, .edu-map-gallery-full-bt{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    padding: 0.75rem;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.edu-map-timeline-full-bt:hover, .edu-map-gallery-full-bt:hover{
    background-color: #FBE9CE;
}
.edu-map-timeline-full-bt img, .edu-map-gallery-full-bt img{
    display: block;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.edu-map-gallery{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    transition: all 0.3s ease;
}
.edu-map-gallery-row, .edu-map-gallery-column{
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
    overflow: hidden;
}
.edu-map-gallery-row{
    flex-direction: row;
}
.edu-map-gallery-column{
    flex-direction: column;
}
.edu-map-gallery-row.left, .edu-map-gallery-column.top{
    justify-content: flex-start;
}
.edu-map-gallery-row.horizontal-center, .edu-map-gallery-column.vertical-center{
    justify-content: center;
}
.edu-map-gallery-row.right, .edu-map-gallery-column.bottom{
    justify-content: flex-end;
}
.edu-map-gallery-row.top, .edu-map-gallery-column.left{
    align-items: flex-start;
}
.edu-map-gallery-row.vertical-center, .edu-map-gallery-column.horizontal-center{
    align-items: center;
}
.edu-map-gallery-row.bottom, .edu-map-gallery-column.right{
    align-items: flex-end;
}
.edu-map-gallery-row.grid-1-2{
    height: calc((100% - 1rem) / 2);
}
.edu-map-gallery-row.grid-1-3{
    height: calc((100% - 2rem) / 3);
}
.edu-map-gallery-row.grid-2-3{
    height: calc((100% - 2rem) / 3 * 2 + 1rem);
}
.edu-map-gallery-row.grid-1-4{
    height: calc((100% - 3rem) / 4);
}
.edu-map-gallery-row.grid-3-4{
    height: calc((100% - 3rem) / 4 * 3 + 2rem);
}
.edu-map-gallery-row.grid-1-5{
    height: calc((100% - 4rem) / 5);
}
.edu-map-gallery-row.grid-2-5{
    height: calc((100% - 4rem) / 5 * 2 + 1rem);
}
.edu-map-gallery-row.grid-3-5{
    height: calc((100% - 4rem) / 5 * 3 + 2rem);
}
.edu-map-gallery-row.grid-4-5{
    height: calc((100% - 4rem) / 5 * 4 + 3rem);
}
.edu-map-gallery-column.grid-1-2{
    width: calc((100% - 1rem) / 2);
}
.edu-map-gallery-column.grid-1-3{
    width: calc((100% - 2rem) / 3);
}
.edu-map-gallery-column.grid-2-3{
    width: calc((100% - 2rem) / 3 * 2 + 1rem);
}
.edu-map-gallery-column.grid-1-4{
    width: calc((100% - 3rem) / 4);
}
.edu-map-gallery-column.grid-3-4{
    width: calc((100% - 3rem) / 4 * 3 + 2rem);
}
.edu-map-gallery-column.grid-1-5{
    width: calc((100% - 4rem) / 5);
}
.edu-map-gallery-column.grid-2-5{
    width: calc((100% - 4rem) / 5 * 2 + 1rem);
}
.edu-map-gallery-column.grid-3-5{
    width: calc((100% - 4rem) / 5 * 3 + 2rem);
}
.edu-map-gallery-column.grid-4-5{
    width: calc((100% - 4rem) / 5 * 4 + 3rem);
}
.edu-map-gallery img{
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 1rem;
    transition: all 0.3s ease;
}
.hv-mask-img:hover img{
    filter: blur(0.5rem);
}
.hv-mask-img:hover .edu-map-gallery-mask img{
    filter: none;
}
.edu-map-gallery-mask{
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    border-radius: 1rem;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-start;
    transition: all 0.3s ease;
}
.edu-map-gallery-mask:hover{
    opacity: 1;
}
.edu-map-gallery-properties span{
    color: #FFFFFF;
    font-size: 0.8rem;
}
.edu-map-gallery-description{
    color: #FFFFFF;
    font-weight: bold;
}
.edu-map-gallery-properties{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: left;
    align-items: center;
}
.edu-map-gallery-properties img{
    display: block;
    width: 1rem;
    aspect-ratio: 1 / 1;
}
/* innovation */
.innovation{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.innovation-container{
    padding: 2rem;
    width: calc(100% - 4rem);
    border-radius: 2rem;
    background-color: #FDF7ED;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
}
.innovation-item{
    padding: 1rem 2rem;
    width: calc(100% - 4rem);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}
.innovation-item.grid-1-2{
    width: calc((100% - 2rem) / 2 - 4rem);
}
.innovation-item.grid-1-3{
    width: calc((100% - 4rem) / 3 - 4rem);
}
.innovation-title{
    width: 100%;
    font-size: 1.5rem;
    line-height: 200%;
    font-weight: bold;
    color: #BF8D4E;
    text-align: left;
}
.innovation-description{
    width: 100%;
    line-height: 150%;
    color: #3C3530;
}
.innovation-more{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    height: 1.2rem;
    border-radius: 1.6rem;
    background-color: #BF8D4E;
    cursor: pointer;
    transition: all 0.3s ease;
}
/* .innovation-more:hover{
    background-color: #FBE9CE;
} */
.innovation-more span{
    color: #FFFFFF;
}
.innovation-more img{
    display: block;
    height: 1.2rem;
    aspect-ratio: 1 / 1;
}
.innovation-item-title{
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}
.innovation-item-description{
    width: 100%;
    color: #3C3530;
}
.innovation-item-img{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
}
.innovation-container-v2{
    display: flex;
    flex-direction: row;
    min-width: 100%;
    height: 22rem;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex-shrink: 0;
}
.innovation-item-v2{
    display: flex;
    flex-direction: row;
    height: 20rem;
    aspect-ratio: 15 / 8;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    /* background-color: #3AC569; */
    background: linear-gradient(to right, #3AC569, #3AC569 40%, #FDF7ED 40%);
    box-shadow: 0 2px 5px rgb(0, 0, 0, 0.1);
}
/* multimedia propaganda */
.multimedia{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.multimedia-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.multimedia-card{
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 1rem;
    background-color: #FDF7ED;
    box-shadow: 0 2px 5px rgb(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
.multimedia-card.grid-1-2{
    width: calc(50% - 1rem);
}
.multimedia-card-img{
    height: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.multimedia-card-img img{
    width: 60%;
    aspect-ratio: 1 / 1;
    display: block;
}
.multimedia-card-info{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.multimedia-card-info-upper, .multimedia-card-info-lower{
    width: calc(100% - 3rem);
    height: calc(50% - 3rem);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
}
.multimedia-card-info-upper{
    justify-content: flex-start;
}
.multimedia-card-info-lower{
    justify-content: flex-end;
}
.multimedia-card-info-title{
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 150%;
}
.multimedia-card-info-des{
    line-height: 125%;
    color: #707C81;
}
.multimedia-card-info-data{
    color: #707C81;
}
.multimedia-card-info-data-emp{
    font-size: 1.25rem;
    z-index: 1;
    position: relative;
}
.multimedia-card-info-data-emp::after{
    content: '';
    background-color: #BF8D4E;
    width: 80%;
    height: 0.5rem;
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 25%;
}
.multimedia-card-info-explore{
    padding: 1rem;
    border-radius: 1rem;
    background-color: #BF8D4E;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
}
.multimedia-card-info-explore:hover{
    background-color: #FBE9CE;
    color: #BF8D4E;
    /* filter: brightness(1.1); */
}
/* read next */
.read-next{ 
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.read-next-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.read-next-item{
    background-color: #FDF7ED;
    padding: 1.5rem;
    border-radius: 1.5rem;
    height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.read-next-item.grid-1-5{
    width: calc((100% - 4rem) / 5 - 3rem);
}
.read-next-item-title span{
    display: block;
    font-size: 1.5rem;
    font-weight: bolder;
    color: #BF8D4E;
}
.read-next-item-visit{
    padding: 1rem;
    border-radius: 1rem;
    max-height: 0;
    width: fit-content;
    background-color: #BF8D4E;
    cursor: pointer;
    transition: all 0.3s ease;
}
.read-next-item-visit:hover{
    background-color: #FBE9CE;
}
.read-next-item-visit span{
    display: block;
    font-size: 1rem;
    color: #FBE9CE;
    transform: translate(0, -50%);
    transition: all 0.3s ease;
}
.read-next-item-visit:hover span{
    color: #BF8D4E;
}
/* centralfloating */
.centralfloating{
    width: 100%;
    height: 32rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.centralfloating-center{
    width: fit-content;
    aspect-ratio: 1 / 1;
    padding: 2rem;
    border-radius: 50%;
    background-color: #BF8D4E;
    font-size: 1.5rem;
    color: #FFFFFF;
    z-index: 10;
    text-align: center;
    align-content: center;
}
.centralfloating-item{
    width: fit-content;
    height: 9rem;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.centralfloating[data-active="false"] .centralfloating-item{
    visibility: hidden;
    opacity: 0;
}
.centralfloating[data-active="true"] .centralfloating-item{
    visibility: visible;
    opacity: 1;
}
.centralfloating[data-floatinggrid="2"][data-active="false"] .centralfloating-item[data-grid="1"]{
    left: 50%;
    bottom: 50%;
    transform: translate(0, 50%);
}
.centralfloating[data-floatinggrid="2"][data-active="true"] .centralfloating-item[data-grid="1"]{
    left: calc(50% + 7.5rem);
    bottom: 50%;
    transform: translate(0, 50%);
}
.centralfloating[data-floatinggrid="2"][data-active="false"] .centralfloating-item[data-grid="2"]{
    right: 50%;
    top: 50%;
    transform: translate(0, -50%);
}
.centralfloating[data-floatinggrid="2"][data-active="true"] .centralfloating-item[data-grid="2"]{
    right: calc(50% + 7.5rem);
    top: 50%;
    transform: translate(0, -50%);
}
.centralfloating[data-floatinggrid="4"][data-active="false"] .centralfloating-item[data-grid="1"]{
    left: 50%;
    bottom: 50%;
}
.centralfloating[data-floatinggrid="4"][data-active="true"] .centralfloating-item[data-grid="1"]{
    left: calc(50% + 6rem);
    bottom: calc((50% + 4.5rem));
}
.centralfloating[data-floatinggrid="4"][data-active="false"] .centralfloating-item[data-grid="2"]{
    left: 50%;
    top: 50%;
}
.centralfloating[data-floatinggrid="4"][data-active="true"] .centralfloating-item[data-grid="2"]{
    left: calc(50% + 4.5rem);
    top: calc((50% + 6rem));
}
.centralfloating[data-floatinggrid="4"][data-active="false"] .centralfloating-item[data-grid="3"]{
    right: 50%;
    top: 50%;
}
.centralfloating[data-floatinggrid="4"][data-active="true"] .centralfloating-item[data-grid="3"]{
    right: calc(50% + 6rem);
    top: calc((50% + 4.5rem));
}
.centralfloating[data-floatinggrid="4"][data-active="false"] .centralfloating-item[data-grid="4"]{
    right: 50%;
    bottom: 50%;
}
.centralfloating[data-floatinggrid="4"][data-active="true"] .centralfloating-item[data-grid="4"]{
    right: calc(50% + 4.5rem);
    bottom: calc((50% + 6rem));
}
.centralfloating[data-floatinggrid="5"][data-active="false"] .centralfloating-item[data-grid="1"]{
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 0);
}
.centralfloating[data-floatinggrid="5"][data-active="true"] .centralfloating-item[data-grid="1"]{
    right: 50%;
    bottom: calc((50% + 7.5rem));
    transform: translate(50%, 0);
}
.centralfloating[data-floatinggrid="5"][data-active="false"] .centralfloating-item[data-grid="2"]{
    left: 50%;
    bottom: 50%;
    transform: translate(0, 50%);
}
.centralfloating[data-floatinggrid="5"][data-active="true"] .centralfloating-item[data-grid="2"]{
    left: calc(50% + 6.50rem);
    bottom: calc((50% - 3.75rem));
}
.centralfloating[data-floatinggrid="5"][data-active="false"] .centralfloating-item[data-grid="3"]{
    left: 50%;
    top: 50%;
}
.centralfloating[data-floatinggrid="5"][data-active="true"] .centralfloating-item[data-grid="3"]{
    left: calc(50% + 3.50rem);
    top: calc((50% + 6.50rem));
}
.centralfloating[data-floatinggrid="5"][data-active="false"] .centralfloating-item[data-grid="4"]{
    right: 50%;
    top: 50%;
}
.centralfloating[data-floatinggrid="5"][data-active="true"] .centralfloating-item[data-grid="4"]{
    right: calc(50% + 3.50rem);
    top: calc((50% + 6.50rem));
}
.centralfloating[data-floatinggrid="5"][data-active="false"] .centralfloating-item[data-grid="5"]{
    right: 50%;
    bottom: 50%;
    transform: translate(0, 50%);
}
.centralfloating[data-floatinggrid="5"][data-active="true"] .centralfloating-item[data-grid="5"]{
    right: calc(50% + 6.50rem);
    bottom: calc((50% - 3.75rem));
}
.centralfloating-item-title{
    width: fit-content;
    height: 100%;
    padding: 1rem;
    background-color: #FBE9CE;
    font-size: 1.25rem;
    line-height: 150%;
    color: #BF8D4E;
    align-content: center;
}
.centralfloating-item-text{
    width: fit-content;
    height: 100%;
    padding: 1rem;
    background-color: #FFFFFF;
    font-size: 1rem;
    line-height: 150%;
    align-content: center;
}
/* backdrop */
.backdrop{
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    visibility: hidden;
    opacity: 0;
    z-index: 900;
    cursor: pointer;
    transition: all 0.3s ease;
    position: fixed;
    left: 0;
    top: 0;
}
.backdrop[data-active="true"]{
    visibility: visible;
    opacity: 0.8;
}
/* popup */
.popup{
    visibility: hidden;
    opacity: 0;
    z-index: 910;
    transition: all 0.3s ease;
    position: fixed;
}
.popup[data-active="true"]{
    visibility: visible;
    opacity: 1;
}
.popup[data-popuptype="basic"]{
    /* max-width: 60vw; */
    width: calc(100% - 12rem);
    /* max-height: 90vh; */
    max-height: calc(100% - 12rem);
    height: fit-content;
    padding: 2rem;
    border-radius: 1rem;
    /* background-color: #FDF7ED; */
    background-color: #F8E5C3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.popup[data-popuptype="scrollable-right"]{
    width: 40vw;
    height: calc(100vh - 4rem);
    padding: 2rem 3rem;
    background-color: #FDF7ED;
    left: 100%;
    top: 0;
}
.popup[data-popuptype="scrollable-right"][data-active="true"]{
    transform: translate(-100%, 0);
}
.popup[data-popuptype="scrollable-bottom"]{
    width: 40vw;
    height: 80vh;
    padding: 2rem 3rem;
    background-color: #FDF7ED;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
}
.popup[data-popuptype="scrollable-bottom"][data-active="true"]{
    transform: translate(-50%, -100%);
}
.popup-container{
    width: 100%;
    /* height: 100%; */
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: 2px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}
.popup-container[data-columns="2"]{
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}
.popup-column{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}
.popup-column[data-columnflex="1"]{
    flex: 1;
}
.popup-column[data-columnflex="2"]{
    flex: 2;
}
.popup-column[data-columnflex="3"]{
    flex: 3;
}
.popup-column[data-columnflex="4"]{
    flex: 4;
}
.popup-column[data-columnflex="5"]{
    flex: 5;
}
.popup-column[data-columnflex="6"]{
    flex: 6;
}
.popup-column[data-columnflex="7"]{
    flex: 7;
}
.popup-column[data-columnflex="8"]{
    flex: 8;
}
.popup-column[data-columnflex="9"]{
    flex: 9;
}
.popup-column[data-columnflex="10"]{
    flex: 10;
}
.popup-img{
    width: 100%;
    border-radius: 0.5rem;
    display: block;
}
/* callout */
.callout{
    border-style: solid;
    border-width: 1px;
    border-color: #BF8D4E;
    border-radius: 1rem;
    width: calc(100% - 0.125rem);
    height: fit-content;
    /* background-color: #FFFFFF; */
    overflow: hidden;
}
/* collapsible */
.collapsible{
    --collapsible-color: #BF8D4E;
}
.collapsible[data-collapsetype="plain"]{
    width: 100%;
    overflow: hidden;
    display: grid;
    transition: all 0.3s ease;
}
.collapsible[data-collapsetype="plain"][data-collapsed="true"]{
    grid-template-rows: 0fr;
}
.collapsible[data-collapsetype="plain"][data-collapsed="false"]{
    grid-template-rows: 1fr;
}
.collapsible[data-collapsetype="plain"] .collapsible-contents{
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}
.collapsible[data-collapsetype="basic"]{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.collapsible[data-collapsetype="basic"] .collapsible-contents{
    max-height: 0;
    padding: 0;
}
.collapsible[data-collapsetype="basic"] .collapsible-bt{
    content: attr(data-content);
    background-color: var(--collapsible-color);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
}
.collapsible[data-collapsetype="colored"]{
    width: calc(100% - 0.25rem);
    border-style: solid;
    border-width: 0.125rem;
    border-color: var(--collapsible-color);
    border-radius: 0.5rem;
    overflow: hidden;
}
.collapsible[data-collapsetype="colored"] .collapsible-bt{
    padding: 1rem 2rem;
    width: calc(100% - 4rem);
    /* background-color: #FBFBFB; */
    cursor: pointer;
    transition: all 0.3s ease;
}
.collapsible[data-collapsetype="colored"] .collapsible-bt span{
    transition: all 0.3s ease;
}
.collapsible[data-collapsetype="colored"] .collapsible-bt[data-hovered="true"], .collapsible[data-collapsetype="colored"][data-collapsed="false"] .collapsible-bt{
    background-color: var(--collapsible-color);
    color: #FFFFFF !important;
}
.collapsible[data-collapsetype="colored"] .collapsible-bt[data-hovered="true"] span, .collapsible[data-collapsetype="colored"][data-collapsed="false"] .collapsible-bt span{
    color: #FFFFFF !important;
}
.collapsible[data-collapsetype="colored"] .collapsible-bt span[data-title="h1"]{
    font-size: 1.2rem !important;
}
.collapsible[data-collapsetype="colored"] .collapsible-contents{
    width: 100%;
    overflow: hidden;
    scrollbar-width: none;
    transition: all 0.3s ease;
    display: grid;
    /* display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; */
}
.collapsible[data-collapsetype="colored"][data-collapsed="true"] .collapsible-contents{
    /* max-height: 0; */
    grid-template-rows: 0fr;
}
.collapsible[data-collapsetype="colored"][data-collapsed="false"] .collapsible-contents{
    /* max-height: 99rem; */
    grid-template-rows: 1fr;
}
.collapsible[data-collapsetype="colored"] .collapsible-contents-container{
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}
.collapsible[data-collapsetype="colored"][data-collapsed="false"] .collapsible-contents-container{
    padding: 1rem 2rem;
    /* height: fit-content; */
}
.collapsible[data-collapsetype="colored"][data-collapsed="true"] .collapsible-contents-container{
    padding: 0 2rem;
    /* height: fit-content; */
}
.collapsible[data-collapsetype="colored"] .collapsible-contents ol{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}
.collapsible[data-collapsetype="colored"] .collapsible-contents li{
    margin-left: 1rem;
}
/* gradient-render */
.gradient-render{
    margin-top: 1rem;
    margin-bottom: 5rem;
    max-width: calc(100% - 4rem);
    width: 50rem;
    height: 2rem;
    align-self: center;
    position: relative;
}
.gradient-render-tip{
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.gradient-render-container{
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, #B5F6F5, #34B4C2 50%, #464FAE); */
    background: linear-gradient(to right, #B7F1F0, #095958);
}
.gradient-render-label{
    position: absolute;
    bottom: -4.5rem;
    transform: translate(-50%, 0);
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="0"]{
    left: 0;
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="1"]{
    left: 20%;
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="2"]{
    left: 40%;
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="3"]{
    left: 60%;
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="4"]{
    left: 80%;
}
.gradient-render-label[data-gradient-grids="5"][data-gradient-grid="5"]{
    left: 100%;
}
.gradient-render-description{
    line-height: 150%;
    width: 26rem;
    padding: 1rem;
    background-color: #ECFBFB;
    border-radius: 0.5rem;
    border-style: solid;
    border-color: #D9D9D9;
    border-width: 0.25rem;
    z-index: 20;
    display: none;
    position: absolute;
    /* top: 1rem;
    transform: translate(0, -50%); */
    bottom: -0.5rem;
    transform: translate(-50%, 0);
}
.gradient-render-description[data-active="true"]{
    display: block;
}
/* carousel */

/* footer */
footer{
    width: 76rem;
    max-width: calc(100dvw - 4rem);
    margin: 1rem auto;
    padding: 2rem;
    display: flex;
    flex-direction: row;
    row-gap: 0.5rem;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
}
body[data-screen="mobile"] footer{
    flex-direction: column;
}
.footer-outer{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.footer-logos{
    width: 46rem;
    max-width: calc((100dvw - 4rem) * 0.984 - 4rem);
    padding: 2rem 2rem 3rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.footer-inner{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.footer-contact{
    width: 24rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 1rem;
}
body[data-screen="mobile"] .footer-contact{
    width: fit-content;
    margin: 0 auto;
}
.footer-email, .footer-tel{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}
.footer-email div, .footer-tel div{
    padding: 0.5rem;
    position: relative;
}
.footer-email div img, .footer-tel div img{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.footer-email div a{
    font-family: CarterOne;
    font-size: 1.25rem;
    color: #FBE9CE;
    text-decoration: none;
}
.footer-tel div span{
    font-family: CarterOne;
    font-size: 1.25rem;
    color: #FBE9CE;
}
.footer-licence, .footer-licence *, .footer-gitlab, .footer-gitlab *{
    width: 100%;
    text-align: center;
    font-family: MontserratAlternates;
    font-weight: bold;
    color: #FBE9CE;
    transition: all 0.3s ease;
}
.footer-licence a:hover, .footer-gitlab a:hover{
    filter: brightness(1.2);
}
.footer-bg{
    width: 100%;
    height: max-content;
    z-index: -1;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
}
.footer-bg-img{
    width: 100%;
}
.footer-bg-ext{
    width: 100%;
    height: max-content;
    background-color: #DCA854;
}
.footer-container{
    padding: 6rem 2rem 2rem 2rem;
    width: calc(100% - 4rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.footer-logo{
    width: 15%;
    margin-left: 12.5%;
    transform: translate(-50%, 0);
}
.footer-teamtit{
    padding: 2rem;
    margin-left: 12.5%;
    border-radius: 2rem;
    width: max-content;
    height: max-content;
    background-color: #BF8D4E;
    transform: translate(-50%, 0);
}
.footer-teamtit span{
    font-size: 2rem;
    color: #FBE9CE;
}
.footer-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: flex-end;
}
.footer-info-left, .footer-info-right{
    width: calc(60% - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.footer-info-left{
    width: calc(60% - 1rem);
}
.footer-info-right{
    width: calc(40% - 1rem);
}
/* vspace, hspace */
*[data-vspace="1rem"]{
    width: 100%;
    height: 1rem;
}
*[data-vspace="2rem"]{
    width: 100%;
    height: 2rem;
}
*[data-vspace="4rem"]{
    width: 100%;
    height: 4rem;
}
/* table */
.table-wrapper{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.table-title{
    width: 100%;
    font-size: 1.2rem;
    font-family: Belleza;
    text-align: center;
    display: block;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}
.table-title::before{
    content: 'Table ' attr(data-tablenum) ': ';
    font-weight: bold;
}
.table-container{
    max-width: 100%;
    width: fit-content;
    overflow-x: auto;
    overflow-y: hidden;
}
table{
    border-style: solid;
    border-width: 4px 0;
    border-color: #C1814C;
    border-spacing: 0;
    border-collapse: collapse;
}
thead{
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #C1814C;
    background-color: #F6CA9E;
}
/* thead tr{
    position: sticky;
    top: 86px;
} */
td, td *{
    font-family: Belleza;
    /* font-weight: bold; */
    font-size: 1.2rem !important;
    text-align: justify;
}
thead th{
    background-color: #F6CA9E;
    z-index: 10;
    font-family: Belleza;
    font-weight: bold;
    font-size: 1.2rem;
    white-space: nowrap;
}
tbody tr:nth-child(odd){
    background-color: #F5DEC8;
}
tbody tr:nth-child(odd) td{
    background-color: #F5DEC8;
}
tbody tr:nth-child(even){
    background-color: #FDF7ED;
}
tbody tr:nth-child(even) td{
    /* background-color: #FDF7ED; */
    background-color: #F9EBE0;
}
th, td{
    padding: 0.5rem 1rem;
}
td[data-textalign="justify"]{
    text-align: justify !important;
}
td[data-textalign="left"]{
    text-align: left !important;
}
td[data-textalign="center"]{
    text-align: center !important;
}
td[data-textalign="right"]{
    text-align: right !important;
}
/* th[data-headercolumn="true"], td[data-headercolumn="true"], td[data-headercolumn="odd"], td[data-headercolumn="even"]{
    position: sticky;
    left: 0;
} */
/* th[data-headercolumn="true"]{
    z-index: 20;
} */
td[data-headercolumn="odd"], td[data-headercolumn="even"], td[data-headercolumn="true"]{
    /* z-index: 10; */
    font-family: Belleza;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}
td.headercolumn-odd, td.headercolumn-even{
    font-family: Belleza;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}
td.headercolumn-odd{
    background-color: #E6BE98 !important;
}
td.headercolumn-even{
    background-color: #EBCAAA !important;
}
/* img */
.img-wrapper{
    width: 100%;
    max-height: 100%;
    height: fit-content;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img-wrapper[data-wrapperdirection="horizontal"]{
    overflow-x: auto;
    flex-direction: row !important;
    gap: 1rem;
    align-items: flex-end;
}
.img-wrapper[data-wrapperdirection="horizontal"] .img-wrapper{
    width: auto;
    flex: 1;
}
.img-wrapper[data-wrapperdirection="horizontal"] .img-title{
    white-space: nowrap;
}
.img-title, .img-title *{
    max-width: 100%;
    font-family: Belleza;
    font-size: 1.2rem;
    text-align: center;
    /* display: block; */
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}
.img-title::before{
    content: 'Figure ' attr(data-figurenum) ': ';
    font-weight: bold;
}
.img-wrapper img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.75rem;
    display: block;
}
.img-wrapper svg{
    max-width: 100%;
}
.img-wrapper img[data-imgratio="43"]{
    aspect-ratio: 4 / 3;
}
/* pdf-wrapper */
.pdf-wrapper{
    width: 100%;
    max-height: 100%;
    height: fit-content;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.pdf-wrapper iframe{
    height: calc(100dvh - 70px - 3rem);
    width: 100%;
    /* aspect-ratio: 5 / 7; */
}
.pdf-title{
    width: 100%;
    font-family: Belleza;
    font-size: 1.2rem;
    text-align: center;
    display: block;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}
/* multi-columns */
.multicolumns{
    width: 100%;
    display: flex;
    flex-direction: row;
    /* gap: 1rem; */
}
.multicolumns[data-columngap="0"]{
    gap: 0;
}
.multicolumns[data-columngap="1"]{
    gap: 1rem;
}
.multicolumns[data-columngap="1.5"]{
    gap: 1.5rem;
}
.multicolumns[data-columngap="2"]{
    gap: 2rem;
}
.multicolumns[data-columngap="3"]{
    gap: 3rem;
}
.multicolumns{
    gap: var(--gap);
}
.multicolumns[data-vertical-align-center]{
    align-items: center;
}
body[data-screen="mobile"] .multicolumns{
    flex-direction: column !important;
    gap: 1rem !important;
}
.multicolumn{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.multicolumns[data-compact] .multicolumn{
    gap: 0.5rem;
}
.multicolumn[data-columnflex="1"]{
    flex: 1;
}
.multicolumn[data-columnflex="2"]{
    flex: 2;
}
.multicolumn[data-columnflex="3"]{
    flex: 3;
}
.multicolumn{
    flex: var(--flex);
}
/* list */
.ul{
    margin-left: 2rem;
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ol{
    margin-left: 2rem;
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.li{
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
}
.ol li::marker{
    content: counter(list-item) "   ";
    /* font-family: 'NotoSans'; */
    font-weight: bold;
    color: #465A18;
    /* font-size: 0.8rem; */
}
.li-emphasis{
    color: #465A18 !important;
    font-weight: bold !important;
}
/* svg */
svg g[data-type="item"]{
    transition: all 0.3s ease;
}
svg[data-active="false"] g[data-type="item"]{
    opacity: 0;
    visibility: hidden;
}
svg[data-centralfloating="2"][data-active="true"] g:nth-child(1 of [data-type="item"]){
    transform: translate(20px, 0);
}
svg[data-centralfloating="2"][data-active="true"] g:nth-child(2 of [data-type="item"]){
    transform: translate(-20px, 0);
}
svg[data-centralfloating="4"][data-active="true"] g:nth-child(1 of [data-type="item"]){
    transform: translate(20px, -20px);
}
svg[data-centralfloating="4"][data-active="true"] g:nth-child(2 of [data-type="item"]){
    transform: translate(20px, 20px);
}
svg[data-centralfloating="4"][data-active="true"] g:nth-child(3 of [data-type="item"]){
    transform: translate(-20px, 20px);
}
svg[data-centralfloating="4"][data-active="true"] g:nth-child(4 of [data-type="item"]){
    transform: translate(-20px, -20px);
}
svg[data-centralfloating="5"][data-active="true"] g:nth-child(2 of [data-type="item"]){
    transition: all 0.3s ease 0.2s;
}
svg[data-centralfloating="5"][data-active="true"] g:nth-child(3 of [data-type="item"]){
    transition: all 0.3s ease 0.5s;
}
svg[data-centralfloating="5"][data-active="true"] g:nth-child(4 of [data-type="item"]){
    transition: all 0.3s ease 0.8s;
}
svg[data-centralfloating="5"][data-active="true"] g:nth-child(5 of [data-type="item"]){
    transition: all 0.3s ease 1.1s;
}
/* button */
.tryit{
    width: fit-content;
    padding: 0.5rem 0.75rem;
    /* border: 0.125rem solid #BF8D4E; */
    background-color: #BF8D4E;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.25rem 0.125rem rgb(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    color: #FDF7ED;
    font-weight: bold;
    line-height: normal;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -ms-touch-select: none;
    -webkit-user-select: none;
    display: inline-block;
}
.tryit:hover{
    transform: translateY(-0.25rem);
    filter: brightness(1.05);
}
/* math */
/* math, math *, mjx-container *{
    font-family: 'texZero', 'texMain' !important;
} */
.to-top{
    width: 4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: fixed;
    right: 0rem;
    bottom: 5.5rem;
}
.to-top:hover{
    filter: brightness(1.1);
    transform: translateY(-1rem);
}
.to-top img{
    width: 100%;
    display: block;
}
.medal-icon{
    height: 1.25rem;
    display: block;
    justify-self: anchor-center;
}