/*******FONTS*IMPORT*****/
/* #ff19a3 #e6c639 */

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

@font-face {
    font-family: CODE Bold;
    src: url(font/CODE_Bold.otf);
}

@font-face {
    font-family: CODE Light;
    src: url(font/CODE_Light.otf);
}

@font-face {
    font-family: Didact Gothic;
    src: url(font/Didact_Gothic/DidactGothic-Regular.ttf);
}

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

/********BODY*******/

html {
  scroll-behavior: smooth;
}

body{
    background-color: #111;

    margin: 0;
    color: #ddd;
    box-shadow: inset 0 0 6rem 4rem black;
    min-height: 100vh;
}

p{
    font-family: Didact Gothic;
}

h1, h2, h3, button, a{
    font-family: CODE Bold;
}

h1{
    border-bottom: solid 1px #aaa;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 5px;
}

h2{
    margin-top: 0px;
}


.class_fr{
    display : block;
}

.class_en{
    display : none;
}

/*******MENU*******/

#menu {
    overflow: hidden;
    background-color: #222;
    font-family: CODE Bold;
    transition: 0.4s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#menu a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    
    text-decoration: none;
    cursor: pointer;
    height: 100%;
}

#menu a:hover {
    border-bottom-color: #e6c639;
}

.button_text{
    transition: 0.4s;
    padding: 15px 15px;
    font-size: 1.4rem;
    border-top: 0.4rem solid #222;
    margin-bottom: 0;
}

#profile_image{
    height: 50px;
    width: auto;
    border-radius: 25px;
    float : left;
    display : block;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5px;
}

.logo{
    float : right;
    display: block;
    width : 40px;
    cursor: pointer;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    opacity: 0.7;
}

.logo:hover{
    opacity: 1;
}

.menulang{
    float: right;
    cursor: pointer;
    margin-left: 20px;
}

.button_not_selected{
    border-bottom: 0.4rem solid #222;
}

.button_selected{
    border-bottom: 0.4rem solid #e6c639;
}

.img_carte{
    height: 80%;
    margin: 10%;
    width: auto;
}



/****************Mediaqueries**********/

/********MAIN***********/
/****centre*le*contenu***/

.maindisplay{
    display: inline-block;
    width: 100%;
    padding-top: 2.5rem; 

}

.menudisplay{
    width: 100%;
}



p{
    font-size: 0.8rem;
}

#menu{
    display : none;
}

#btn_menu{
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 70px;
    height: auto;
    z-index: 10;
}

#sidenav{
    display: block;
    position: fixed;
    height: 100%;
    width: 0;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: #000;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 20px;
    display: inline-block;
}

.sidenav_btn{
    display: inline-block;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    font-family: CODE Bold;
    background-color: #8f7817;
    color: white;
    text-align: center;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
}

.sidenav_top_btn{
    display: inline-block;
    width: 20%;
    font-family: CODE Bold;
    background-color: #8f7817;
    color: white;
    text-align: center;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
}

.side_container{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 20px;
}

#intro_photo{
    display: none;
}

#intro_desc{
    width: 100%;
    height: 100%;
}

.switch{
    display: none;
}
.zone_logos{
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: right;
    bottom: 0;
    right: 0;
    height: auto;

}

.mobile_content{
    display: block;
    padding-top: 3rem;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 3rem;
}
    
.pc_content{
    display: none;
}

.carte{
    width: 40%;
}

.card_more_text{
    display: none;
}

.card_less_text{
    display: block;
    
}

.textecarte p{
    font-size: 1.1rem;
}

.titrecarte h3{
    font-size: 0.85rem;
}

.content::before{
    right: 122%;
}

#cartouche_area{
    width: 100%;
}

.cartouche{
    width: 15%;
}

#console{
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
}

.more_text{
    display: none;
}

iframe{
    width: 40%;
}

h2{
    font-size: 1rem;
}



@media only screen and (min-width: 610px){
    
    p{
        font-size: 0.9rem;
    }
    .titrecarte h3{
        font-size: 1.2rem;
    }
    
    h2{
        font-size: 1.3rem;
    }
}

@media only screen and (min-width: 820px){
    .carte{
        width: 30%;
    }
    .content::before{
        right: 117%;
    }
    .more_text{
        display: block;
    }
    
}

@media only screen and (min-width: 1100px){  
    body{
        height: 100vh;
    }
    
    #menu{
        display : block;
    }
    
    .maindisplay{
        padding-top: 6rem; 
    }
    
    #btn_menu{
        display: none;
    }
    
    #sidenav{
        display : none;
    }
    
    #intro_photo{
        display: block;
    }
    
    #intro_desc{
        float: right;
        width: 100%;
    }
    
    #name, #pres, #pres2, #mail{
        text-align: center;
    }
    
    .switch{
        display: inline-block;
    }
    
    #intro{
        margin-top: 6rem;
    }
    
    .mobile_content{
        display: none;
    }
    
    .pc_content{
        display: block;
    }
    
    .carte{
        width: 25%;
    }
    
    .content::before{
        right: 112%;
    }
    
    #cartouche_area{
        width: 39%;
    }
    
    .cartouche{
        width: 40%;
    }
    
}

@media only screen and (min-width: 1200px){
   p{
        font-size: 1rem;
    } 
    .textecarte p{
        font-size: 1.4rem;
    }
    .titrecarte h3{
        font-size: 1.7rem;
    }
    .card_more_text{
        display: block;
    }
    .card_less_text{
        display: none;
    }
}

@media only screen and (min-width: 1355px){
    
    .maindisplay{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    .textecarte p{
        font-size: 1.7rem;
    }
    .titrecarte h3{
        font-size: 1.9rem;
    }
}

@media only screen and (min-width: 1555px){
    .maindisplay{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
    .titrecarte h3{
        font-size: 2.5rem;
    }
}

@media only screen and (min-width: 1810px){
    .maindisplay{
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
    
}



/*****NEON*EFFECT*****/
.neon{
    
    font-weight: 200;
    color: #fff;


    text-shadow: -0.2rem -0.2rem 1rem #fff,
                0.2rem 0.2rem 1rem #fff,
                0 0 2rem yellow,
                0 0 4rem yellow;
                /*0 0 6rem yellow,
                0 0 8rem yellow,
                0 0 10rem yellow;*/
}

.neon::-moz-selection {
    background-color: #666;
    color: #e6c639;
}

.neon::selection {
    background-color: #666;
    color: #e6c639;
}

.clignotement{
    animation: flicker 3s infinite alternate;     
}

.clignotement2{
    animation: flicker 2.5s infinite alternate;     
}


@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 58%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem yellow,
            0 0 4rem yellow;
          
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
    }    
}

/********PAGE1**********/


#intro{
    position: relative;
    box-sizing: border-box;
    padding: 1.2rem;
    margin-bottom: 2rem;
    background-color: rgb(10,10,10,0.7);
    
}

.photo_container{
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    height: auto;
    border-radius: 50%;
    position: relative;
  overflow: hidden;
}

.intro_photo{
    display : inline;
    width: 100%;
    height: auto;
}

.intro_text{
    position: relative;
    text-align: center;
    font-size: 1rem;
    font-family: PS2P;
    background-color: black;
    padding-top: 2rem;
    padding-bottom: 2rem;

    border-top-color: gery;
    outline: 0.3rem inset grey;
    outline-offset: -0.3rem;
}

.typewriter{
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  width: 0%;
}

.tw1{
    animation: 
    typing1 3.5s steps(40, end);
    animation-fill-mode: forwards;
}

.tw2{
    animation: 
    typing2 3.5s steps(40, end);
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
}

.tw3{
    animation: 
    typing3 4s steps(40, end);
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

.tw4{
    animation: 
    typing2 3.5s steps(40, end);
    animation-delay: 11s;
    animation-fill-mode: forwards;
}

.tw5{
    animation: 
    typing3 3.5s steps(40, end);
    animation-delay: 14s;
    animation-fill-mode: forwards;
}

@keyframes typing1 {
  from { width: 0 }
  to { width: 30% }
}

@keyframes typing2 {
  from { width: 0 }
  to { width: 90% }
}

@keyframes typing3 {
  from { width: 0 }
  to { width: 87% }
}

@keyframes typing4 {
  from { width: 0 }
  to { width: 60% }
}

@keyframes typing5 {
  from { width: 0 }
  to { width: 60% }
}


#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}


#name{
    font-family: CODE Bold;
    font-size: 4rem;

}

#pres, #pres2{
    font-family: CODE Light;
    font-size: 3rem;

}

#mail{
    font-family: Didact Gothic;
    font-size: 2rem;
    
}



 /* The switch - the box around the slider */
.switch {
    float: right;
    position: relative;
    width: 34px;
    height: 60px;
    margin-top: 20px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {

    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #666;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 26px;
    left: 4px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #e6c639;
    box-shadow:
            0 0 .5rem yellow,
            0 0 2rem yellow;    
}

input:checked + .slider:before {
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
}

/***************PAGE2***************/

#skills{
    display: none;
    width: 100%;
    height: auto;
    padding-top: 6rem;
}


.detailed_card{
    display:none;
    z-index: 4;
    position: fixed;
    bottom : 0;
    left: 0;
    right: 0;
    top: 0;
    /* slightly transparent fallback */
    background-color: rgba(0, 0, 0, .7);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .detailed_card{
    background-color: rgba(50, 50, 50, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

.dcard{
    display: block;
    margin-top: 10rem;
    width: 23%;
    margin-left: 38%;
    margin-right: 35%;
    height: 67vh;
    background-image: url(img/card_background.png);
    background-size: 100%;
    border: solid #e6c639;
    border-width : 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.dcard { 
    animation-name: zoom;
    animation-duration: 0.4s;
}
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}


.card_area{
    margin-left: 28%;
    margin-right: 28%;
    width : 44%;
    margin-top: 2rem;
}

.card{
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
    height: auto;
    display: inline-block;
    position: relative;
    
}

.card:hover .img_card{
    box-shadow: 0 0 .5rem yellow, 0 0 2rem yellow;
}

.img_card{
    width: 100%;
    height: auto;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}



.contenucarte{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

.titrecarte{
    position: inline-block;
    height: 7%;
    left: 0;
    right: 0;
    top: 0;
    background-color: #555;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 3%;
    margin-top: 3%;
    margin-left: 10px;
    margin-right: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.titrecarte h3{
    text-align: center;
    margin-bottom: 2%;
    margin-top: 1%;
    
}

.imgcarte{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42%;
}

.textecarte{
    position: inline-block;
    text-align: center;
    
    background-color: #555;
    height: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.textecarte p{
    margin : 0px;
}


/**************PAGE3****************/

#experience{
    padding-top: 6rem;
    display: none;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    
}

#quest_list{
    display: inline-block;
    position: relative;
    width: 42%;
    margin-right: 4%;
    height: auto;
    
}

#quest_selector{
    display: block;

    margin-left: auto;
    margin-right: auto;
}

.logo_selector{
    float : center;
    display: inline-block;
    width : 40px;
    cursor: pointer;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    opacity: 0.5;
}

#quest_selector_text p{
    margin-top: 0px;
    margin-bottom : 10px;
    font-size: 1.2rem;
}

#quest_selector_text2, #quest_selector_text3{
    display: none;
}

.logo_selector:hover{
    opacity: 1;
}

.logo_selector_focus{
    opacity: 1;
    border-bottom: 0.4rem solid #e6c639;
}

#quest_slider{
    overflow-y: scroll;
    height: 70vh;
}

.type_quest{
    font-family: Didact Gothic; 
    font-size : 1.2rem;
    border-bottom: solid 1px #eeeeee;
    margin-bottom: 5px;
}


.button_quest{
    border: 1px solid #121;
    cursor: pointer;
    opacity: 0.7;
    margin-bottom: 10px;
    background-color: #222;
    -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.button_quest h2{
    margin-bottom: 0px;
    margin-top: 10px;
}

.button_quest p{
    margin-top: 0px;
    margin-bottom: 12px;
}

.button_quest:hover{
    border-color: yellow;
    opacity: 1;
}

.quest_focus{
    opacity : 1;
    border-color: yellow;
    box-shadow: 0 0 .3rem yellow, 0 0 0.3rem yellow;
}

.logo_quest{
    float : left;
    display: block;
    width : 40px;
    cursor: pointer;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    opacity: 0.7;
}

#quest_details{
    display: inline-block;
    float: right;
    position: relative;
    width: 46%;
    height: 70vh;
    background-color: #222;
    -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
    padding-left : 2%;
    padding-right: 4%;
    padding-top: 40px;
    padding-bottom: 20px;
    
}

#quest_details h2{
    font-size: 2rem;
    border-bottom: solid 1px #999;
    margin-bottom: 0px;
}

.quest{
    display: none;
}

#quest1{
    display: block;
}


/************CONSOLE*****************/

#games{
    margin-top: 6rem;
    display: none;
    width : 90%;
    margin-left: 5%;
    margin-right: 5%;
}

#cartouche_area{
    display: inline-block;
    width : 20%;
    vertical-align:top;
}

#console_area{
    display: inline-block;
    width: 79%;
}

.anim{
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
}

#nes{
    width : 100%;
    height: auto;
}

#iframe_nes{
    display: none;
    border-radius : 0.5rem;
}

.cartouche{
    opacity: 0.8;
    display: inline-block;
    position: relative;
    
    height: auto;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.img_cartouche{
    width: 100%;
    height: auto;
    
  
}


.cartouche:hover{
    opacity: 1;
    cursor: grab;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

#console_tv{
    display: inline-block;
    float :left;
    width: 60%;
    height: auto;
}

#ecran_wrapper{
    display: inline-block;
    float : left;
    width: 92%;
    height : auto;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    background-color: grey;
    border-radius: 0.5rem;
}

#ecran{
    display: inline-block;
    float : left;
    width: 100%;
    height: 46vh;
    background-color: black;

    border-radius : 0.5rem;
}

#txt_ecran{
    display: inline-block;
    float : left;
    width: 36.5%;
    height: auto;
    background-color: #222222;
    border-radius: 0.5rem;
    margin-left: 1.5%;
    padding-left : 1%;
    padding-right: 1%;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}


.info_g{
    display: none;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom; 20%;
}

.video_g{
    border: none;
    width: 100%;
    height: 46vh;
}

#info_intro{
    margin-top: 4rem;
    text-align: center;
}

#info_intro_m{
    position: block;
    top: 35%;
    left: 10%;
    right: 10%;
    bottom: 20%;
    text-align: center;
}

.game_link{
    background-color: #8f7817;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
    opacity: 0.8;
}


.game_link:hover{
    opacity: 1;
}


/************NAVBAR*****************/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #222; 
  border-radius : 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #555; 
  border-radius : 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #777; 
}