html{
     /*Pour masquer les barres de scroll*/
  overflow: auto;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
    max-width: 1430px;


}
/*Variables: pour typo, couleurs selec elements */
body{

  /*  --color-1: rgb(193, 97, 97); */
    --width-header: 150px;
}

/* Select all (put at the top of the page) */
*{
    padding:0;
    margin:0;
}

header{
    position: fixed;
    width: 100%;
    margin-left:0px;
    background-color: rgb(126, 126, 81);
    max-width: 1430px;
}
h1 { 
    padding: 30px;
    font-family: spratextendedLight;
    font-size: 2em;
    width: 100%;
    height: 150px;
    color: white;  
}
.zone1{
    background-color: rgb(126, 126, 81);
    margin-top: 0px;
    mix-blend-mode: hue;
}

.fond{
    background-color: rgb(102, 78, 173);
    padding: 0px;
    width: auto;
    height: 900px; 
    animation-name: color2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    overflow:hidden;
  
}

@keyframes color2{
    0%{background-color:rgb(122, 126, 159)}
    50%{background-color:rgb(87, 87, 64)}
    100%{background-color: rgb(111, 116, 160)}
}

.kaiju{  
    top:190px;
    width: 900px;
    margin-right: auto;
    margin-left: 145px;
    margin-bottom: auto;
    position: relative;
    display: flex;
    align-items: center;
    mix-blend-mode: exclusion;;
    filter: drop-shadow(0px 0px 30px rgb(179, 184, 112)) blur(3px);
 }

.rectangle{
    width:100%;
    height: 500px;
    background-color: gray;
    mix-blend-mode: exclusion;
    backdrop-filter: blur(50%);
    overflow: scroll;
}

.bloc{
    width:100%;
    height:900px;
    background-color: rgb(133, 58, 254);
}

.stratigraphie{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    position: relative;
    display: flex;
    align-items: center;
}

.rectangle2{
    width:100%;
    height: 730px;
    background-color: rgb(216, 216, 216);
    /*overflow-y: scroll;
    overflow-x: none;*/
    /*Pour masquer les barres de scroll*/
    overflow: auto;
    mix-blend-mode:luminosity;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
    animation-name: color;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

 @keyframes color{
    0%{background-color:rgba(255, 0, 0, 0.81)}
    100%{background-color:rgb(0, 0, 0)}
}
/* à faire: une animation avec l'opacity pour que l'image apparaisse et disparaisse  */

.bulle2{
    width: 100%;
    filter: grayscale(10) blur(6px);
    mix-blend-mode: color-burn;
    opacity:0.8;
    
}

.Zonegridkaiju{
    display: grid;
    margin-top:0px;
    grid-template-columns:2fr 2fr;
    grid-gap: 0px;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    padding: 0px;
}

.gridkaiju1{
    background-color:rgb(144, 131, 184);
    width: 100%;
    filter:drop-shadow(0px 10px 20px rgb(213, 60, 60));
    animation-name: color;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

 @keyframes color{
    from {background-color: red;}
  to {background-color: yellow;}
}

.godzilla{
    width: auto;
    height: 800px;
    margin-top: 30px;  
    margin-left: 50px;
    mix-blend-mode: color;
    filter: drop-shadow(0px 10px 20px rgb(213, 60, 60));
    opacity:0.5; 
}

.gridkaiju2{
    background-color: rgb(144, 131, 184);
    width: 100%;
    filter:drop-shadow(0px 10px 20px rgb(213, 60, 60));
    animation-name: color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

 @keyframes color{
    0%{background-color:rgba(254, 255, 246, 0.81)}
    30%{background-color:rgb(240, 204, 250)}
    100%{background-color: rgba(255, 160, 160, 0.721)}
}
   
.lava{
    width: auto;
    height: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 50px;
    margin-right: 30px;
    filter:blur(8px) drop-shadow(0px 10px 20px rgb(213, 60, 60));
    mix-blend-mode:multiply;
    opacity: 0.4;

 }

.gridlayout{
    display: grid;
    margin-top:0px;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    grid-gap: 0px;
    grid-auto-rows: minmax(200px, auto);
    grid-auto-flow: row;
    padding: 0px;
}

.zone2 {
    margin-top: 0px;
    width: auto;
    height: 900px;
    background-color: rgb(155, 155, 92);
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
}

.kaijaune{
    width: 400px;
    height: auto;
    margin-top: 0; 
    transition: 6s linear; 
    opacity:0.2;
    mix-blend-mode: saturation;
    filter: drop-shadow(0 10px 20px rgba(255, 0, 217, 0.701));
}
.kaijaune:hover{
opacity:1;
transition: 1s linear; 

}

.zone3{
    margin-top:0px;
    width: auto;
    height: 900px;
    background-color:rgb(102, 78, 173);
}

.cache{
    margin-top:100px;
    width: 400px;
    height: 180px;
    margin-right:50px;
    margin-left:20px;
    background-color:rgb(144, 131, 184);
    filter:blur(10px) ;
    position: absolute;
    z-index: 99;
    mix-blend-mode: exclusion;
} 
.kjaune2{
    width: 400px;
    height: auto;
    margin-top: 280px;  
    margin-left: 20px;
    mix-blend-mode: exclusion;
    filter:blur(0.5px);
    position: relative;
    transition: 6s linear;
    z-index: 1;
}

.kjaune2:hover {
    opacity: 0.3;
    transition: 1s linear;
}

.zone4{
    margin-top:0px;
    width: 500px;
    height: 900px;
    background-color: rgb(144, 131, 184);
}
.bande1{
    margin-top:100px;
    width: 500px;
    height: 700px;
    margin-right:20px;
    background-color:rgb(128, 129, 108);
    position: absolute;
    mix-blend-mode: hue;
    filter:blur(10px);
    animation-name: color3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

 @keyframes color3{
    0%{background-color:rgba(247, 252, 204, 0.81)}
    50%{background-color:rgb(181, 128, 128)}
}
.kjaune3{
    width: 350px;
    height: auto;
    margin-top: 230px; 
    margin-left: 10px;
    margin-right: 20px; 
    mix-blend-mode: saturation;
    animation-name: slidein;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

    @keyframes slidein {
       100%{
           transform: scale(1.2, 1.6);
       } 
    }

.zone5{
    margin-top:0px;
    width: 500px;
    height: 200px;
    background-color: rgb(129, 148, 138);
    mix-blend-mode:color-dodge;
    filter: drop-shadow(0px 10px 20px rgb(213, 60, 60));
    transition: 10s linear;
}

.zone5:hover ~ .zone8 .godzilla2{
    animation: deplacement 10s infinite alternate;
}

@keyframes deplacement {
    100%{
        transform: scale(5, 0.8) scale(1.2, 1.6);
    } 
 }

 h2{
     font-family:spratextendedlight;
     font-size: 40px; 
     margin-top: 50px;
     margin-right: 20px;
     margin-left: 30px;


     color: rgb(0, 255, 102);
     mix-blend-mode: darken;
 }

.zone6{
    margin-top:0px;
    width: auto;
    height: 1200px;
    background-color:rgb(140, 128, 0);
    mix-blend-mode:hard-light;
}

.zone7{
    margin-top:0px;
    width: auto;
    height: 1200px;
    background-color:rgb(140, 128, 0);
    mix-blend-mode:hard-light;
    
}

.zone8{
    margin-top:0px;
    width: auto;
    height: 1200px;
    background-color: rgb(184, 169, 0);
    mix-blend-mode:hard-light;
}
.godzilla2{
    width: 450px;
    height: auto;
    margin-top: 95px; 
    margin-left: 15px;
    margin-right: 20px; 
    mix-blend-mode: exclusion;
}
.godzilla3{
    width: 450px;
    height: auto;
    margin-top: 15px; 
    margin-left: 15px;
    margin-right: 20px;
    animation: effet 7s infinite alternate;
}

@keyframes effet{
    from {mix-blend-mode: saturation; transform: translateX(10px) rotate(5deg) translateY(10px)}
    to { mix-blend-mode:saturation; transform: translateX(20px) rotate(40deg) translateY(30px)}
}
    


.zone9{
    margin-top:0px;
    width: auto;
    height: 900px;
    background-color: rgb(138, 142, 176);
    filter:drop-shadow(0px 10px 20px rgb(116, 54, 216));
    animation: opak 8s infinite alternate;
}

@keyframes opak{
    0% { background-color:rgb(172, 161, 138)}
    30% { background-color:rgb(171, 153, 115)}
    50% { background-color:rgb(131, 168, 107)}
    60% { background-color:rgb(153, 160, 76);}
    70% { background-color:rgb(113, 147, 91);}
    80% { background-color:rgb(98, 126, 79)}
    90% { background-color:rgb(88, 113, 72)}
    100% { background-color:rgb(105, 123, 93)}
}

.fon{
    width: 350px;
    height: 600;
    margin-top: 300px;
    margin-left: 0px;
    margin-bottom: 20px;
    background-color:rgb(131, 131, 99);
    filter:blur(5px) ;
    position: absolute;
    mix-blend-mode: hue;
    filter:drop-shadow(0px 10px 20px rgb(211, 47, 211));
    animation: fon 5s infinite alternate;
}

@keyframes fon{
    from { background-color:rgb(131, 131, 99); }
    to   { background-color:rgb(131, 131, 77); }
   
}


.kjaune4{
    width: 430px;
    height: auto;
    margin-top: 300px;
    margin-left: 20px;
    margin-bottom: 20px;
    mix-blend-mode: exclusion;
}

.kjaune4:hover{
   opacity: 0.3;
}


.zone10{
    margin-top:0px;
    width: auto;
    height: 200px;
    background-color: rgb(103, 111, 176);
    mix-blend-mode: color-burn;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start:1;
    grid-column-end: 3;
}

.zone11{
    margin-top:0px;
    width: auto;
    height: 900px;
    background-color: rgb(169, 161, 74);
    
}
.fondgod{
    width:477px;
    height:auto;
    margin-top: 0px;
    mix-blend-mode: exclusion;

}
.zone12{
    margin-top:0px;
    width: auto;
    height: 900px;
    background-color: rgb(179, 185, 113);
    mix-blend-mode: hue;
}
    


.zone13{
    margin-top:0px;
    width: auto;
    height: 1200px;
    background-color: rgb(160, 174, 199);
    grid-column-start:1;
    grid-column-end:2;
    overflow: hidden;
    animation: feu 5s infinite alternate;
}

 @keyframes feu{
    0%{background-color:rgba(168, 172, 182, 0.81)}
    30%{background-color:rgb(155, 156, 201)}
    100%{background-color: rgba(137, 140, 160, 0.721)}
}
.fume{
    width: auto;
    height: 1200px;
    mix-blend-mode: exclusion;
    filter: blur(0.4)

}

.zone14{
    margin-top:0px;
    width: auto;
    height: 1200px;
    background-color: rgb(82, 82, 120);
    grid-column-start:2;
    grid-column-end:4;
    display: block;
    animation-name: coco;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

 @keyframes coco{
    0%{background-color:rgba(98, 83, 211, 0.81)}
    50%{background-color:rgb(158, 182, 163)}
 }

.godzilla4{
    width: 600px;
    height: auto;
    margin-top: 200px;
    margin-left: 300px;
    mix-blend-mode:exclusion;
    animation: final 10s infinite alternate;
}
@keyframes final{
    from{filter:blur(8px)}
    to {filter:blur(30px)}
}

.godzillafin{
    width: auto;
    height: 600px;
    filter: grayscale(80%);
    margin-right: auto;
    margin-left: auto;
    animation: tour 8s infinite;
}
@keyframes tour{
    from {
        scale: 2;
        transform: scale(2)
    }
    to {
        scale:0;
        transform: scale(0)
    }
}


.box-red{
    background-color: rgb(126, 126, 81);
    width:auto;
    height: 520px;
    
}
h6{
    font-family: spratextendedLight;
    font-size: 60px;
    color: rgb(255, 97, 97);
    margin-left:30px;
    
}
p{ 
    font-family: spratextendedLight;
    font-size: 55px;
    color: rgb(95, 86, 153);
    margin-left:30px;

}
.remerciements{
    
    font-family: spratregular;
    font-size: 25px;
    color: rgb(98, 95, 118);
    margin-left: 10px;
    margin-top: 10px;
}

@font-face{
    font-family:"spratextendedLight";
    src: url(font/Sprat-ExtendedLight.otf);
    font-style: normal;
}
@font-face{
    font-family:"spratregular";
    src: url(font/Sprat-Regular.otf);
    font-style: normal;
}