@font-face {
        font-family: ARJULIAN;
        src: url('../fonts/ARJULIAN.ttf');
    }
    @font-face {
        font-family: RobotoMono;
        src: url('../fonts/RobotoMono.ttf');
    }
   
    /*======================== general style ===============================*/


    html, body { 
        min-height: 100vh;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #f7faf9ff;
        display: flex;
        flex-direction: column;
    }

    header {
        width: 100%;
        background-color: #003c3bff;
        padding: 20px;
    }

    h1,h2,h3,h4{
        font-family: ARJULIAN;
        color: #003c3bff;
        margin: 10px;
    }

    p {
        padding: 10px;
    }

    p, li, i{
        font-family: RobotoMono;
        font-size: small;
        text-align: left;
        color: #003c3bff;
    }

    p > a {
        background-color: #003c3bff;
        border-radius: 10px;
        padding-left: 4px;
        padding-right: 4px;
    }

    hr.solid {
        border-top: 3px solid #003c3bff;
    }

    button{
        background-color: #003c3bff;
        color: #f7faf9ff;
        font-weight: bold;
        font-family: RobotoMono;
        border-radius: 20px;
        border: none;
        width: 80%;
        margin: auto;
        margin-bottom: 10px;
        padding: 8px;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    button:hover{
        color: #f2cdcdff;
    }

    .div-paragraph{
        border-radius: 10px; 
        padding: 10px; 
        margin-top: 10px;
        height: fit-content;

    }
    
    /*======================== Header style ===============================*/
   
    .div-header{
        font-family: ARJULIAN;
        font-size: 20pt;
        color: #f7faf9ff;
        text-decoration: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    
    /* Tooltip container */
    .tooltip {
        cursor: pointer;
        padding: 20px;
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        font-family: RobotoMono;
        font-size: 10pt;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
    
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }
    
    .tooltip:hover #demo{
        animation: stop 0.5s ease-in-out;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    /*
    .banner{
        background-color: #003c3bff;
        display: flex;
        padding: 10px;
    }

    .banner div{ 
        background-color: #003c3bff;
        width: 100%;
    }

    .banner-options{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 20%;
        font-family: RobotoMono;
        font-weight: bold;
        color: #f7faf9ff;
    }
    */
  

    /*======================== Footer style ===============================*/
    
    footer{
        display: flex;
        flex-wrap: wrap;
        min-height: 100vh;
        min-width: 100%;
        background-color: #003c3bff;
        bottom: 0;
    }

    .div-section-item-footer{
        flex: 1;
        margin: 20px;
        color: #f2f2f2;
        transition: background-color 0.4s ease;
    }
    .div-section-item-footer > p{
        color: #f7faf9ff;
        text-align: justify;
        font-size: small;
    }
    .div-section-item-footer > h4{
        color: #f7faf9ff;
        padding: 0;
        text-align: left;
    }

    .footer-shade{
        height: 15%;
        width: 100%;
        background-image: linear-gradient(rgba(0,0,0,0), rgb(0, 60, 59));
    }


    /*======================== Avant-propos ===============================*/
    

    #avant-propos > p {
        text-align: justify;
    }



    /*======================== Loading style ===============================*/
   
    #loader {
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100vh;
        background-color: #f7faf9ff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }



    #loader.hidden {
        animation: fadeOut 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
    }

    #loader-logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 20px;
        width: 50%;
    }


    

    /*======================== Logo style ===============================*/


    .logo-full{
        display: grid;
        max-width: 70%;
        max-height: 70vh;
        margin: auto;
    }
    
    .logo-small{
        width: 100px; height: 100px; padding: 10px;
    }





    /*======================== Decorative shadows style ===============================*/


    .shade-top{
        height: 20px;
        width: 100%;
        position: fixed;
        top: 0;
        background-image: linear-gradient(rgb(0, 60, 59), rgba(0,0,0,0));
    }
    
    .shade-bottom{
        height: 20px;
        width: 100%;
        position: fixed;
        bottom: -1px;
        background-image: linear-gradient(360deg, rgb(0, 60, 59), rgba(0,0,0,0));
    }

    .shade-div{
        background-color: #a9a9a93b;
        height: 10px;
    }


    /*======================== link style ===============================*/

    a {
        text-decoration: none;
        color: #f7faf9ff;
        transition: color 0.3s ease;
        width: 100%;

    }

    a:visited {
        color: #f7faf9ff;
    }

    a:active {
        color: #f7faf9ff;
    }

    a:hover {
        color: #f2cdcdff;
    }

    /*======================== Scrollbar style ===============================*/
   
    ::-webkit-scrollbar {
        width: 0;  /* Remove scrollbar space */
        background: transparent;  /* Optional: just make scrollbar invisible */
    }
    

    /*======================== Section block style ===============================*/

    .div-title{
        /*font setup*/
        font-weight: bold;
        color: #f7faf9ff;
        margin: 0;
        padding: 10px;
    }

    .div-title > a{
        border-radius: 10px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .div-title > div > a{
        border-radius: 10px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .div-section-col{
        max-width: 60%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        border-radius: 10px;
    }

    .div-section-row{
        width: 80%;
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        transition: background-color 0.4s ease;
    }

    .div-section-item{
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        color: #003c3bff;
        transition: width 1s ease;
        width: 90%;
    }

    .div-section-item:hover{
        width: 100%;
    }

    .div-section-item > p{
        padding: 10px;
    }

    .div-section-item-header{
        display: flex;
        flex-direction: column;
        color: #003c3bff;
        text-align: left;
        margin: 20px;
        width: 100%;
    }

    .div-separator{
        height: 5px;
        width: 80%;
        margin: auto;
        margin-top:5%;
        background-color: #003c3bff;
        border-radius: 30px;
    }



    /*======================== demo.html style ===============================*/


    .div-song-container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 10px;
        color: #003c3bff;
        background-color: #f2f2f2;

        margin: auto; 
        margin-top: 40px;
    }

    .div-song{
        border-radius:12px; 
        padding-top: 20px; 
        padding-bottom: 20px; 
        width: 90%;
        margin: auto;
    }


    /*======================== affiliation.html style ===============================*/


    #intro{
        color: #003c3bff;
        text-align: left;
        margin: auto;
        padding: 50px;
        display: flex;
        width: 80%;
        overflow-x: auto;
    }

    #intro th{
        padding:20px;
        padding-top: 0;
        padding-bottom: 0;
        border-left: 2px solid #003c3bff;
    }

    #intro div{
        height: 100px;
    }

    .vertical-divider{
        padding: 0px;
        margin: 0px;
        border: 1px solid #003c3bff;
        height: 100px;
    }




    
    
    /*======================== event.html style ===============================*/
   
    #event-images{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    #event-images >  div{
        margin: 10px;
        flex: 1;
    }

    #event-images >  div > img{
        object-fit: cover;
        min-width: 100%;
        min-height: 100%;
    }

    table{
        font-family: RobotoMono;
        width: 100%;
        text-align: left;
    }

    td{
        color: #003c3bff;
        padding: 5px;
    }

    #table-none-selectable-row{
        background-color: #f2f2f2;
    }

    .table-header{
        padding: 5px;
        background-color: #003c3bff;
        color: #f7faf9ff;
    }
    
    .table-data{
        display: flex;
    }
    
    .table-div{
        width: 90%;
    }

    .table-justify{
        text-align: center;
    }

    #table-selectable-row{
        cursor: pointer;
        color: #003c3bff;
        background-color: #f2f2f2;
        transition: background-color 0.1s ease;
        .triangle{
            margin: auto;
            rotate: 0deg;
            transition: rotate 0.4s ease;
        }
    }

    #table-selectable-row:hover {
        background-color: #a9a9a9;
        .triangle{
            rotate: 90deg;
        }
    }

    .triangle {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 20px solid #003c3bff;
        margin-left: auto;
        width: 1px;
        height: 1px;
        rotate: 0deg;
        transition: rotate 0.4s ease;
    }   
    
    
     .option {                      /*https://stackoverflow.com/questions/14387690/how-can-i-show-only-corner-borders*/
        --b: 2px;                   /* thickness of the border */
        --c: #f7faf9ff;           /* color of the border */
        --w: 10px;                  /* width of border */
        

        border: var(--b) solid #0000; /* space for the border */
        --_g: #0000 90deg,var(--c) 0;
        --_p: var(--w) var(--w) border-box no-repeat;
        background:
            conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
            conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
            conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
            conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
        
        text-align: center;
        padding: 10px;
        margin: 10px;
        width: 150px;
        transition: width 0.2s ease-in-out;

    }

    .option:hover{
        width: 80%;
    }













  /*======================== Animation style ===============================*/

    /*https://stackoverflow.com/questions/28978387/ease-in-animation-once-then-linear*/
    .rotate{
        animation: spinner 2s ease-in-out, spinner 3s linear 5s infinite;
    }

    @keyframes spinner {
        to { transform: rotate(360deg); }
    }
    
    @keyframes stop {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }


 
    @keyframes fadeOut {
        100% {
            opacity: 0%;
            visibility: hidden;
        }
    }