@font-face {
    font-family: "Mitogen";
    src: url(../others/Mitogen-Display-BF65733bd65dde2.otf);
}
html {
    font-size: 13px;
    overflow: hidden;
}
    html, body {
        padding : 0;
        margin : 0;
        box-sizing: border-box;
        font-size: 10pt;
        scroll-behavior: smooth;
        
    }
    body {
        min-height: 100dvh;
    }
    * {
        font-family: "Mitogen";
    }
    
    /* Section lié à la scroll bar*/
    hr {
        border : 1px solid #ff3f99;
        border-radius: 25px;
        width: 80%;
    }
    
    /* width */
    ::-webkit-scrollbar {
        width: 0;
      }
    
    /* Section lié au Nav */
    
    #navBarSection {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top : 0;
        width: 100%;
        padding: 2%;
        list-style: none;
        font-size: 1dvw;
        z-index : 1;
        box-sizing: border-box;
        background: linear-gradient(rgba(255, 0, 255, 0.178), rgba(255, 0, 149, 0));
        transition: 1s;
        
    }
    
    #navBarSection img {
        width : 5dvw;
    }
    
    #logoSite:hover{
        transform: scale(1.5);
        transition: 1s;
        
    }
    
    nav input[type="search"]{
        font-family: 'Mitogen';
        margin-top: 1dvh;
        height: 5dvh;    width : 5dvh;
        padding: 1%;
        background-color: rgba(247, 0, 255, 0.089);
        background-image: url('../../images/logoTelescope.png');
        background-position: 100% 50%;
        background-size: 100%;
        background-repeat: no-repeat;
        color :#ff6ab0;
        border : 2px solid #ff3f99;
        border-radius: 100px;
        transition: 1s;
        font-size: 1em;
    }
    nav input[type="search"]:focus
    {
        width: 30%;
        background-size: 20%;
    }
    input[type="search"]::-webkit-search-cancel-button{
        display: none;
    }
    #loginBarSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width : 12%;
        padding : 0 1%;
    
    } #loginBarSection li {
        padding: 5%;
    } #loginBarSection img {
        width : 2dvw;
    } #loginBarSection a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    nav {
        display: flex;
        list-style: none;
        width : 65%;
        border-radius : 250px;
        text-decoration : none;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding : 0 15dvw;
    }

    nav button {
        font-size: 1.5rem;
    }
    
    #searchResult
    {
        position: fixed;
        display: none;
        flex-direction: column;
        transform: translateY(5dvh) translateX(-20dvw);
        list-style: none;
        background-color: #fff; border-radius: 2dvw; padding : 1%; width : 20dvw;
    }
    
    #searchResult a
    {
        color :#fd3391;
    }
    
    .courseButton {
        border : none;
        background: none;
        box-shadow: none;
        color : #ff6ab0;
    }
    .profilePicture{
        border-radius: 100%;
        border : none;
        height: 2dvw;
    }
    
    /* Section lié à ajout de ressource*/
    
    #ressourceForm, #saeForm {
        transition: 0.5s;
    }
    
    #addDiv
    {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        z-index: 5;
        background-color: rgba(22, 24, 31, 0.765);
        padding-top: 50px;
        display: none;
        width: 100%;
        height: 100%;
        font-size: 1em;
    }
    
    
    #resultForm {
        color : #ff6ab0;
    }
    
    #ressourceOrSae {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
    }
    #addDiv-content
    {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 25px;
        margin : auto auto;
        width: 25%; 
        height: 65%;
        box-shadow: 1px 1px 25px rgba(159, 186, 255, 0.3);
        background-color: rgb(247, 252, 255);
        flex-direction: column;
        padding: 2%;
    }
    
    #addDiv-content button
    {
        justify-content: center;
        z-index: 16;
    }
    
    #addDiv-content button:hover
    {
        transform: scale(1.1);
        transition: 1s;
        cursor: pointer;
    }
    
    #addDiv-content form
    {
        display: none;
        color : #ff6ab0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1em;
    }
    #matiereForm
    {
        display: flex !important;
    }
    
    #addDiv-content form input
    {
        border-radius: 50px;
        color :#ff6ab0;
        border : 1px solid #ff6ab0;
        background-color: #bb437b1b;
        box-shadow: 2px 5px #bb437b;
        font-family: "Mitogen";
        margin : 2%;
        padding: 2%;
        font-size: 1em;
        width: 100%;
        min-height: 1dvh;
    }
    
    #addDiv-content h2 {
        text-align: center;
        padding : 30px 0 10px 0;
        color : #ff6ab0;
    }
    
    #addDiv-content button {
        background-color: #ff6ab0;
        color : rgb(255, 248, 248);
        font-family: "Mitogen";
        border-radius: 100px;
        box-shadow: 1px 1px 25px rgba(255, 11, 137, 0.066);
        width : 90%;
        height : 5dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .close{
        position: fixed;
        color: #ff6ab0;
        width : 150px;
        top : 5px;
        right : 5px;
        text-align: center;
        z-index: 10;
    }

    .close:hover {
        transform: scale(1.3);
        transition: 1s;
        cursor: pointer;
    }
    
    .addButton button {
        background-color: rgba(223, 40, 131, 0.075);
        border-radius: 100%;
        width : 5dvh;    height: 5dvh;
        border : 0;
        color :#ff6ab0;
        font-size: 20pt;
        border : 2px solid #ff429a;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .addButton button:hover{
        cursor: pointer;
    }
    
    
    button
    {
        margin : 10px;
    }
    button, span{
        font-size: 1rem;
    }
    
    #burgerMenuMobile {
        display: none;
    }
    #burgerMenu {
        display: none;
    }
@media screen and (max-width : 450px){

    #navBarSection img {
        width: 15dvw;
    }
    nav input[type="search"]{
        display: none;
    }
    input[type="search"]::-webkit-search-cancel-button{
        display: none;
    }
    #loginBarSection {
        display: none;
    }
    #burgerMenuMobile {
        display: flex;
    }
    #burgerMenuMobile button {
        border: none; background: none; box-shadow: none; 
    }
    #burgerMenuMobile img {
        width: 8dvw; height: 8dvw;
    }

    #burgerMenu {
        width: 70%; height: 100dvh; position: fixed; top : 0; left : 0;
        background-color: #ff6ab0; box-shadow: 1dvw 1dvw 15dvw #8c009162;
        display: flex; justify-content: center; align-items: center; flex-direction: column;
        transition: 1s;transform: translateX(100dvw);
    }
    #burgerMenu button {
        color : white; font-size: 1.5rem;
    }
    #burgerMenu > span {
        font-size: 2rem; color : white; 
        position: absolute;
        top :0; left:0; margin: 5%;
    }

    #buttonMobileList {
        display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;  
        width: 100%;
    }
    #buttonMobileList img{
        width: 10dvw; height: 10dvw;
    }
    #buttonMobileList > li:nth-of-type(odd) {
        filter : brightness(10);
    }

    #burgerMenu li:nth-of-type(even) {
        filter: brightness(10);
    }
    
    nav {
        display: none;
    }
    
    #addDiv
    {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        z-index: 5;
        background-color: rgba(22, 24, 31, 0.765);
        padding-top: 50px;
        display: none;
        width: 100%;
        height: 100%;
        font-size: 1em;
    }
    
    
    #resultForm {
        color : #ff6ab0;
    }
    
    #ressourceOrSae {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
    }
    #addDiv-content
    {
        display: flex;
        align-items: center;
        border-radius: 25px;
        margin : auto auto;
        width: 80%; 
        height: 80%;
        box-shadow: 1px 1px 25px rgba(159, 186, 255, 0.3);
        background-color: rgb(247, 252, 255);
        flex-direction: column;
        padding: 2%;
    }
    
    #addDiv-content button
    {
        justify-content: center;
        font-size: 1.5rem;
        z-index: 16;
    }
    
    #addDiv-content form
    {
        opacity: 0;
        color : #ff6ab0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1em;
    }
    
    #addDiv-content form input
    {
        border-radius: 50px;
        color :#ff6ab0;
        border : 1px solid #ff6ab0;
        background-color: #bb437b1b;
        box-shadow: 2px 5px #bb437b;
        font-family: "Mitogen";
        margin : 2%;
        padding: 2%;
        font-size: 1em;
        width: 100%;
        min-height: 1dvh;
    }
    
    #addDiv-content h2 {
        text-align: center;
        padding : 30px 0 10px 0;
        color : #ff6ab0;
    }
    
    .close{
        position: fixed;
        color: #ff6ab0;
        width : 150px;
        top : 5px;
        right : 5px;
        text-align: center;
    }

    .close:hover {
        transform: scale(1.3);
        transition: 1s;
        cursor: pointer;
        
    }
    
    #addDiv-content button {
        background-color: #ff6ab0;
        color : rgb(255, 248, 248);
        font-family: "Mitogen";
        border-radius: 100px;
        box-shadow: 1px 1px 25px rgba(255, 11, 137, 0.066);
        width : 90%;
        height : 5dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .addButton button {
        background-color: rgba(223, 40, 131, 0.075);
        border-radius: 100%;
        width : 5dvh;    height: 5dvh;
        border : 0;
        color :#ff6ab0;
        font-size: 20pt;
        border : 2px solid #ff429a;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .addButton button:hover{
        cursor: pointer;
    }
    
    /*Deuxième section :*/
    
    button
    {
        margin : 10px;
    }
    
    .profilePicture {
        border: 4px solid #e6b8f1;
    }

    
    
}