/*
  The original Theme
  Created by Monjackpot design
  https://www.monjackpot.fr
*/

/**************************************************
*
*        Base.
*
**************************************************/

/* General page style */
body {
    background-color: #121212;
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
    color: #848484;
}

div#numero_crescendo {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fc5f00;
    text-align: center;
    display: inline-block;
}

div#lettre_crescendo {
    width: 15px;
    height: 15px;
    border-radius: 1px;
    background-color: #00b1cd;
    text-align: center;
    display: inline-block;
}

div#text {
    position: relative;
    top: 16px;
    line-height : 1%;
}

div#pub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

ins.adsbygoogle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

font,th,td,p,hr,input { font-family: Arial, Helvetica, sans-serif; }

hr { height: 0px; border: solid #848484 0px; border-top-width: 1px; }

a:link                 { text-decoration: none; color : #ec1c1c; }
a:visited              { text-decoration: none; color : #ec1c1c; }
a:hover                { text-decoration: none; color : #FFFFFF; }

td.explain { background-color: #2c2c2e; border-radius: 25px; height: 50px; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); }

.number { position: relative; top: 14px; }

.my_number { position: relative; font-weight: bold; font-size : 18px; color : #FFFFFF; top: 5px;}

.my_letter { position: relative; font-weight: bold; font-size : 14px; color : #FFFFFF; top: -1px;}

.texte1 { font-weight: normal; font-size : 13px; color: #848484; }
.texte2 { font-weight: bold; font-size: 13px; color: #FFFFFF; }
.texte3 { font-weight: bold; font-size: 12px; color: #848484; }
.texte4 { font-weight: normal; font-size: 11px; color: #848484; }
.texte5 { font-weight: bold; font-size: 12px; color: #580881; }
.texte6 { font-weight: bold; font-size: 13px; color: #fc5f00; }
.texte7 { font-weight: bold; font-size: 13px; color: #dfa903; }
.texte10 { font-weight: bold; font-size: 16px; color: #848484; }

.texte8 { font-size: 9px; color: #FFFFFF;}
a.texte8 { color: #FFFFFF; text-decoration: none; }
a.texte8:hover { color: #FFFFFF; text-decoration: none; }

.texte9 { font-weight: normal; font-size: 13px; color: #fc5f00; }
a.texte9 { color: #fc5f00; text-decoration: none; }
a.texte9:hover { color: #FFFFFF; text-decoration: none; }

.title { position: relative; font-weight: bold; font-size: 20px; color: #a7a7a7; margin: 2px; }

.infobulle { position: relative; font-weight: bold; font-size: 20px; color: #a7a7a7; margin: 2px; }

.note {
    background: #262628;
    width: 100%;
    height: 20%;
    border-radius: 10px;
    border: 1px solid #121212;
    display: inline-block;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,1);
}

.note_title {
    background: #fc5f00;
    border-radius: 10px 10px 0px 0px;
    height: 50%;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    padding: 5px;
}

.note_text {
    margin: 20px 20px 20px 20px;
    text-align: center;
    text-align:justify;
}

.postit {
    background: #848484;
    width: 40px;
    height: 20px;
    border: 1px solid #121212;
    padding: 1px 1px 10px 1px;
    display: inline-block;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}

.post_title {
    background: linear-gradient(#2c2c2e, #121212);
    height: 5px;
}

.agrafe {
    margin: -12.5px 0px 0px 0px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    transform: scaleY(0.7);
    color: #848484;
}

.week {
    margin: -2px 1px 0px 1px;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    color: #121212;
}

.tags {
    background: #848484;
    border: 1px solid #121212;
    margin: 10px;
    padding: 2px 2px 0px 2px;
}

.tag_title {
    background: #2c2c2e;
    width: 19px;
    height: 14px;
    margin: -1px 4px 1px -1px;
    float: left;
    padding: 0px 2px 0px 2px;
    font-size: 10px;
    line-height: 12px;
    color: #848484;
}

.tag_list {
    margin: 0px 1px 0px 1px;
    text-align: left;
    font-size: 10px;
    line-height: 14px;
    color: #121212;
}

input.maintitle {
    background: linear-gradient(#dcbdec, 30%, #fc5f00);
    border-radius: 32px;
    height: 64px;
    border: 2px solid #fc5f00;
    font-weight: bold;
    font-size: 48px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    text-shadow: 0px -1px 1px rgba(236,28,28,0.99);
    box-shadow: 0px 0px 10px 2px rgba(252,95,0,0.3);
    cursor: pointer; cursor: hand;
}

input.submit {
    background: linear-gradient(#dcbdec, 30%, #fc5f00);
    border-radius: 25px;
    height: 50px;
    border: 2px solid #fc5f00;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    margin: 2px;
    opacity: 1.0;
    transition: 0.9s;
    cursor: pointer; cursor: hand;
}

input.submit:hover {
    background: linear-gradient(#FFFFFF, #FFFFFF);
    border-radius: 25px;
    height: 50px;
    border: 2px solid #fc5f00;
    font-size: 20px;
    color: #fc5f00;
    margin: 2px;
    opacity: 0.9;
    transition: 0.4s;
    transform: scale(.99);
    box-shadow: 0px 0px 10px 2px rgba(252,95,0,0.85);
    cursor: pointer; cursor: hand;
}

input.delete {
    background-color: #2c2c2e;
    border-radius: 25px;
    height: 50px;
    border: 2px solid #2c2c2e;
    font-size: 20px;
    color: #848484;
    margin: 2px;
    opacity: 1.0;
    transition: 0.9s;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer; cursor: hand;
}

input.delete:hover {
    background-color: #2c2c2e;
    border-radius: 25px;
    height: 50px;
    border: 2px solid #2c2c2e;
    font-size: 20px;
    color: #848484;
    margin: 2px;
    opacity: 0.5;
    transition: 0.4s;
    transform: scale(.99);
    box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.85);
    cursor: pointer; cursor: hand;
}

.check_n {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #2c2c2e;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #fc5f00;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer; cursor: hand;
}

.check_n:hover {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #2c2c2e;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #fc5f00;
    opacity: 1.0;
    transition: 0.4s;
    transform: scale(.99);
    box-shadow: 0px 0px 10px 0px rgba(252,95,0,0.85);
    cursor: pointer; cursor: hand;
}

.hidden:checked ~ .content_n {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #fc5f00;
    text-align: center;
    font-weight: bold;
    font-size : 20px;
    color : #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(252,95,0,0.99);
    cursor: pointer; cursor: hand;
}

.check_l {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #2c2c2e;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #ff3c69;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer; cursor: hand;
}

.check_l:hover {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #2c2c2e;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #ff3c69;
    opacity: 1.0;
    transition: 0.4s;
    transform: scale(.99);
    box-shadow: 0px 0px 10px 0px rgba(255,60,105,0.99);
    cursor: pointer; cursor: hand;
}

.hidden:checked ~ .content_l {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #ff3c69;
    text-align: center;
    font-weight: bold;
    font-size : 20px;
    color : #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(255,60,105,0.85);
    cursor: pointer; cursor: hand;
}

.cookiesdirective {
    background: #121212;
}

input.cookies {
    background: linear-gradient(#222224, #222224);
    border-radius: 1px;
    height: 30px;
    border: 1px solid #121212;
    font-size: 13px;
    font-weight: normal;
    color: #848484;
    margin: 2px;
    padding: 0 10px 0 10px;
    opacity: 1.0;
    transition: 0.9s;
    cursor: pointer; cursor: hand;
}

input.cookies:hover {
    background: linear-gradient(#222224, #222224);
    border-radius: 1px;
    height: 30px;
    border: 1px solid #121212;
    font-size: 13px;
    font-weight: normal;
    color: #848484;
    margin: 2px;
    padding: 0 10px 0 10px;
    opacity: 0.6;
    transition: 0.4s;
    transform: scale(.99);
    cursor: pointer; cursor: hand;
}

.top {
    background: #222224;
}

.arrow {
    border: solid #fc5f00;
}

input.hidden {
    display: none;
}

/**************************************************
*
*        Responsive.
*
**************************************************/

@media only screen and (max-width:320px) {
    .number { top: 10px; }
    input.maintitle {
        border-radius: 28px;
        height: 56px;
        font-size: 40px;
    }
    .check_n {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
    }
    .check_n:hover {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
    }
    .hidden:checked ~ .content_n {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size : 18px;
    }
    .check_l {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
    }
    .check_l:hover {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
    }
    .hidden:checked ~ .content_l {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size : 18px;
    }
    div#pub {
        width: 250px;
        max-width: 250px;
    }
    ins.adsbygoogle {
        width: 250px;
        max-width: 250px;
    }
}

@media only screen and (min-width:321px) and (max-width:420px) {
    div#pub {
        width: 280px;
        max-width: 280px;
    }
    ins.adsbygoogle {
        width: 280px;
        max-width: 280px;
    }
}

@media only screen and (min-width:421px) and (max-width:520px) {
    div#pub {
        width: 320px;
        max-width: 320px;
    }
    ins.adsbygoogle {
        width: 320px;
        max-width: 320px;
    }
}

/**************************************************
*
*        Change Color Mode Base
*
**************************************************/

@media (prefers-color-scheme: light) {
        body {
                background-color: #e1e1e1;
                color: #121212;
        }
        hr {
                height: 0px;
                border: solid #848484 0px;
                border-top-width: 1px;
        }
        a:hover {
                color : #848484;
        }
        td.explain {
                background-color: #FFFFFF;
        }
        .texte1 {
                color: #121212;
        }
        .texte2 {
                color: #848484;
        }
        .texte3 {
                color: #121212;
        }
        .texte4 {
                color: #121212;
        }
        .texte8 {
                color: #848484;
        }
        a.texte8 {
                color: #848484;
        }
        a.texte8:hover {
                color: #848484;
        }
        a.texte9:hover {
                color: #848484;
        }
        .note {
            background: #f0f0f0;
            border: 1px solid #505052;
        }
        .postit {
            background: #848484;
            border: 1px solid #848484;
        }
        .post_title {
            background: linear-gradient(#FFFFFF, #e1e1e1);
        }
        .agrafe {
            color: #848484;
        }
        .week {
            color: #e1e1e1;
        }
        .tags {
                background: #848484;
                border: 1px solid #848484;
        }
        .tag_title {
                background: #FFFFFF;
                color: #848484;
        }
        .tag_list {
                color: #e1e1e1;
        }
        input.delete {
                background-color: #848484;
                border: 1px solid #606060;
                color: #e1e1e1;
        }
        input.delete:hover {
                background-color: #848484;
                border: 1px solid #606060;
                color: #e1e1e1;
                opacity: 0.6;
                box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);
        }
        .check_n {
                background-color: #FFFFFF;
        }
        .check_n:hover {
                background-color: #FFFFFF;
        }
        .check_l {
                background-color: #FFFFFF;
        }
        .check_l:hover {
                background-color: #FFFFFF;
        }
        .cookiesdirective {
                background: #f5f5f5;
        }
        input.cookies {
                background: linear-gradient(#848484, #848484);
                border: 1px solid #606060;
                color: #e1e1e1;
        }
        input.cookies:hover {
                background: linear-gradient(#848484, #848484);
                border: 1px solid #606060;
                color: #e1e1e1;
        }
        .top {
                background: #848484;
        }
        .arrow {
                border: solid #e1e1e1;
        }
}