/* variables */

  :root{
      --primary: #FC7A7A;
      --secondary: #737373;
  }

  @font-face {
    font-family: "california";
    src: url("/font/california.ttf");
  }

  @font-face {
    font-family: "bebas";
    src: url("/font/bebas.ttf");
  }

  @font-face {
      font-family: "louis_george_cafe";
      src: url("/font/louis_george_cafe.ttf");
  }

  @font-face {
    font-family: "louis_light";
    src: url("/font/louis_light.ttf");
}
  /* reset */ 

  html {
      font-size: 62.5%;
  }

h1, h2 {
    margin: 0;
}

  li {
      font-size: 3rem;
  }
  body,p,a,ul,li {
      margin: 0;
      padding: 0;
      text-decoration: none;
  }

  li {
    list-style-type: none;
  }

  a {
      color: white;
      text-decoration: none;
      
  }

  .clear {
      clear: both;
  }

  /* base styles */
body {
    color: #fff;
    overflow-x: hidden;
    background: url("../picture/background_bande.png");
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    
}

#main_div {
    width: 1000px;
    margin: auto;
    color: #fff;
    overflow-x: hidden;
    background: url("../picture/fond.png");
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0px 0px 19px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 19px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 19px 3px rgba(0,0,0,0.75);
}

.oneline {
    white-space: nowrap;
}

/* HEADER */

.main-head {
    background-color:black;/*Couleur de fond*/
    color: white;

}

.logo {
}

.reallogo {
    max-width: 125px;
}

nav {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    font-family: california;
}

nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav ul li {
    font-size: 30px;
    margin-right: 30px;
    justify-content: center;
}

a {
    font-family: california;
    font-style: italic;
}

nav a:hover {
    color: var(--primary);
}

.center {
    text-align: justify;
    text-align-last: center;
    padding: 0px 100px;
}

.right {
    float: right;
}

.big_t {
    font-size: 100px;
    font-family: california;
}

.medium_t {
    font-size :80px;
    line-height: 70px;
    font-family: bebas;
}

.small_t {
    font-size: 41px;
    font-family: 'bebas';
    line-height: 40px;
}

.normal {
    font-size: 40px;
    font-family: 'bebas';
}

.louis {
    font-size: 30px;
    font-family: 'louis_light';
    font-style: italic;
}

.main_color {
    color: var(--primary);
}

.m-top {
    margin-top: 40px;
}

.m-bot {
    margin-bottom: 40px;
}

/* TITLE */

.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.title h2 {
    font-family: california;
    font-weight: normal;
    margin-left: 11%;
    color: white;
}

.decouvrez {
    font-family: bebas;
    font-weight: normal;
}

.tcg {
    margin-top: -30px !important;
    margin-left: 20% !important;
}

.champa {
    position: relative;
    right: -100px;
    top: -170px;
    float: right;
    height: 200px;
}






#carte_joker {
    position: relative;
    left: -120px;
    top: -110px;
    height: 380px;
}





#youtube {
    margin-top: 60px;
}



#twitch_yt p {
    font-family: 'bebas';
    font-style: italic;
}

#logo_twitch, #logo_yt {
    width: 30%;
}

#right_twitch, #left_youtube {
    width: 70%;
}

#ending {
    clear: both;
    padding: 100px 50px;
}

#ending p {
    font-family: 'louis_george_cafe';
    font-size:30px;
    margin-top: 20px;
}

  /* fonts */ 



  /* small tablet styles */

  @media screen and (max-width: 1200px){
    html, body {
        overflow-x: hidden;
      }
      body {
        position: relative
      }
    .reallogo {
        max-width: 80px;
    }
    nav ul li {
        font-size: 20px;
    }
    .title h2 {
        font-size: 50px;
        margin-left: 5%;

    }
    #main_div {
        width: 100%;
    }
    
    #communautaire #hashtag {
        top: 0px;
        width: 50%;
        margin-left: 10%;
    }

    #communautaire #tele {
        width: 29%;
        right: 6%;
        position: absolute;
    }
    
    #first_part {
        margin-left: 5%;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    #numero01 {
        width: 17%;

    }
    #projet {
        margin-top: -14px;
    }

    #texte_problematique {
        padding: 0px 0px;
        margin-right: 5%;
    }

    #banniere_cards {
        /* background: url(../picture/banniere_naissance_mobile.png);
        background-repeat: no-repeat;
        background-size: 100%; */
    }

    #carte_joker {
        position: relative;
        max-height: 26%;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    #jose_blabla {
        padding: 10px 10px;
    }
    
    #jose_1, #jose_2 {
        width: 60%;
        opacity: 50%;
    }

    #rien_a_regarder {
        
    }

    #recherche_contenu {
        margin-bottom: -20px;
    }

    #les_gars {
        margin-bottom: -20px;
    }

    #genre_personne_remplace {
        font-size: 9.5vw;
    }

    #le_seum {
        font-size: 4.5vw;
    }

    #jcrois_idee {
        font-size: 15vw;
        line-height: 13vw;
    }
    #btn_twitch, #btn_youtube {    
        display: inline-block;
        border-radius: 5vw;
        font-size: 9vw;
        cursor: pointer;
        font-family: 'california';
        width: 30%;
    }
    #btn_twitch {
        background-color: #5f4595;
        margin-right: 10%;
    }
    
    #btn_youtube {
        background-color: #e73049;
    }

    #on_vend_du_reve {
        margin-top: 5%;
        padding: 5% 5%;
        margin-bottom: -12%;
    }

    #on_vend_du_reve #reve_logo {
        width: 50%;
    }

    #reve_logo {
        position: absolute;
        left: 50%;
        margin-top: 5%;
    }

    #reussi {
        width: 53%;
        opacity: 50%;
    }

    #number02 {
        padding: 0px 5%;
        margin-bottom: -5%;
    }

    #objectif_texte {
        padding: 0px 5%;
    }

    #intro {
        line-height: 0vw;
        font-size: 8vw;
        margin-bottom: 7%;
    }

    #banniere_yugi {
        width: 105%;
    }

    #trio_texte_1 {
        padding: 3%;
        margin-bottom: -2%;
    }

    #trio_image {
        width: 95%;
        margin-bottom: 3%;
    }

    #rdv_hebdo {
        font-size: 6.5vw;
    }

    #pour_cela {
        padding: 5%;
        margin-bottom: 2%;
    }

    #fleche_bas {
        width: 40%;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        margin-bottom: 15%;
    }

    #texte_video {
        width: 95%;
    }

    #stream {
        padding: 5%;
    }

    #lancement_stream {
        font-size: 8vw;
    }

    #logo_3d {
        width: 100%;
    }

    #kuriboh {
        position: absolute;
        left: -25%;
        width: 50%;
    }

    #malgre_contexte {
        margin-top: 15%;
     }

     #il_faut_donc, #parenthese, #lidee_cest {
        font-size: 4vw;
     }

     #lidee_cest {
        margin-top: 6%;
     }

     #peda_comp, #malgre_contexte {
        font-size: 6.3vw;
     }

     #ou_pas {
        width: 30%;
     }

     #remote_duel_image, #talkshow_image {
         width: 100%;
     }

     #remote_duel {
         padding: 2%;
         margin-bottom: -4%;
     }

     #partie_a_distance, #spectacle_de_discussion {
         padding-left: 3%;
         font-size: 5vw;
     }

     #eclair {
         width: 100%; 
         padding: 0%;
         margin-top: 7%;
     }

     #talkshow {
        padding: 2%;
        margin-top: -4%;
        margin-bottom: -4%;
     }

     #spectacle_de_discussion {
        margin-left: 50%;
        margin-top: 8%;
     }

     #lv2_allemand {
        margin-left: 53%;
        font-size: 4.5vw;
        margin-top: -3%;
        margin-bottom: 4%;
    }

    #equipe_texte {
        width: 100%;
    padding: 5%;
    margin-top: -5%;
    }

    #brochette {
        width: 80%;
        margin-left: 10%;
        margin-top: -7%;
    }
     

     #contexte {
        padding: 5%;
     }

     #barre_blanche {
         width: 100%;
         margin-top: 10%;
     }

     #competence_equipe {
        font-size: 6vw;
        line-height: 8vw;
     }

     #reso_socio {
         padding: 2%;
         margin-top: 6%;
         margin-bottom: 17%;
     }

     #texte_reseaux {
        width: 70%;
        margin-bottom: -4%;
     }

     #twitter, #facebook {
        width: 35%;
     }

     #banniere_footer {
         width: 100%;
         padding: 0%;
         position: absolute;
         bottom: 0;
     }

     #evoluer {
        margin-bottom: 4%;
        font-size: 7vw;
     }

     #idee_tete {
        font-size: 5vw;
        margin-bottom: 4%;
    }
     
    #programme {
        font-size: 5vw;
    }

    #ok_jarrete {
        width: 50%;
        margin-left: 33%;
    }
     
    



    .m-top {
        margin-top: 2%;
    }

    .louis {
        font-size: 4.8vw;
    }
    
    .big_t {
        font-size: 21.65vw;
        font-family: california;
    }
    .small_t {
        font-size: 6vw;
        font-family: 'bebas';
        line-height: 6vw;
    }

    .normal {
        font-size: 6vw;
    }
    .gros {
        font-size: 20vw;
        font-family: 'bebas';
    }

    .medium_t {
        font-size: 12vw;
        line-height: 10vw;
        font-family: bebas;
    }

    .non_italic {
        font-style: normal;
    }

    .center {
        padding: 0px 0px;
        text-align: justify;
        text-align-last: center;
    }

    .bannier {
        width: 100%;
    }

    header {
        margin-bottom: -5.5%;
    }
  }

  /* large tablets & laptop styles */

  @media screen and (min-width: 620px) and (max-width: 1200px) {
    .title h2 {
        font-size: 100px;
    }
  }
  /* desktop styles */ 

  @media screen and (min-width: 1200px){
    .title h2 {
        font-size: 110px;
    }

    #banniere_cards {
        background: url(../picture/banniere_naissance_mobile.png);
        background-repeat: no-repeat;
        height: 500px;
    }

    #communautaire {
        text-align: justify;
        text-align-last: center;
        position: relative;
        top: -110px;
        float: right;
        right: 135px;    
    }
    
    #communautaire #hashtag {
        margin-right: 70px;
        position: relative;
        top: 40px;
    }

    #first_part, #on_vend_du_reve{
        padding: 60px 50px;
        margin-top: 50px;
    }

    #btn_twitch {    
        width: 200px;
        height: 100px;
        display: inline-block;
        margin-right: 100px;
        border-radius: 15px;
        background-color: #5f4595;
        line-height: 100px;
        font-size: 40px;
        cursor: pointer;
        font-family: 'california';
    }
    
    #btn_youtube {
        width: 200px;
        height: 100px;
        display: inline-block;
        border-radius: 15px;
        background-color: #e73049;
        line-height: 100px;
        font-size: 40px;
        cursor: pointer;
        font-family: 'california';
    }
    
    #on_vend_du_reve {
        height: 250px;
    }

    #reve_logo {
        margin-top: 10%;
        width: 47%;
    }
    
    #banniere_yugi {
        margin-bottom: 0px;
        height:200px;
        margin-bottom: -20%;
        width: 101%;
    }

    #twitch_yt {
        margin-top: 50px;
        padding: 20px 50px;
    }

    .bannier {
        width: 100%;
    }

    header {
        margin-bottom: -5.7%;
    }

    #carte_joker {
        display: none;
    }

    #banniere_yugi {
    }

    #fleche_bas {
        padding-left: 42%;
        margin-top: 6%;
    }

    #lancement_stream {
        margin-right: 7%;
    }

    #kuriboh {
        display: none;
    }

    #logo_3d {
        margin-bottom: 10%;
    }


    #partie_a_distance {
        margin-left: 7%;
        margin-bottom: 10%;
    }

    #eclair {
        display: none;
    }

    #spectacle_de_discussion {
        margin-left: 29%;
    }

    #main_div {
        border-color: white;
        border-style: solid;
        width: 800px;
        border-width: thick;

    }

    #banniere_cards {
        background-size: 100%;
        margin-bottom: 50px;
    }

    .center {
        padding: 0 0px;
    }

    #texte_problematique {
        margin-bottom: -70px;
    }

    .gros {
        font-size: 135px;
        font-family: 'bebas';
    }

    #les_gars {
        margin-bottom: -45px;
        margin-top: -45px;
    }

    #jcrois_idee {
        padding: 5%;
        margin-top: -32px;
    }

    #btn_twitch, #btn_youtube {    
        display: inline-block;
        border-radius: 5vw;
        font-size: 60px;
        cursor: pointer;
        font-family: 'california';
        width: 30%;
    }

    a {       
        text-decoration: none;
        color: inherit;
        font-style: inherit;
        
    }

    a:hover {
        color: white;
    }

    #reussi {
        margin-top: 10px;
    }

    #objectif {
        margin-top: 23%;
        padding: 5%;
    }

    #logo_3d {
        width: 90%;
    }

    #stream {
        padding: 5%;
    }

    #talkshow {
        text-align: center;
    }

    #lv2_allemand {
        margin-bottom: 63px;
        margin-left: 120px;
        margin-top: -10px;
        }

    #contexte {
        padding: 5%;
    }

    #parenthese {
        margin-bottom: 25px;
    }

    #barre_blanche {
        margin-bottom: 25px;
        width: 100%;
    }

    #talkshow_image {
        width: 90%;
    }

    #banniere_footer {
        width: 100%;
    }

    #equipe_texte {
        width: 100%;
    }

    #reso_socio {
        position: absolute;
        padding-top: 40px;
        padding-left: 40px;
    }

    #texte_video {
        width: 100%;
    }

    #logo_3d, #trio_image {
        width: 100%;
    }

    #il_faut_donc {
        font-size: 32px;
        margin-bottom: 30px;
    }

    #lidee_cest {
        font-size: 32px;
    }

    #parenthese {
        font-size: 32px;
    }

    #ou_pas {
        margin-top: -25px;
    }

    #remote_duel {
        padding: 5%;
    }

    #remote_duel_image {
        width: 100%;
    }

    #ok_jarrete {
        margin-left: 45%;
    }

    #competence_equipe {
        font-size: 48px;
    }


  }