.titre{
    font-size: 5vw;
    color: rgb(0, 0, 0);
    font-family: 'Sinistre-StCaroline';
    grid-column-start: 3;
    grid-row-start: 2;
    justify-self: stretch;
    overflow: scroll;
}


.cercle1{
    display: none;
    grid-column-start: 3;
    grid-row-start: 3;
    justify-self: stretch;
    overflow: scroll;
    font-size: 6vw;
    font-family: "Garamondt";
    font-style: italic;
    color: rgb(6, 6, 46);
    text-decoration: underline overline #FF3028;
    margin-top: 50px;


}

.cercle3{
    display: none;
    grid-column-start: 4;
    grid-row-start: 2;
    justify-self: stretch;
    overflow: scroll;
    font-size: 8vw;
    font-family: "Pissjar Sans";
    color: rgb(255, 153, 0);
    background-image: url('g.png');
    z-index: 99;


}

.cercle4{
    display: none;
    grid-column-start: 3;
    grid-row-start: 2;
    justify-self: stretch;
    overflow: scroll;
    font-size: 4vw;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(231, 231, 231);
    z-index: 99;
    background-image: url('sysyphe.jpg');


}

.cercle5{
    display: none;
    grid-column: 1/ span 3;
    grid-row-start: 3;
    justify-self: stretch;
    overflow: scroll;
    font-size: 5vw;
    font-family: "kaerukaeru-Regular";
    color: rgb(17, 17, 17);
    z-index: 99;
    text-decoration: underline overline #48064e;


}

.cercle6{
    display: none;
    grid-column: 2/ span 4;
    grid-row-start: 1;
    justify-self: stretch;
    overflow: scroll;
    font-size: 5vw;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(250, 0, 0);
    z-index: 99;
    text-decoration: underline rgb(255, 253, 253);


}

.cercle7{
    display: none;
    grid-column: 4/ span 6;
    grid-row-start: 2;
    justify-self: stretch;
    overflow: scroll;
    font-size: 5vw;
    font-family: 'Sinistre-StCaroline';
    color: rgb(0, 0, 0);
    z-index: 99;
    text-shadow: 0 0 30px #FF0000, 0 0 30px #ff000d;
    animation-duration: .60s;
    animation-name: clignoter2;
    animation-iteration-count: infinite;
    transition: none;
    display: none;
}

.cercle8{
    display: none;
    grid-column-start: 4;
    grid-row-start: 2;
    justify-self: stretch;
    overflow: scroll;
    font-size: 5vw;
    font-family: "Pissjar Sans";
    color: rgb(114, 104, 255);
    z-index: 99;
}

.cercle9{
    display: none;
    grid-column-start: 2;
    grid-column-end:6;
    grid-row-start: 1;
    justify-self: stretch;
    overflow: scroll;
    font-size: 10vw;
    font-family: 'Sinistre-StCaroline';
    color: rgb(255, 255, 255);
    z-index: 99;
}

.cercle9:hover{
 text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 
                     0 3px 0 #ccc, 0 4px 0 #ccc, 
                     0 5px 0 #ccc, 0 6px 0 #ccc, 
                     0 7px 0 #ccc, 0 8px 0 #ccc, 
                     0 9px 0 #ccc, 0 10px 0 #ccc, 
                     0 11px 0 #ccc, 0 12px 0 #ccc, 
                     0 20px 30px rgba(0, 0, 0, 0.5); 
}

.gourmandise{
    display: none;
    font-family: 'PT Serif', serif;
    grid-column-start: 3;
    grid-row-start: 3;
    justify-self: stretch;
    overflow: scroll;
    font-size: 4vw;
    color: black;
    padding-top: 50px;
    padding-left: 10px;
}

.colère{
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    grid-column-start: 3;
    grid-row-start: 3;
    justify-self: stretch;
    overflow: scroll;
    font-size: 4vw;
    color: black;
    padding-top: 50px;
    padding-left: 10px;
}


.cantique1{
    font-size: 2vw;
    color: rgb(0, 0, 0);
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;

}

.cantique2{
    font-size: 3vw;
    color: rgb(255, 0, 0);
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    display: none;

}

.cantique3{
    font-size: 2vw;
    color: rgb(255, 0, 0);
    font-family: 'PT Serif', serif;
    font-style: italic;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    display: none;
    z-index: 99;
    background-image: url('marbre.png');

}

.cantique4{
    font-size: 2vw;
    color: rgb(102, 0, 88);
    font-family: 'PT Serif', serif;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    display: none;
    z-index: 99;

}

.cantique5{
    font-size: 2vw;
    color: rgb(0, 0, 0);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 3;
    display: none;
    z-index: 99;

}

.cantique6{
    font-size: 2vw;
    color: rgb(139, 0, 0);
    font-family: 'Mess_Light';
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    display: none;
    z-index: 99;

}

.cantique7{
    font-size: 2vw;
    color: rgb(255, 255, 255);
    font-family: 'Sinistre-StCaroline';
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    display: none;
    z-index: 99;
}

.image1{
    width: 10vw;
    height: 10vw;
    background-image: url('1200px-Aristoteles_Louvre.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-row-start: 3;
}

.grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, auto);
  } 

.elmo{
    width: 40vw;
    height: 30vw;
    justify-self: stretch;
    background-size: cover;
    overflow: scroll;
    background-image: url('elmo.gif');
    z-index: 99;
    grid-column-start: 4;
    grid-row-start: 4;
    background-repeat: no-repeat;
}
.storm{
    width: 40vw;
    height: 30vw;
    justify-self: stretch;
    overflow: scroll;
    z-index: 99;
    grid-column-start: 6;
    grid-row-start: 1;
    display: none;

}
.fond {
    width: 40vw;
    height: 20vw;
    background-image: url('DSC07490.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-row-start: 3;
} 

.image2{
    width: 15vw;
    height: 10vw;
    background-image: url('homère-660x330.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-row-start: 5;
}

.image3{
    width: 20vw;
    height: 15vw;
    background-image: url('athene.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 3;
    grid-row-start: 1;
}

.image4{
    width: 25vw;
    height: 20vw;
    background-image: url('og-socrates.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 6;
    grid-row-start: 2;
    grid-row-end: 4;
}

.image5{
    width: 25vw;
    height: 20vw;
    background-image: url('1695372482_small.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}

.image6{
    width: 100%;
    height:100%;
    background-image: url('unnamed.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    justify-self: stretch;
    overflow: scroll;
    grid-column: 2/ span 4;
    grid-row: 1/ span 3;
    z-index: 99;
}

.image7{
    width: 100%;
    height:100%;
    background-image: url('Domenico_Beccafumi_018.png');
    background-size: cover;
    background-repeat: no-repeat;
    justify-self: stretch;
    overflow: scroll;
    grid-column: 5/ span 6;
    grid-row: 1/ span 4;
    z-index: 99;
}

.image8{
    width: 40vw;
    height: 20vw;
    background-image: url('oliver-reed-vanessa-redgrave-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    display: none;
}

.oldboy{
    width: 40vw;
    height: 20vw;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    z-index: 99;
    display: none;

}

.camera{
    width: 40vw;
    height: 30vw;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    z-index: 99;
    opacity: 0;
    /** border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC0klEQVR4Xu2cS1LEMAwFM3eBPfc/BXu4CxRLeyi6uiQ7YeaxlT9y++nZSYDbkZ9WArfW0TLYEaDNIgjQqwH9eHn7quT0+vmuNnWej/rb9pW1/PRVi/ltsgAdqQRoVZJT/wC9OlDyNJs/Wco8n21v86H27QoNUEIO8dWnqFWcbV9c/l33KLSZqAZaVYDtTxVA4828yJJoPuIfoBOhAJVPalHoBMxeky5f8nOC1sPIgyhOQKtxmp82SHtogI4E5g0MUOnBUWizBy8HShZQ9TQ6lcnzrMfTfHStKpd8gI4vyAN0UkQUKl/ekEW0A7WeQwlSnBZA/SlOnkdxa2l3JR+gf380pA0IULhWRaHy7REprgyUBqCLLXna7njVwuw9Gq9NlNDqQ6W6AZQ/jR+gUPIEkCqQLCIKBcLtCn00T129HlTo6gRsCXa3J4+1Z0SAwvvQAJUSXq7Q7gnk+pY3X70+/ehpS2A5ITlBgEpg1DxAiZCMbwdqr0n0ZCHXu705Abbrw2tT94TbicGE3esLUPldng7lAN0NlEqUSoZ2lMY/O27XhwqlBdkJabyrxe36ArR4aG3/ZbGUfPOOXa2E7T3bCkKXvPWUAI1CBwJRqCyJ7orD13f0kUrmf9gdt+NX21cBB+i0AwFalWSANhM8Gyjd48hzV3solWz3duCTEv2qSYCOBAK0WaIB+t+AUr5VDyVLqsYpf4rreyh5KE0YoPCfv+ypGqABSkU3xLHk1WjHcfesXvU0WwE237l9tYICdCIaoFVJBmgzwdVAKV3yxO5rFc1HHkslXO0/r7f8TamaMB0KASpfhwVo8Y9NyVLs679qyVb7l0uegFgPJYCkYJsP5UcWRvNpD6UBKWEC1K0Yypc8mvpHoeDxUaiV0KMBJQVUS5Asg/hTftR/u4dSwgEKW2YB2fb2ECSF0YZT/yj07Gd52qFnjy9X6LMBDtDmHQ/QZqDf3TEAkfcywyUAAAAASUVORK5CYII=") 28 /  28px / 0 round; **/
    border-image: url('contour.gif') 30 fill / 30px / 30px round; 
    border-style:  solid;
    filter: invert(75%);
    filter: hue-rotate(90);

}


.backsound{
    display: none;
    grid-row-start: 3;
    grid-column: 1/ span 3;
    opacity: 0;
}

.luxure{
    font-family: "Typefesse_Claire-Obscure";
    font-size: 20vw;
    color: fuchsia;
    justify-self: stretch;
    overflow: scroll;
    grid-column: 2/ span 4;
    grid-row: 1/ span 3;
    z-index: 99;
    text-shadow: 0 0 30px #FF0000, 0 0 5px #0000FF;
    animation-duration: .8s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    display: none;
    

}

@keyframes clignoter {
    0%   { opacity:1; }
    40%   {opacity:0; }
    100% { opacity:1; }
  }

@keyframes clignoter2 {
    0%   { text-shadow: 0 0 30px #FF0000, 0 0 30px #ff000d; }
    40%   {text-shadow: 0 0 0px #FF0000, 0 0 0px #ff000d; }
    100% { text-shadow: 0 0 30px #FF0000, 0 0 30px #ff000d; }
  }




.output{
    width: 40vw;
    height: 30vw;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 5;
    grid-row-start: 3;
    z-index: 99;
    visibility: hidden;
}

#canvas{
    width: 40vw;
    height: 30vw;
    justify-self: stretch;
    overflow: scroll;
    grid-column-start: 4;
    grid-row-start: 3;
    display: none;

}

@media screen and (max-width: 1400px) {
    .cercle1 { display: inline-block; }
    .titre { display: none;}
    .cantique1 {display: none;}
    .cantique2 {display: inline-block;}
    .storm{display: inline-block;}
    .luxure{display: inline-block;}

}

@media screen and (max-width: 1250px) {
    .cantique2 {display: none;}
    .cercle1 {display: none;}
    .cercle3 {display: inline-block;}
    .gourmandise {display: inline-block;}
    .storm{display: none;}
    .luxure{display: none;}

}

@media screen and (max-width: 1150px) {
    .cercle3 {display: none;}
    .gourmandise {display: none;}
    .cercle4{display: inline-block;}
    .cantique3{display: inline-block;}

}

@media screen and (max-width: 1050px) {
    .cercle4{display: none;}
    .cantique3{display: none;}
    .cercle5{display: inline-block;}
    .colère{display: inline-block;}
    .cantique4{display: inline-block;}
    .oldboy {display: inline-block;}

}

@media screen and (max-width: 950px) {
    .cercle5{display: none;}
    .colère{display: none;}
    .cantique4{display: none;}
    .oldboy {display: none;}
    .cercle6{display: inline-block;}
    .cantique5{display: inline-block;}

}

@media screen and (max-width: 850px) {
    .cercle6{display: none;}
    .cantique5{display: none;}
    .cercle7{display: inline-block;}
    .cantique6{display: inline-block;}



}

@media screen and (max-width: 750px) {
    .cercle7{display: none;}
    .cantique6{display: none;}
    .cercle8{display: inline-block;}
    .cantique7{display: inline-block;}
}

@media screen and (max-width: 600px) {
    .cercle8{display: none;}
    .cantique7{display: none;}
    .cercle9{display: inline-block;}
    article{background-color: red;}
}


@media screen and (max-width:1400px) {
    .image2{
        background-image: url('F5_tornado_Elie_Manitoba_2007.jpg')
        

    }
    .fond{
        background-image: url('58e4992fcd70812a653cb213.jpg')
    }
    .image6{
        background-image: url('luxure.png');
    }

    .image7{
        background-image:url('ventsahara.png')
    }

    .image1{
        background-image:url('b1ffcf0ee9925fbf9ef694ae96776695.jpg')
    }

    .image3{
        background-image:url('arbre-qui-penche.jpg')
    }

    .image8{
        display: inline-block;
    }
    .image4{
        background-image: url('1378639_backdrop_scale_1280xauto.jpg');
    }
    .image5{
        background-image: url('les-garcons-sauvages-4.jpg');
    }

}


@media screen and (max-width:1250px) {
    .image2{
        background-image: url('gourmandise1.png')
        
    }
    .fond{
        background-image: url('348eb28634d64d8f7b1993dded5e9.jpg')
    }
    .image6{
        background-image: url('rooney.png');
        background-size: contain ;
    }

    .image7{
        background-image:url('jacquescallot.png')
    }

    .image1{
        display: none;
    }

    .image3{
        background-image:url('gargantua.jpg')
    }

    .image4{
        background-image: url('Nobuyoshi-Araki-The-Banquet-1993-c-Nobuyoshi-Araki-Courtesy-Taka-Ishii-Gallery-Tokyo.jpg');
    }
    .image8{
        background-image: url('araki2.jpg')
    }
    .image5{
        background-image:url('se7en-david-fincher-1995-L-3.jpeg')
    }
    .elmo{
        margin-top:2vh;
    }

}

@media screen and (max-width:1150px) {
    .image2{
        background-image: url('avariceluxure.jpg')
        
    }
    .fond{
        background-image: url('ortexture.jpg')
    }
    .image6{
        background-image: url('avaretribal.png');
    }

    .image7{
        background-image:url('texture-roche-rouge_64049-154.jpg');
        z-index: 0;
    
    }

    .image1{
        background-image: url('Vertu.cathedrale.Sens.2.png');
    }

    .image3{
        background-image:url('Vertu.cathedrale.Sens.2.png')
    }

    .image4{
        background-image: url('220px-Avare.jpg');
        z-index: 99;
    }
    .image8{
        display: none;
    }
    .image5{
        background-image:url('pecheavarice.jpeg')
    }

}

@media screen and (max-width:1050px) {
    .image2{
        background-image: url('morsure-de-chien.jpg')
        
    }
    .fond{
        background-image: url('tempetefleuve.jpg');
        z-index: 99;
    }
    .image6{
        background-image: url('carcasse.png');
    }

    .image7{
        background-image:url('chaire.jpg');
        z-index: 99;
    
    }

    .image1{
        background-image: url('Vertu.cathedrale.Sens.2.png');
    }

    .image3{
        background-image:url('styx-patinir-hugues-dufour-582-430-philharmonique-de-Radio-France-creation.gif')
    }

    .image4{
        background-image: url('220px-Avare.jpg');
        z-index: 0;
    }
    .image8{
        display: none;
    }
    .image5{
        background-image:url('innocent.jpg')
    }

}

@media screen and (max-width:950px) {
    .image2{
        background-image: url('morsure-de-chien.jpg')
        
    }
    .fond{
        background-image: url('838_1280px-inquisition.jpg');
        z-index: 99;
    }
    .image6{
        background-image: url('exorcist.gif');
    }

    .image7{
        background-image:url('heretique.png');
        z-index: 99;
    
    }

    .image1{
        background-image: url('Vertu.cathedrale.Sens.2.png');
    }

    .image3{
        background-image:url('styx-patinir-hugues-dufour-582-430-philharmonique-de-Radio-France-creation.gif')
    }

    .image4{
        background-image: url('antéchrist.jpg');
        z-index: 0;
    }
    .image8{
        display: none;
    }
    .image5{
        background-image:url('PeOERmLCdOPFuTXLQ2swHjKuwfQ.jpg')
    }

}

@media screen and (max-width:850px) {
    .image2{
        background-image: url('morsure-de-chien.jpg')
        
    }
    .fond{
        background-image: url('killbill.jpg');
        z-index: 99;
    }
    .image6{
        background-image: url('blood.gif');
        z-index: 0;
    }

    .image7{
        background-image:url('phantom.png');
        z-index: 99;
    
    }

    .image1{
        background-image: url('Vertu.cathedrale.Sens.2.png');
    }

    .image3{
        background-image:url('Pourquoi-la-riviere-Daldykan-est-elle-devenue-rouge-sang.jpg');
        z-index: 99;
    }

    .image4{
        background-image: url('antéchrist.jpg');
        z-index: 0;
    }
    .image8{
        display: none;
    }
    .image5{
        background-image:url('blooddrop.gif')
    }

}

@media screen and (max-width:750px) {
    .image2{
        background-image: url('morsure-de-chien.jpg')
        
    }
    .fond{
        background-image: url('5c93754d2400003500c7c87d.jpeg');
        z-index: 99;
    }
    .image6{
        background-image: url('patrick.gif');
        z-index: 0;
    }

    .image7{
        background-image:url('nicosarko.png');
        z-index: 99;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    
    }

    .image7:hover{
        animation-play-state: paused;
    }


    .image1{
        background-image: url('Vertu.cathedrale.Sens.2.png');
    }

    .image3{
        background-image:url('Pourquoi-la-riviere-Daldykan-est-elle-devenue-rouge-sang.jpg');
        z-index: 0;
    }

    .image4{
        background-image: url('antéchrist.jpg');
        z-index: 0;
    }
    .image8{
        display: none;
    }
    .image5{
        background-image:url('thief.gif')
    }

}

@media screen and (max-width:600px) {
    .image2{
        display: none;
        
    }
    .fond{
        display: none;
    }
    .image6{
        background-image: url('devil.gif');
        z-index: 0;
    }

    .image7{
        display: none;
    
    }

    .image1{
        display: none;
    }

    .image3{
        display: none;
    }

    .image4{
        display: none;
    }
    .image8{
        display: none;
    }
    .image5{
        display: none;
    }
    .camera{
        opacity: 1;
    }

    .backsound{
        display: inline-block;
    }

}

@font-face {
    font-family: "Sinistre-StCaroline";
    src: url("Sinistre-StCaroline.woff2") format("woff2"),
         url("Sinistre-StCaroline.woff") format("woff");
  }

@font-face {
    font-family: "Garamondt";
    src: url("Garamondt-Italic.woff") format("woff"),
         url("Garamondt-Regular.woff") format("woff");
  }

@font-face {
    font-family: "Typefesse_Claire-Obscure";
    src: url("Typefesse_Claire-Obscure.woff") format("woff"),
         url("Typefesse_Claire-Obscure.woff2") format("woff2");
  }
  @font-face {
    font-family: "Pissjar Sans";
    src: url("Pissjar Sans.ttf") format("truetype");
  }

  @font-face {
    font-family: "kaerukaeru-Regular";
    src: url("kaerukaeru-Regular.woff") format("woff"),
         url("kaerukaeru-Regular.woff2") format("woff2");
  }

@font-face {
    font-family: 'Mess_Light';
    src:    url('Mess-Light_web.eot');
    src:    url('Mess-Light_web.eot?#iefix') format('embedded-opentype'),
            url('Mess-Light_web.woff') format('woff'),
            url('Mess-Light_web.woff2') format('woff2'),
            url('Mess-Light_web.ttf') format('truetype'),
            url('Mess-Light_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@keyframes move {
    0% { 
      offset-distance: 0%; /* je commence au début du trajet */
    }
    100% { 
      offset-distance: 100%; /* je finis à la fin du trajet */
    }
  }