@import url('https://rsms.me/inter/inter.css');

@import url('https://fonts.intera.dev/_/lexend+deca');

/* Mode Clair Défini par OS/Browser */
/* Mode Clair Défini par OS/Browser */
/* Mode Clair Défini par OS/Browser */
/* Mode Clair Défini par OS/Browser */
/* Mode Clair Défini par OS/Browser */
/* Mode Clair Défini par OS/Browser */

@media (prefers-color-scheme: light){
    html, 
    body {
        font-family: 'Inter';
        font-style: normal;
        scroll-behavior: smooth;
        height: 100%;
        margin: 0;
    }

    p{
        margin: 0px;
    }

    body{
        background: linear-gradient(120deg, #F1F1E7 0%, #FFF4D7 100%);
    }
    .imgbox{
        border-radius: 26px;
        height: 146px;
    }
    input{
        box-sizing: border-box;
        padding: 12px;
        border-radius: 20px;
        border-width: 0px;
        background-color: white;
    }
    .inptsettings{
        box-sizing: border-box;
        padding: 12px;
        margin: 2px;
        border-radius: 20px;
        border-width: 0px;
        background-color: #e7e7e7;
        width: 80%;
    }
    .error{
        color: red;
        padding-bottom: 15px;
        text-align: center;
    }

    .header{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        padding-top: 20px;
        /*
        margin: 0px 25px 0px 25px;
        */
    }

    .header h1{
        left: 40px;
        position: absolute;
    }

    .header form{
        min-width: 40%;
        margin: auto;
    }

    .header form .searchBar{
        width: 100%;
    }

    .searchBar{
        font-weight: 400;
        font-size: 22px;
    }

    .connectButton{
        background-color: #b6ffea;
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        transition-duration: 0.2s;

        font-weight: 400;
        font-size: 18px;

    }

    .connectButton:hover {
        box-shadow: 2px 6px 1px 0px #0000007e;
        font-weight: 450;
    }

    .buttonSidebar{
        padding: 8px;
        background-color: white;
        border-radius: 20px;
        border-width: 0px;
        box-shadow: 0px 4px 4px rgba(56, 56, 56, 0.1);
        font-weight: 400;
        font-size: 18px;
        max-width: 100%;
        cursor: pointer;
    }

    .buttonPrimary{
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        background-color: white;
        display: inline-block;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 400;
        font-size: 18px;
        cursor: pointer;
    }
    b{
        font-weight: 300 !important;
    }
    .buttonSecondary{
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        color: white;
        background: #AF89FF;
        display: inline-block;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 400;
        font-size: 18px;
        box-shadow: #AF89FF 0px 0px 0px ;
        transition: box-shadow 0.3s linear;
        cursor: pointer;
    }
    .buttonSecondary:hover{
        box-shadow: #AF89FF 0px 0px 25px ;
        transition: box-shadow 0.3s linear;
    }

    a{
        text-decoration: none;
        color: rgb(0, 0, 0);
        cursor: pointer;
    }
    .checkboxcont {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 5px;
        margin-top: 15px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

    }

    .checkboxcont input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;

    }

    .checkmark {
        position: absolute;
        top: -3px;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        border-radius: 16px;
        transition: background-color 0.1s linear;
    }
    .checkboxcont:hover input ~ .checkmark {
        background-color: rgb(216, 216, 216);
        transition: background-color 0.1s linear;
    }
    .checkboxcont input:checked ~ .checkmark {
        background-color: #AF89FF;
        transition: background-color 0.3s linear;
    }
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .checkboxcont input:checked ~ .checkmark:after {
        display: block;
    }
    .checkboxcont .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    textarea {
        resize: none;
    }

    h1:focus-visible{
        outline: 0;
    }

    div:focus-visible{
        outline: 0;
    }

    .editor{
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
        word-break: break-all;
    }
    .list{
        width: 40%;
        margin: auto;
        text-align: center;
    }

    .list .card {
        text-align: start;
    }

    .list > * {
        margin-bottom: 25px;
    }

    .editorContainer{
        width: 40%;
        margin: auto;
        text-align: center;
        margin-bottom: 50px;
    }

    .editorContainer .card{
        text-align: start;
    }

    .sidebar{
        max-width: 220px;
        width: 16%;
        display: flex;
        flex-direction: column;
        left: 40px;
        position: absolute;
    }

    .sidebar .buttonSidebar{
        margin-bottom: 16px;
        padding-left: 16px;
    }

    .main{
        margin-top: 65px;
        display: flex;
        justify-content: space-between;
    }

    .username {
        right: 40px;
        position: absolute;
        color: #000000;
        font-family: 'Inter';
        font-weight: 600;
    }

    .mainTitle{
        text-align: center;
        display: flex;
        justify-content: center;
        font-size: 40px;
    }

    .header .mainTitle{
        margin-left: 10px;
    }

    .mainTitle p:nth-child(1){
        font-family: 'Inter';
        font-style: normal;
        font-weight: 200;
        letter-spacing: -0.065em;
        line-height: 82px;
        font-size: 38px;
        color: #000000;
    }

    .mainTitle p:nth-child(2){
        font-family: 'Lexend Deca', sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 80px;
        letter-spacing: -0.065em;
        color: #AF89FF;
    }

    .subheading{
        font-weight: 200;
        font-size: 24px;
        line-height: 29px;
        text-align: center;
        letter-spacing: -0.065em;
    }

    .centerButtonList{
        margin-top: 50px;
        display: inline-flex;
        justify-content: center;
        gap: 50px;
    }

    .mainTitle > a{
        display: inherit;
    }

    input[type="checkbox"]{
        width: 25px;
        height: 25px;
    }

    button[type="submit"]{
        padding: 10px 20px 10px 20px;
        background: #AF89FF;
        border-radius: 54px;
        border-width: 0px;
        color: #FFFFFF;
        font-size: 18px;
        line-height: 29px;
        font-weight: 400;
        font-family: 'Inter';
        font-style: normal;
        align-self: center;
        margin-top: 15px;
        margin-bottom: 20px;
    }


    /* CARD */

    .card{
        word-wrap: break-word;
        padding: 12px 16px 19px 16px;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        background-color: white;
        box-shadow: 0px 1px 16px #3838381e;
        animation: cardpopup 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    @keyframes cardpopup {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
        }
    
        to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
    }

    .card div{
        display: flex;
        justify-content: space-between;
    }

    .card p{
        color: #514E4E;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
    }

    .card h1{
        color: black;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
    }

    .card .date{
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        color: #645F5F;
    }

    .loginCard{
        width: 25%;
        max-width: 350px;
        min-width: 300px;
        padding: 0px 28px 28px 28px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 3px 7px 8px 0px #00000045;
        display: flex;
        flex-direction: column;
        margin-bottom: 5%;
    }

    @media (max-width: 1199px) {
        .loginCard{
            width: 300px;
        }
    }

    @media (max-height: 850px){
        .mainTitle{
            margin-top: 20px;
        }
    }

    .loginCard h1{
        text-align: center;
        font-family: 'Lexend Deca', sans-serif;
        font-weight: 300;
    }

    .loginCard form{
        display: flex;
        flex-direction: column;
    }

    .loginCard form input{
        background: #DDDDDD;
        margin-bottom: 4px;
    }

    .loginCard form input + label{
        margin-top: 12px;
    }

    .loginCard label{
        margin-left: 5px;
        margin-bottom: 4px;
    }

    .loginCard .cgu{
        margin-top: 15px;
        display: flex;
    }

    .loginCard a{
        text-align: center;
        text-decoration-line: underline;
        color: #AF89FF;
    }

    .cgu p{
        font-size: 14px;
        margin-top: auto;
        margin-bottom: auto;
    }

    /* CONTAINER */

    .centerContainer{
        display: flex;
        justify-content: center;
        flex: 1 1 auto;
        align-items: center;
    }

    .mainContainer{
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .maintooltip {
        display: block;
        visibility: hidden;
        padding: 5px;
        background-color: rgba(37, 37, 37, 0.808);
        text-align: center;
        border-radius: 8px;
        border-width: 2px;
        border-color: #30303000;
        border-style: solid;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.12s linear;
        font-size: 13px;
        position: absolute;
        right: 35px;
        top: 59px;
    }

    h2:hover + .maintooltip,
    .maintooltip:hover{
        visibility: visible;
        opacity: 1;
        transition: opacity 0.12s linear;
        color: #fc6b6b;
    }

    .errorbg{

        position: absolute;
        width: 2718px;
        left: calc(50% - 2718px/2);
        top: calc(-41% - 972px/2 - 226px);
        z-index: 1;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 800;
        font-size: 1200px;
        line-height: 1452px;
        text-align: center;
        letter-spacing: -0.065em;
        color: rgba(0, 0, 0, 0.02);
    }

    kbd {
        background-color: rgb(255, 255, 255);
        border-radius: 3px;
        box-shadow:  0 -2px 0 0 rgba(216, 216, 216, 0.7) inset;
        color: #333;
        display: inline-block;
        font-size: .85em;
        font-weight: 700;
        line-height: 1;
        padding: 4px 6px;
        white-space: nowrap;
    }
    kbd:active {
        background-color: rgb(245, 245, 245);
        color: rgb(78, 78, 78);
        box-shadow:  0 2px 0 0 rgba(216, 216, 216, .7) inset;

    }

    details {
        cursor:pointer;
        text-align: left;
        margin-bottom: 10px;
        animation: cardpopup 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        opacity: 1;
        -webkit-user-select: none;
    }
}



/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/
/* Mode Sombre défini par OS/Browser*/


@media (prefers-color-scheme: dark){
    html, 
    body {
        font-family: 'Inter';
        font-style: normal;
        scroll-behavior: smooth;
        height: 100%;
        margin: 0;
    }

    p{
        margin: 0px;
        color: #E0E0E0;
    }

    body{
        background: linear-gradient(120deg, #252522 0%, #16140F 100%);
        color: #FFFFFF;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
    }

    input{
        box-sizing: border-box;
        padding: 12px;
        border-radius: 20px;
        border-width: 0px;
        background-color: #565656;
        color: #FFFFFF;
    }
    .inptsettings{
        box-sizing: border-box;
        padding: 12px;
        margin: 2px;
        border-radius: 20px;
        border-width: 0px;
        background-color: #797979;
        width: 80%;
        color: #FFFFFF;
    }
    .error{
        color: rgb(219, 53, 53);
        padding-bottom: 15px;
        text-align: center;
    }

    .header{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        padding-top: 20px;
        /*
        margin: 0px 25px 0px 25px;
        */
    }

    .header h1{
        left: 40px;
        position: absolute;
        color: #FFFFFF;
    }

    .header form{
        min-width: 40%;
        margin: auto;
        color: #FFFFFF;
    }

    .header form .searchBar{
        width: 100%;
    }

    .searchBar{
        font-weight: 400;
        font-size: 22px;
    }

    .connectButton{
        background-color: #b6ffea;
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        transition-duration: 0.2s;

        font-weight: 400;
        font-size: 18px;

    }

    .connectButton:hover {
        box-shadow: 2px 6px 1px 0px #0000007e;
        font-weight: 450;
    }

    .buttonSidebar{
        padding: 8px;
        background-color: #4B4B4B;
        color: #fff;
        border-radius: 20px;
        border-width: 0px;
        box-shadow: 0px 4px 4px rgba(56, 56, 56, 0.1);
        font-weight: 400;
        font-size: 18px;
        max-width: 100%;
        cursor: pointer;
    }

    .buttonPrimary{
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        background-color: #414141;
        color: #fff;
        display: inline-block;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 400;
        font-size: 18px;
        cursor: pointer;
    }

    .buttonSecondary{
        padding: 8px;
        border-radius: 20px;
        border-width: 0px;
        color: black;
        background: #AF89FF;
        display: inline-block;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 400;
        font-size: 18px;
        box-shadow: #AF89FF 0px 0px 0px ;
        transition: box-shadow 0.3s linear;
        cursor: pointer;
    }
    .buttonSecondary:hover{
        box-shadow: #8064bb 0px 0px 10px ;
        transition: box-shadow 0.3s linear;
    }

    a{
        text-decoration: none;
        color: rgb(255, 255, 255);
        cursor: pointer;
    }
    .checkboxcont {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 5px;
        margin-top: 15px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

    }

    .checkboxcont input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;

    }

    .checkmark {
        position: absolute;
        top: -3px;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #808080;
        border-radius: 16px;
        transition: background-color 0.1s linear;
    }
    .checkboxcont:hover input ~ .checkmark {
        background-color: #747474;
        transition: background-color 0.1s linear;
    }
    .checkboxcont input:checked ~ .checkmark {
        background-color: #AF89FF;
        transition: background-color 0.3s linear;
    }
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .checkboxcont input:checked ~ .checkmark:after {
        display: block;
    }
    .checkboxcont .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    textarea {
        resize: none;
    }

    h1:focus-visible{
        outline: 0;
    }

    div:focus-visible{
        outline: 0;
    }

    .editor{
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
        word-break: break-all;
    }
    .list{
        width: 40%;
        margin: auto;
        text-align: center;
    }

    .list .card {
        text-align: start;
    }

    .list > * {
        margin-bottom: 25px;
    }

    .editorContainer{
        width: 40%;
        margin: auto;
        text-align: center;
        margin-bottom: 50px;
    }

    .editorContainer .card{
        text-align: start;
    }

    .sidebar{
        max-width: 220px;
        width: 16%;
        display: flex;
        flex-direction: column;
        left: 40px;
        position: absolute;
    }

    .sidebar .buttonSidebar{
        margin-bottom: 16px;
        padding-left: 16px;
    }

    .main{
        margin-top: 65px;
        display: flex;
        justify-content: space-between;
    }

    .username {
        right: 40px;
        position: absolute;
        color: #ffffff;
        font-family: 'Inter';
        font-weight: 600;
    }

    .mainTitle{
        text-align: center;
        display: flex;
        justify-content: center;
        font-size: 40px;
    }

    .header .mainTitle{
        margin-left: 10px;
    }

    .mainTitle p:nth-child(1){
        font-family: 'Inter';
        font-style: normal;
        font-weight: 200;
        letter-spacing: -0.065em;
        line-height: 82px;
        font-size: 38px;
        color: #ffffff;
    }

    .mainTitle p:nth-child(2){
        font-family: 'Lexend Deca', sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 80px;
        letter-spacing: -0.065em;
        color: #AF89FF;
    }

    .subheading{
        font-weight: 200;
        font-size: 24px;
        line-height: 29px;
        text-align: center;
        letter-spacing: -0.065em;
    }

    .centerButtonList{
        margin-top: 50px;
        display: inline-flex;
        justify-content: center;
        gap: 50px;
    }

    .mainTitle > a{
        display: inherit;
    }

    input[type="checkbox"]{
        width: 25px;
        height: 25px;
    }

    button[type="submit"]{
        padding: 10px 20px 10px 20px;
        background: #AF89FF;
        border-radius: 54px;
        border-width: 0px;
        color: #FFFFFF;
        font-size: 18px;
        line-height: 29px;
        font-weight: 400;
        font-family: 'Inter';
        font-style: normal;
        align-self: center;
        margin-top: 15px;
        margin-bottom: 20px;
    }


    /* CARD */

    .card{
        word-wrap: break-word;
        padding: 12px 16px 19px 16px;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        background-color: #4B4B4B;
        box-shadow: 0px 1px 16px #3838381e;
        animation: cardpopup 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    @keyframes cardpopup {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
        }
    
        to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
    }

    .card div{
        display: flex;
        justify-content: space-between;
    }

    .card p{
        color: #ececec;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
    }

    .card h1{
        color: rgb(255, 255, 255);
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
    }

    .card .date{
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        color: #dfdfdf;
    }

    .loginCard{
        width: 25%;
        max-width: 350px;
        min-width: 300px;
        padding: 0px 28px 28px 28px;
        background-color: #303030;
        border-radius: 20px;
        box-shadow: 3px 7px 8px 0px #00000045;
        display: flex;
        flex-direction: column;
        margin-bottom: 5%;
    }

    @media (max-width: 1199px) {
        .loginCard{
            width: 300px;
        }
    }

    @media (max-height: 850px){
        .mainTitle{
            margin-top: 20px;
        }
    }
    ::placeholder {
        color: rgb(197, 197, 197);
        opacity: 1;
    }
    .loginCard h1{
        text-align: center;
        font-family: 'Lexend Deca', sans-serif;
        font-weight: 300;
    }

    .loginCard form{
        display: flex;
        flex-direction: column;
    }

    .loginCard form input{
        background: #585858;
        margin-bottom: 4px;
    }

    .loginCard form input + label{
        margin-top: 12px;
    }

    .loginCard label{
        margin-left: 5px;
        margin-bottom: 4px;
    }

    .loginCard .cgu{
        margin-top: 15px;
        display: flex;
    }

    .loginCard a{
        text-align: center;
        text-decoration-line: underline;
        color: #AF89FF;
    }

    .cgu p{
        font-size: 14px;
        margin-top: auto;
        margin-bottom: auto;
    }

    /* CONTAINER */

    .centerContainer{
        display: flex;
        justify-content: center;
        flex: 1 1 auto;
        align-items: center;
    }

    .mainContainer{
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .maintooltip {
        display: block;
        visibility: hidden;
        padding: 5px;
        background-color: rgba(37, 37, 37, 0.808);
        text-align: center;
        border-radius: 8px;
        border-width: 2px;
        border-color: #30303000;
        border-style: solid;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.12s linear;
        font-size: 13px;
        position: absolute;
        right: 35px;
        top: 59px;
    }

    h2:hover + .maintooltip,
    .maintooltip:hover{
        visibility: visible;
        opacity: 1;
        transition: opacity 0.12s linear;
        color: #fc6b6b;
    }

    .errorbg{

        position: absolute;
        width: 2718px;
        left: calc(50% - 2718px/2);
        top: calc(-41% - 972px/2 - 226px);
        z-index: 1;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 800;
        font-size: 1200px;
        line-height: 1452px;
        text-align: center;
        letter-spacing: -0.065em;
        color: rgba(255, 255, 255, 0.02);
    }

    kbd {
        background-color: #5f5f5f;
        box-shadow: 0 -2px 0 0 #414141 inset;
        border-radius: 3px;
        color: rgb(207, 207, 207);
        display: inline-block;
        font-size: .85em;
        font-weight: 700;
        line-height: 1;
        padding: 4px 6px;
        white-space: nowrap;
    }

    kbd:active {
        background-color: rgb(75, 75, 75);
        color: rgb(175, 175, 175);
        box-shadow: 0 2px 0 0 #363636 inset;

    }

    details {
        cursor:pointer;
        text-align: left;
        margin-bottom: 10px;
        animation: cardpopup 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        opacity: 1;
        -webkit-user-select: none;
    }
    b{
        font-weight: 300 !important;
    }
}



/* MOBILE */
/* MOBILE */
/* MOBILE */
/* MOBILE */
/* MOBILE */
/* MOBILE */



@media (max-width: 800px){
    
}