/* 
@import "./vars";
@import "./keyframes";
@import "./mixins";
@import "./header";
@import "./index"; 
@import "./semester_pages";  */

:root {
--white: white;
--color1: #c3c3c3;
--color2: #40e0d0;
--color3: #288f85;
--color4: #a1e2ff;
--font1: "Montserrat", sans-serif;
--br: 24px;

--margin-m: 100px;
--margin-s: 50px;
--margin-xs: 20px;
}
html{
    scroll-behavior: smooth !important;
}
*{
    margin: 0;
    padding: 0;
    font-family: var(--font1);
    box-sizing: border-box;
}

/*  Basic vars */
/*  */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--color3); }
}
@font-face {
    font-family: 'Divani';
    src: url('./../fonts/Divani-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
md#output{
    display: block;
    background-color: white;
}
.main_grid{
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 1240px) minmax(1em, 1fr);
    display: grid;
}
.buttons{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
    list-style-type: none;
}
.text_accent{
    color: var(--color3);
    font-weight: bold;
}
.buttons + p{
    margin-top: 15px;
}
h1{
    font-size: 28px;
}
p + h3, ul + h3, ol + h3, .buttons + h3, h2 + h3 {
    margin-top: 15px;  
}
p + h4, ul + h4, ol + h4, .buttons + h4 {
    margin-top: 15px;  
}
.button, button{
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid var(--color3);
    background-color: var(--white);
    transition: 0.2s ease;
    font-size: 14px;
    min-height: 46px;
    color: var(--color3);
    border-radius: var(--br);
    width: fit-content;
    text-align: center;
    .icon_wrapper{
        width: 35px;
        justify-content: center;
        display: flex;
    }
    &:hover{
        background-color: var(--color3);
        color: var(--white);
        cursor: pointer;
    }
    @media (max-width: 500px) {
        padding: 5px 8px;
        font-size: 12px;
        .icon_btn{
            margin-left: 5px;
        }
    }
}
.blocks-container{
    background: var(--white);
    width: 100%;
}
p > a, .buttons a, .buttonheader, .dropdownlink{
    text-decoration: none;
    color: inherit;
    &:not(.button):not(.buttonheader):not(.dropdownlink){
        color: var(--color2);
        position: relative;
        &:after{
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: var(--color2);
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
        }
        
        &:hover{
            &:after{
                transform: scaleX(1);
                transform-origin: bottom left;
            }
        }  
    }
    
}

body{
    background-color: var(--color3);
    &:after{
        content:''; 
        background-image: linear-gradient(var(--color2), var(--color3));
        position: absolute;
        top: 100px;
        width: 100%;
        z-index: -1;
        min-height: calc(100vh - 100px);
        height: 100%;
    }
    .sections_container_outer{
        min-height: calc(100vh - 100px);
        margin-bottom: 100px;
        .sections_container{
            grid-column: 2/2;
            height: 100%;
            background-clip: padding-box; 
            position: relative;
            border: solid 3px transparent;
            background-color: var(--white);
            /* border-top: 3px solid var(--color3);
            border-left: 3px solid var(--color3);
            border-right: 3px solid var(--color3);
            border-bottom: 3px solid var(--color3);
             */
            &:before {
                content: '';
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                z-index: 0;
                margin: -3px; /* !importanté */
                border-radius: inherit; /* !importanté */
                background: linear-gradient(to bottom, var(--color3), var(--color2));
            }
            &:after {
                content: '';
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--white) !important;
            }
            section, article{
                position: relative;
                z-index: 1;
            }

        }
        .blocks-container{
            padding: 24px;
            
        }
        
    }
    .anchor{
        position: absolute;
        top: -245px;
        left: 0;
        height: 10px;
        width: 100%;
    }
}


/* HEADER */
header{
    background-color: var(--color2);
    position: sticky;
    z-index: 999;
    top: 0;
    .header_container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        .logo_container{
            display: flex;
            height: 75px;
            min-width: 75px;
            border-radius: var(--br);
            border: 4px solid var(--color3);
            overflow: hidden;
            
            transition: 0.2s ease;
            cursor: pointer;
            img{
                height: 100%;
                min-width: 75px;
            }
            &:hover{
                animation: shake 0.5s;
                animation-iteration-count: infinite;
            }

            
        }
        .title_container h1 {
            overflow: hidden;
            color: var(--white);
            border-right: .15em solid var(--color3); 
            white-space: nowrap; 
            margin: 0 auto; 
            letter-spacing: .15em;
            animation: 
              typing 1s steps(40, end),
              blink-caret .75s step-end infinite;
            @media (max-width :400px){
                font-size: 20px;
            }
        }
        nav{
            height: 100%;
            display: flex;
            ul{
                display: flex;
                gap: 25px;
                list-style-type: none;
                align-items: center;
                li{
                    a{
                        &.active{
                            button{
                                background-color: var(--color3);
                                color: var(--white);
                                cursor: pointer;
                            }
                        }
                        &.buttonheader{
                            padding: 10px 15px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            border: 2px solid var(--color3);
                            background-color: var(--white);
                            transition: 0.2s ease;
                            font-size: 14px;
                            min-height: 46px;
                            color: var(--color3);
                            border-radius: var(--br);
                            width: 100%;
                            text-align: center;
                            .icon_wrapper{
                                width: 35px;
                                justify-content: center;
                                display: flex;
                            }
                            &:hover{
                                background-color: var(--color3);
                                color: var(--white);
                                cursor: pointer;
                            }
                            @media (max-width: 500px) {
                                padding: 5px 8px;
                                font-size: 12px;
                                .icon_btn{
                                    margin-left: 5px;
                                }
                            }
                        }
                        @media (max-width: 500px) {
                            min-width: 0;
                            padding: 0;
                        }
                    }
                    .dropdown {
                        display: inline-block;
                        position: relative;
                        padding: 30px 0;
                        .dropdown-content {
                            display: none;
                            position: absolute;
                            background-color: #f1f1f1;
                            z-index: 5;
                            flex-direction: column;
                            min-width: 125px;
                            text-align: center;
                            justify-content: center;
                            align-items: center;
                            top: calc(100% - 3px);
                            right: 0;
                            border-top: 3px solid var(--color3);
                            a{
                                font-weight: bold;
                                transition: 0.2s ease;
                                padding: 10px;
                                width: 100%;
                                box-sizing: border-box;
                                border-right: 3px solid var(--color3);
                                &:hover{
                                    background-color: var(--color3);
                                    color: var(--white);
                                }
                            }
                        }
                        &:hover{
                            .dropdown-content{

                                display: flex;
                                
                            }
                        }
                    }
                }
                @media (max-width: 650px){
                    display: none;
                }
            }
        }
    }
}

/* Home */
main#home{
    .sections_container{
        .blocks-container {
            margin-bottom: 100px;
        }
    }
}

/* Semester page */
a{
    text-decoration: none;
    color: inherit;
}
main{
    section.outer-container, section.note-section-container{
        .blocks-container{
            padding: 24px;
            .blocks-group{
                &:not(:last-child){
                    margin-bottom: var(--margin-s);
                    @media (max-width: 768px) {
                        margin-bottom: var(--margin-xs);
                    }
                }
                &.note-group{ 

                        h2, h3, h4, h5, h6{
                            &:not(:last-child){
                                margin-bottom: 15px;
                            }
                        }
                        p, li{
                            &:not(:last-child){
                                margin-bottom: 5px;
                            }
                        }
                        ul, ol{
                            margin-bottom: 5px;
                        }
                    
                    .ilw_codeblock{
                        padding: 1rem;
                        overflow: auto;
                        font-size: 85%;
                        line-height: 1.45;
                        color: #1f2328;
                        background-color: #f6f8fa;
                        border-radius: 6px;
                        margin: 10px;
                        > code{
                            background-color: inherit;
                        }
                    }
                    iframe{
                        max-width: 100%;
                    }
                    code{
                        background-color: #818b981f;
                    }
                    .anchor + h2{
                        transition:0.8s cubic-bezier(0.175, 0.885, 0.32, 1.975) 2s;
                    }
                    .anchor:target + h2 {
                        margin-left: 50px;
                        color: var(--color3);
                    }
                    /* Normalise custom font */
                    &.divani-font > *{
                        font-family: 'Divani', sans-serif !important;
                    }
                    &.divani-font > #normalizeFont{
                        font-family: var(--font1) !important;
                    }
                    &.divani-font.normalise-font > *{
                        font-family: var(--font1) !important;
                    }
                    &.has-floater{
                        .floater{
                            offset-path: path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0');
                            offset-distance: 0;
                            animation: move 1500ms infinite alternate;
                            width: 11.2rem;
                            height: 11.2rem;
                            top: 50%;
                            position: absolute;
                            translate: 0 -50%;
                            img{
                                width: 100%;
                            }
                        }

                    }
                    .buttons a.button{
                        color: var(--color3);
                        &:hover{
                            background-color: var(--color3);
                            color: var(--white);
                            cursor: pointer;
                        }
                    }
                    
                    
                }
                &.sticky-buttons{
                    position: sticky;
                    top: 100px;
                    translate: -24px 0;
                    width: calc(100% + 48px);
                    z-index: 999;
                    background: var(--white);
                    padding: 20px;
                    .buttons{
                        margin: 0 !important;
                    }
                    .buttons a.button{
                        color: var(--color3);
                        &:hover{
                            background-color: var(--color3);
                            color: var(--white);
                            cursor: pointer;
                        }
                    }
                }
                
            }
            table.table_notes{
                width: 100%;
                text-align: left;
                tr>td:first-child {
                    width: 100px;
                }
                tr{
                    position: relative;
                    &:hover{
                        background-color: var(--color3);
                        color: var(--white);
                        cursor: pointer;
                    }
                }
                tr>td>a:before{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                }
            }
        }
        
    }
}
main#home{


    .sections_container_outer{
        .sections_container{
            section.i_love_web_section.section_intro{
                .blocks-container{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    column-gap: 50px;
                    /*align-items: center;*/
                    @media (max-width: 800px){
                        column-gap: 0;
                        row-gap: 50px;
                        grid-template-columns: 1fr;
                    }
                    .blocks-group{
                        grid-row: 1;
                        &.content-group{
                            h2{
                                margin-bottom: 20px;
                                color: var(--color3);
                                font-size: 3.1em;
                            }
                        }
                        &.media-group{
                            @media (max-width: 800px){
                            grid-row: 2;
                            }
                            img{
                                width: 100%;
                                border-radius: var(--br);
                                border: 4px solid var(--color3);
                                max-height: 300px;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }
            section.i_love_web_section.section_semesters{
                margin: 50px 0;
                h2{
                    margin-bottom: 20px;
                    color: var(--color3);
                    font-size: 3.1em;
                    text-align: center;
                    @media (max-width: 600px){
                        font-size: 2.1em;
                    }
                }
                .carousel_arrows{
                    list-style: none;
                    position: absolute;
                    height: fit-content;
                    top: calc(50% + 65px);
                    left: 0;
                    width: 100%;
                    translate: 0 -50%;
                    z-index: 11;
                    li{
                        button{
                            cursor: pointer;
                            appearance: none;
                            border: 0;
                            width: 66px;
                            position: absolute;
                            top: 50%;
                            translate: 0 -50%;
                            border: 0;
                            background: inherit;
                            appearance: none;
                            @media (min-width: 600px){
                                width: 130px;
                            }
                            svg{
                                width: 66px;
                                path:first-child{
                                    fill: var(--color_accent)
                                }
                                
                                @media (min-width: 600px){
                                    width: 130px;
                                }
                            }
                            &.arrow_prev_btn{
                                transform: scale(-1,1);
                                left: 0;
                            }
                            &.arrow_next_btn{
                                right: 0;
                            }
                            &:hover, &:focus, &:active{
                                svg{  
                                    path:first-child{
                                        fill: var(--green);
                                    } 
                                }
                            }
                            &.scrolling{
                                &.arrow_prev_btn{
                                    animation: scaleChangeReverse 0.5s linear;
                                    animation-iteration-count: 1;
                                    animation-fill-mode: forwards;
                                }
                                &.arrow_next_btn{
                                    animation: scaleChange 0.5s linear;
                                    animation-iteration-count: 1;
                                    animation-fill-mode: forwards;
                                }
                                svg{
                                    path:first-child{
                                        fill: var(--arrowSlideclr);
                                        animation: colorChange 0.5s linear;
                                        animation-iteration-count: 1;
                                        animation-fill-mode: forwards;
                                    }
                                }
                            }
                        }
                    }
                    @media (max-width: 650px){
                        top: calc(50% + 5px);
                    }
                }
                .carousel_slides{

                    list-style: none;
                    width: 100%;
                    display: flex;
                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;
                    scrollbar-width: none;  /* Firefox */
                    z-index: 10;
                    transition: 0.35s ease-out;
                    max-width: 790px;
                    .carousel_slide{
                        width: 100vw;
                        max-width: 100%;
                        scroll-snap-align: center;
                        min-width: 100%;
                        a{
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                            align-items: center;
                        }
                        h3{
                            margin-bottom: var(--br);
                            font-size: 2.1em;
                            color: var(--color3);
                            @media (max-width: 600px){
                                font-size: 1.5em;
                            }
                        }
                        figure{
                            display: grid;
                            width: 100vw;
                            max-width: 100%;
                            width: 100vw;
                            max-width: 90%;
                            img{
                                width: 100vw;
                                max-width: 100%;
                                object-fit: cover;
                                height: 400px;
                                border-radius: var(--br);
                                border: 4px solid var(--color3);
                            }
                            figcaption{
                                padding: 0 0.8888rem;
                                margin: 10px 0;
                                width: calc(100% - 0.8888rem);
            
                                @media (min-width: 600px){
                                    width: 100%;
                                }
                                &.text_small{ /* Slide int  + desc */
                                    display: flex;
                                    gap: 0.25rem;
                                }
                            }
                        }  
                    }
                    @media (min-width: 600px){
                        width: 100%;
                        margin-left: auto;
                        margin: 0 auto;
                    }
                    &.scrolling{
                        animation: scaleChangeSmaller .55s ease-out;
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                    }
                    &.disable_scroll{
                        pointer-events: none;
                        overflow-x: hidden;
                    }
                    &::-webkit-scrollbar { 
                        display: none;  /* Safari and Chrome */
                    }
                }
                @media (min-width: 1050px){
                    margin: 120px 0 0 0;
                }
            }
        }
    }

}
@keyframes move {
    0% {
      offset-distance: 0%;
    }
    100% {
      offset-distance: 100%;
    }
}
@property --arrowSlideclr {
    syntax:"<color>";
    inherits:true;
    initial-value: var(--green);
}
@keyframes colorChange {
    0% {
        --arrowSlideclr: var(--green);
    }
    50%{
        --arrowSlideclr: var(--pink);
    }
    100% {
        --arrowSlideclr: var(--green);
    }
}
@keyframes scaleChange {
    0% {
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes scaleChangeSmaller {
    0% {
        transform: scale(1);
        translate: 0 0;
        z-index: -100;
        position: relative;
    }
    50% {
        transform: scale(0.85);
        translate: 0 -250px;
        z-index: -100;
        position: relative;
        opacity: 0;
        
    }
    100% {
        transform: scale(1);
        translate: 0 0;
        z-index: 10;
        position: relative;
        opacity: 1;
    }
}
@keyframes scaleChangeReverse {
    0% {
        transform: scale(-1,1);
    }
    50%{
        transform: scale(-1.1,1.1);
    }
    100% {
        transform: scale(-1,1);
    }
}
/* Temp code */

#noteID-71{
    margin-bottom: 90vh;
}

.questions{
    display: grid;
    gap: 10px;
    li{
        &.green{
            strong:nth-of-type(2){
                background-color: green;
                color: white;
                padding: 10px;
                display: block;
            }
        }
        &.red{
            strong:nth-of-type(2){
                background-color: red;
                color: white;
                padding: 10px;
                display: block;
            }
        }
        &.orange{
            strong:nth-of-type(2){
                background-color: orange;
                color: white;
                padding: 10px;
                display: block;
            }
            
        }
        &.yellow{
            strong:nth-of-type(2){
                background-color: yellow;
                color: black;
                padding: 10px;
                display: block;
            }
        }
    }
}
a.link_blue{
    color: blue;
    text-decoration: underline;
}
.pe-text{
    max-width: 180px;
    text-align: center;
    color: transparent;
    background: linear-gradient(90deg, rebeccapurple 60%, darkblue 100%);
    background-clip: text;
}