:root {
    --dark-grey: #767676;
    --medium-grey: #B5B5B5;
    --light-grey: #E5E5E5;
}

@font-face {
 font-family: "PT Sans Narrow";
 src: url("../fonts/PTN57F.woff2") format("woff2");
}

@font-face {
 font-family: "Lavi";
 src: url("../fonts/Lavi.woff2") format("woff2");
}

@font-face {
 font-family: "PT Sans Narrow";
 src: url("../fonts/PTN77F.woff2") format("woff2");
 font-weight: bold;
}

@font-face {
 font-family: "Tovari Sans";
 src: url("../fonts/TovariSans.woff2") format("woff2");
}

@font-face {
 font-family: "UnPilgi";
 src: url("../fonts/UnPilgiBold.woff2") format("woff2");
}

body {
    margin: 0px;
    font-family: sans-serif;
    background-color: var(--light-grey);
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--dark-color);
    text-decoration: none;
}

a:hover:not(.active) {
    color: var(--medium-color);
}

.no-color a {
    color: var(--dark-grey);
    text-decoration: none;
}

.no-color a:hover:not(.active) {
    color: var(--medium-grey);
}

.alignleft {
    float: left;
}

.sidebar {
    margin: 0px;
    padding: 0;
    width: 276px;
    background-color: #FFFFFF;
    color: #000000;
    position: fixed;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 54px de haut du logo = GB / le reste section */
.sidebar .header {
    width: 100%:
    text-align: center;
    background-color: #FFFFFF;
    color: #000000;
    margin: 0;
    padding: 0;
}

.logo {
    width: 255px;
    height: 112px;
    background: var(--logo-url) 0 0 no-repeat;
    margin: 0px auto;
}

.logo:hover:not(.active) { background-position: -255px 0px; }

.sidebar .header h1 {
    display: none;
}

.sidebar .intro p {
    font-family: "PT Sans Narrow", sans-serif;
    text-align: center;
    font-style: italic;
    font-size: 23px;
    margin-left: 10px;
    margin-right: 10px;
}

.sidebar p em {
    font-style: normal;
}

.sidebar .menu {
    width: 220px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: "Tovari Sans", sans-serif;
    font-size: 30px;
    font-weight: bold;
    margin-left: 28px;
    display: block;
}

.sidebar .menu i {
    margin-right: 5px;
    font-size: 25px;
}

.sidebar .menu span i {
    font-size: 20px;
}

.sidebar ul {
    list-style: none;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.sidebar .menu a {
    display: block;
    padding: 16px 16px 16px 16px;
    text-decoration: none;
}

.sidebar .social {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.sidebar .social a { padding: 0px 0px 0px 0px; }

.sidebar .social i {
    font-size: 25px;
    padding: 5px 8px 5px 8px;
}

.sidebar .social ul li { display: inline-block; }

.small-header {
    background-color: #FFFFFF;
    width: 100%;
    height: 122px;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    padding-left: 5px;
}

.small-header .logo {
    float: left;
}

.small-header .container {
    font-family: "Tovari Sans", sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
}

.small-header .container i {
    font-size: 25px;
}

.content {
    padding: 1px;
    margin-left: 286px;
    margin-right: 30px;
    line-height:1.6;
    font-size:15px;
    color:#444;
}

.content ol { line-height:1; }
.content ul { line-height:1; }

.content h1 {
    font-family: "Tovari Sans", sans-serif;
    text-transform: uppercase;
    line-height: 1;
    font-size: 30px;
}

.content h2 {
    font-family: "Tovari Sans", sans-serif;
    text-transform: uppercase;
    line-height: 1;
    font-size: 25px;
}

.content blockquote {
    font-style: italic;
}
.content blockquote em {
    font-style: normal;
}

section {
    background: #FFFFFF;
    margin: 0 auto;
    max-width: 840px;
    border-radius: 5px;
    border-bottom: 3px solid var(--medium-color);
    margin-top: 10px;
    margin-bottom: 60px;
    padding: 1px 20px 0px 20px;
}

#announce {
    background: var(--light-color);
    font-size: 20px;
    margin: 0 auto;
    font-style: italic;
    border-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 1px 20px 4px 20px;
}

#gbtv {
    text-align: center;
    background: var(--light-color);
    font-size: 20px;
    margin: 0 auto;
    border-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 1px 20px 4px 20px;
}

.section-large { max-width: 1472px; }


section h1 { border-bottom: 3px solid var(--medium-color); }

section .datepubli {
    font-size: 12px;
    color: #888;
    text-align: right;
    font-style: italic;
}

section .datepubli a {
    text-transform: uppercase;
}

section .datepubli i {
    font-size: 20px;
    color: var(--dark-color);
}

section img {
    display: block;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

section .img-caption {
    display: block;
    padding-top: 0px;
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    text-align: center;
    font-style: italic;
}

section .several-images {
    text-align: center;
}

section .several-images img {
    display: inline-block;
}

section .paypal {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

section video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100%;
}

section audio {
    display: block;
    width: 100%;
}

section iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

section hr {
    clear: both;
}

section .clear {
    clear: both;
}

section .warning {
    border: 3px solid #732a1f;
    border-radius: 10px;
    background: #fff2ea;
    color: #732a1f;
    margin: 25px;
    padding: 5px;
}

section .legend {
    font-size: 11px;
    text-align: center;
    font-style: italic;
}

pre {
    padding-top: 0;
    margin-top: 0;
}

#article p a {
    text-decoration: underline dotted;
}

.share-title {
    clear: both;
    margin-top: 50px;
    margin-bottom: 0px;
}

.share {
    margin-top: 0px;
    margin-bottom: 20px;
    padding-top: 0px;
}

.share-item {
    text-align: center;
}

.share-item i {
    font-size: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 50%;
    color: #FFFFFF;
}

.share-item i:hover:not(.active) {
    background-color: var(--medium-color);
}

.share-item .mastodon i { background-color: #2B90D9; }
.share-item .diaspora i { background-color: #555555; }
.share-item .twitter i { background-color: #000000; }
.share-item .facebook i { background-color: #3A559F; }
.share-item .whatsapp i { background-color: #30BF39; }
.share-item .reddit i { background-color: #FF4500; }
.share-item .pinterest i { background-color: #CB2027; }
.share-item .bluesky i { background-color: #1185FE; }
.share-item .threads i { background-color: #F53D75; }
.share-item .linkedin i { background-color: #0A66C2; }
.share-item .mail i { background-color: var(--dark-grey); }

#countdown {
    font-family: "Tovari Sans", sans-serif;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    font-size: 30px;
}

.section-nav {
    margin: 0 auto;
    max-width: 840px;
    margin-bottom: 60px;
    padding: 0px 0px 0px 0px;
}

.section-nav h1 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 25px;
}

.section-nav .container {
    margin-top: 0px;
    padding-top: 0px;
}

.section-nav .nav-item {
    font-weight: bold;
    text-align: center;
    border-radius: 20px;
    background: var(--dark-color);
}

.section-nav .nav-item:hover:not(.active) {
    background: var(--medium-color);
}

.section-nav .nav-item a {
    color: #FFFFFF;
}

.section-nav .nav-item a:hover:not(.active) {
    color: #FFFFFF;
}

.section-nav .nav-item i {
    font-size: 20px;
    padding: 5px 15px 5px 5px;
}


.section-nav .no-color .nav-item {
    background: var(--dark-grey);
}

.section-nav .no-color .nav-item:hover:not(.active) {
    background: var(--medium-grey);
}

.replay h2 {
    margin-top: 5px;
    margin-bottom: 2px;
    text-align: center;
}

.replay p {
    margin-top: 0px;
    font-size: 11px;
    text-align: center;
    font-style: italic;
}

/**** DEBUT BD ***/

.BD {
    font-family: "Lavi", sans-serif;
    font-size: 25px;
    line-height: normal;
    color:#000;
}

.BD h2 {
    font-family: "Lavi", sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 70px;
    margin-bottom: 15px;
    margin-left: 20px;
    margin-right: 20px;
    overflow-wrap: break-word;
}

.BD .nostyle {
    display: none
}

.BD .gbbu::after {
  content: url('../img/bd_gbbu.png');
  content: url('../img/bd_gbbu.png') / "Grease Boy Bullshitgraphic Universe";
  alt: "Grease Boy Bullshitgraphic Universe";
  float: right;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  width: 115px;
  height: 97px;
}

.BD .alignright {
    margin-left: 80%;
}

.BD br {
    margin-top: 20px;
    display: block;
}


.BD code {
    font-size: 20px;
    font-weight: bold;
    font-family: monospace;
}

.BD strike {
    text-decoration-thickness: 3px;
}

.BD .neutral {
    margin: 20px 20px 20px 20px;
    text-align: justify;
}

.BD .large {
    margin: 30px 20% 30px 20%;
    text-align: center;
    font-size: 33px;
}

.BD .medium {
    margin: 30px 20% 30px 20%;
    text-align: center;
}

.BD .small {
    margin: 30px 20% 30px 20%;
    text-align: center;
    font-size: 20px;
}

.BD .cursive {
    font-family: "UnPilgi", sans-serif;
    font-size: 35px;
    text-align: justify;
    margin: 0px 20px 0px 20px;
}

.BD .footnote {
    text-align: justify;
    padding: 8px 8px 8px 8px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
}

.BD .footnote code {
    font-size: 15px;
    font-weight: bold;
    font-family: monospace;
}

.BD .footnote:before {
    content: "✷ ";
}

.BD .footnote2:before {
    content: "✷✷ ";
}

.BD .box {
    text-align: justify;
    padding: 8px 8px 8px 8px;
    margin: 0px 30px 0px 30px;
    border-radius: 15px;
    display: inline-block;
}

.BD .info {
    background-color: #EAF2FB;
    border: 3px solid #1F4673;
    color: #1F4673;
}

.BD .info::before {
  background: url('../img/bd_info.png') no-repeat;
  content: ' ';
  float: left;
  margin-left: -20px;
  margin-right: 5px;
  margin-top: -20px;
  width: 46px;
  height: 41px;
}

.BD .warning {
    background-color: #ffefeb;
    border: 3px solid #781607;
    color: #781607;
}

.BD .warning::before {
  background: url('../img/bd_warning.png') no-repeat;
  content: ' ';
  float: left;
  margin-left: -23px;
  margin-right: 5px;
  margin-top: -28px;
  width: 51px;
  height: 47px;
}

.BD .okay {
    background-color: #F3FFEB;
    border: 3px solid #508423;
    color: #508423;
}

.BD .okay::before {
  background: url('../img/bd_okay.png') no-repeat;
  content: ' ';
  float: left;
  margin-left: -20px;
  margin-right: 5px;
  margin-top: -20px;
  width: 45px;
  height: 40px;
}

.BD .centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.BD .important {
    text-align: center;
    font-size: 33px;
    background-color: #E2E2E2;
    border: 3px solid #434242;
    color: #434242;
}

.BD .citation {
    background-color: #fff7eb;
    border: 3px solid #ae650b;
    color: #ae650b;
    margin: 0px 90px 0px 90px;
    padding: 15px 8px 0px 8px;
}

.BD .citation::before {
  background: url('../img/bd_citation_gauche.png') no-repeat;
  content: ' ';
  float: left;
  margin-left: -80px;
  margin-right: 5px;
  margin-top: 0px;
  width: 61px;
  height: 37px;
}

.BD .citation::after {
  background: url('../img/bd_citation_droite.png') no-repeat;
  content: ' ';
  float: right;
  margin-left: -5px;
  margin-right: -80px;
  margin-top: 0px;
  width: 61px;
  height: 37px;
}


.BD .url {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: monospace;
}

.BD .disappearing-0 { font-size: 23px; }
.BD .disappearing-1 { font-size: 20px; }
.BD .disappearing-2 { font-size: 18px; }
.BD .disappearing-3 { font-size: 16px; }
.BD .disappearing-4 { font-size: 14px; }
.BD .disappearing-5 { font-size: 12px; }
.BD .disappearing-6 { font-size:  9px; }
.BD .disappearing-7 { font-size:  7px; }
.BD .disappearing-8 { font-size:  5px; }
.BD .disappearing-9 { font-size:  3px; }



/**** FIN BD ***/


.stripe {
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 25px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

.stripe a {
    padding: 5px 10px 5px 10px;
    background-color: #CC0000;
    border-radius: 5px;
    border: 2px solid #CC0000;
    color: #FFFFFF;
}

.stripe a:hover:not(.active) {
    background-color: #888;
    border: 2px solid #888;
    color: #FFFFFF;
}

footer {
    font-size: 12px;
    color: #555555;
    text-align: center;
    font-style: italic;
    margin-bottom: 30px;
}


@media screen and (max-width: 1200px) {
    .BD h2 { margin-left: 15%;  margin-right: 15%; }
    .BD .box { margin: 0px 25px 0px 25px; }
    .BD .citation { margin: 0px 80px 0px 80px; }
    .BD .neutral { margin: 30px 15% 30px 15%; }
    .BD .large { margin: 30px 15% 30px 15%; }
    .BD .medium { margin: 30px 15% 30px 15%; }
    .BD .small { margin: 30px 15% 30px 15%; }
    .BD .cursive { margin: 0px 15% 0px 15%; }
    .BD .footnote { margin-left: 15%;  margin-right: 15%; }

}

@media screen and (max-width: 992px) {
    .content { margin-left: 10px; margin-right: 10px; }
    .BD h2 { margin-left: 10%;  margin-right: 10%; }
    .BD .box { margin: 0px 20px 0px 20px; }
    .BD .citation { margin: 0px 70px 0px 70px; }
    .BD .neutral { margin: 30px 10% 30px 10%; }
    .BD .large { margin: 30px 10% 30px 10%; }
    .BD .medium { margin: 30px 10% 30px 10%; }
    .BD .small { margin: 30px 10% 30px 10%; }
    .BD .cursive { margin: 0px 10% 0px 10%; }
    .BD .footnote { margin-left: 10%;  margin-right: 10%; }
}

@media screen and (max-width: 768px) {
    .small-header .container {
        font-size: 20px;
    }
    .BD { font-size: 20px; }
    .BD h2 { margin-left: 5%;  margin-right: 5%; font-size: 56px; }
    .BD .box { margin: 0px 10px 0px 10px; }
    .BD .citation { margin: 0px 65px 0px 65px; }
    .BD .neutral { margin: 30px 5% 30px 5%; }
    .BD .large { margin: 30px 5% 30px 5%; font-size: 26px; }
    .BD .medium { margin: 30px 5% 30px 5%; }
    .BD .small { margin: 30px 5% 30px 5%; font-size: 16px; }
    .BD .cursive { margin: 0px 5% 0px 5%; }
    .BD .footnote { margin-left: 5%;  margin-right: 5%; }
    .BD .alignright { margin-left: 70%; }
    .BD code { font-size: 15px; }
}

@media screen and (max-width: 600px) {
    .small-header {
        height: auto;
    }
    .small-header .container {
        font-size: 25px;
    }
    .small-header .logo {
        float: none;
    }
}

@media screen and (max-width: 430px) {
    .small-header .container {
        font-size: 20px;
    }
}

@media screen and (max-width: 360px) {
    .small-header .container {
        font-size: 25px;
    }
}

@media screen and (max-width: 340px) {
    .BD .box { margin: 0px 5px 0px 5px; }
    .BD .alignright { margin-left: 50%; }
    .BD .citation { margin: 0px 60px 0px 60px; }
    .BD .neutral { margin: 30px 3% 30px 3%; }
}

@media screen and (max-height: 730px) {

    .sidebar .intro p { font-size: 18px; }

}

@media screen and (max-height: 680px) {

    .sidebar .menu {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .sidebar .menu a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media screen and (max-height: 620px) {

    .sidebar .menu {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .sidebar .menu a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .sidebar .social i {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media screen and (max-height: 530px) {

    .sidebar .intro p { display: none; }

}

@media screen and (max-height: 410px) {

    .sidebar .menu {
        font-size: 22px;
    }

    .sidebar .menu i {
        margin-right: 4px;
        font-size: 19px;
    }

    .sidebar .menu span i {
        font-size: 15px;
    }

    .sidebar .social i {
        font-size: 19px;
        padding: 5px 8px 5px 8px;
    }
}