@font-face {
    font-family: pixel1;
    src: url("Alkhemikal.ttf");
}
@font-face {
    font-family: pixelout;
    src: url("pixelout.ttf");
}
@font-face {
    font-family: acidic;
    src: url("Acidic.ttf");
}
@font-face {
    font-family: schizoid;
    src: url("Schizoid.otf");
}
@font-face {
    font-family: aberatn;
    src: url("aberatn.ttf");
}
 @font-face {
    font-family: quiff;
    src: url("Quiff.ttf");
}

 body {
	
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://i.postimg.cc/pXkW8cpQ/8bbb22de9f93949969f2ebb467d5b211.jpg');
	background-size:100vh;
 	font-family: pixel1;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow-x: hidden;
    
    height: auto;
    gap:0px;
     }

/* tous les éléments de texte */


    p{

        color: white;
        font-size:20px;
        text-align: justify;
        text-shadow: 0px 0px 40px , 0px 0px 40px ;
        z-index:2;
    }

    .horodatage{
        color: lightgray;
        font-size: 20px;
        float: top;
        margin-right: 5px;
        margin-bottom: 0px;

    }

    .titre{
        color:white;
        text-shadow: 0px 0px 10px ,0px 0px 10px;
        text-align: center;
        -webkit-text-stroke:0px black;
        font-size:30px;
        
        flex-shrink: 1;
        font-family:quiff;
         letter-spacing: 3px;
         transform: scaleY(2.0)scalex(1.5);
         margin: 35px;
         width: 100%;

    }

     #grandtitre {
        font-family:quiff;
        font-size: 80px;
        transform: scalex(1.5) scaleY(1.8);

        text-shadow: 0px 0px 10px, 0px 0px 10px ;
        letter-spacing: 20px;
         -webkit-text-stroke:0px white;
         text-align: center;





     }

     #legende{

        text-justify: justify;
        height:350px;
        

     }
     a{
        color: grey;



     }
     a:hover{
        color: white;

     }



/* toutes les boxs + fond noir */

    div.fondnoir{
        background-color: black;
        outline: 2px ridge black;
        padding: 15px;
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 1200px;
        flex-grow:0;
        flex-wrap: wrap;
        border-radius:0px;
        border: 20px solid transparent;
        border-image: url("border1.png") 35% round ;
        border-top: 0px;
        outline: 0px;
        box-shadow: 0px 0px 30px black,0px 0px 30px ;
        gap:15px;

        



    }

    div.box{
         background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) ), url('https://i.postimg.cc/4d0TSSRh/96a936b8dc6b0bf07d2525efcf2b2a4b.jpg');
        background-size:cover;
       
        padding-left: 10px;
        padding-right: 10px;
        justify-items: center;
        border-radius: 0px;
        text-align: start;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 0;
        border: 5px solid transparent;
        border-image: url("border2.png") 35% round ;





     }

    #box1{
        height: 500px;
        width:300px; 

     }

    #box2{
        height: 500px;
        max-width:500px;

     }
    #box3{
        height: 500px;
        width: 300px;
        padding: 0px;
        overflow-x: hidden;
     }

    #boxtitre{
        height: 100px;
        justify-content: flex-start;
        align-content: center;
        margin-bottom: 0px;
        border: 20px solid transparent;
        border-image: url("border1.png") 35% round ;
        z-index: 2;
         flex-wrap: wrap;
         margin-top: 20px;
       
     }

    #box-3-interieur{
        margin: 0px;
        padding: 10px;
        width: 95%;
       border-top: 0px;
       border-left:0px;
       border-right:0px ;
       outline: 0px;
       background: rgba(0, 0, 0, 0.0);
       left: 0px;
       overflow-y: auto;
       border-bottom: 3px ridge ghostwhite;
       
       

     }

     #box4{
        text-align: left;
        width: 100%;
        height: 500px;
       
        flex-basis: 15%;






     }
      #box5{

        width: 100%;
        height: 500px;
        text-align: left;
        flex-wrap: nowrap;
        flex-basis: 75%;
        flex-direction:0;
        flex-wrap: nowrap;
          




     }

/* scrollbar des box */


    ::-webkit-scrollbar {

        width: 5px;
        
    }

    ::-webkit-scrollbar-track {
     background: black;

    }

    ::-webkit-scrollbar-thumb {
     background: ghostwhite;
}

/* toutes les images/fichiers */

    .image{
        max-width: 100%;
        margin:3px;
        border: 3px ridge ghostwhite;
        align-content: left;
        

    }
     
     .blinkie{
        width: 50%;
        

     }

    .sticker  {
        max-height: 100%;
        
        position: absolute;

    }

     #ben10{
        transform: translate() scale(1);
        z-index: 3;
       -webkit-filter: drop-shadow(0px 0px 15px ghostwhite);
      filter: drop-shadow(0px 0px 30px ghostwhite);
      position: relative;
     }
     #nuke  {
        transform: translate(110px,-300px);

     }

     #arrière-plan-sticker-sigil {
        display: flex;
        position: absolute;
        width: 100vw;
        height: 100vh;
        justify-content: flex-start;
        top: 0;
        z-index:-1;
        
     }
      #pp{

    width: 290px;
    justify-content: center;


     }

     .artwork{

       height:70%;
       border: 3px ridge ghostwhite;
       float: left;
       margin: 5px;


     }