@media screen and (max-width: 850px) {


    .settings {
        position: fixed;
        width: 100%;
        height: 30%;
        bottom: 10px;
        right: 10px;
    }

    .gridboutons {

        width: calc(100% - 20px);
        height: 20%;
        background-color: aqua;
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        bottom: 10px;
        right: 10px;
        border: 1.5px rgb(255, 111, 111) solid;

    }

    .boutons {
        position: relative;
        width: calc(100% / 8);
        height: calc(100% / 2);


    }

    .slider {

        -webkit-appearance: none;
        width: 100%;
        position: relative;


        height: 1.5px;
        background-color: rgb(255, 111, 111);

    }

    .slidershape {
        align-items: center;

        display: flex;
        position: relative;
        margin-top: 15px;
        width: 85%;
        height: 2.5vh;
        right: 0px;
        bottom: 1vh;


    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: rgb(221, 221, 221) 2px solid;
        background: rgb(255, 111, 111);
        cursor: pointer;
    }

    #infoshape {
        font-size: 3vw;
        font-family: Helvetica, sans-serif;
        color: rgb(255, 111, 111);
        padding-right: 36px;
        font-weight: 500;
        position: relative;
        left: 20px;
    }

    #infoface {
        font-size: 3vw;
        font-family: Helvetica, sans-serif;
        color: rgb(255, 111, 111);
        padding-right: 49px;
        font-weight: 500;
        position: relative;
        left: 20px;
    }



    #rangeValue {

        font-size: 3vw;
        font-family: sans-serif;
        color: rgb(255, 111, 111);
        padding-left: 35px;
        font-weight: 500;

    }

    #rangeValue2 {

        font-size: 3vw;
        font-family: sans-serif;
        color: rgb(255, 111, 111);
        padding-left: 35px;
        font-weight: 500;

    }

    .monsters {

        position: fixed;
        width: calc(100% - 20px);
        height: 55%;

        right: 10px;
        top: calc(10% + 20px);
        overflow: hidden;
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
        background-color: rgb(255, 111, 111);
        transition: ease-in-out 0.5s;

    }

    .monsters.showUltraFight {

        position: fixed;
        width: calc(100% - 20px);
        height: calc(45% - 20px);
        right: unset;
        left: 10px;
        top: calc(10% + 20px);
        overflow: hidden;
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
        background-color: rgb(255, 111, 111);
        transition: ease-in-out 0.5s;

    }

    .header {
        width: calc(100% - 20px);
        height: 10%;
        position: fixed;

        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
    }

    #logo {
        height: 5vh;

        position: absolute;
        right: 0px;
        left: unset;
        top: 3.5vh;

        fill: rgb(255, 111, 111);

    }

    .headerText1 {

        left: 10px;
        font-size: 1.2vh;
    }

    .headerText2 {
        top: 1.7vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerText3 {
        top: 3.6vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerText4 {
        top: 5.4vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerText5 {
        top: 7.3vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerultra1 {

        left: 10px;
        font-size: 1.2vh;
    }

    .headerultra2 {
        top: 1.7vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerultra3 {
        top: 3.6vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerultra4 {
        top: 5.4vh;
        left: 10px;
        font-size: 1.2vh;
    }

    .headerultra5 {
        top: 7.3vh;
        left: 10px;
        font-size: 1.2vh;
    }



    .ready {
        background-color: rgb(221, 221, 221);
        border: 1.5px solid rgb(255, 111, 111);
        width: 35%;
        height: 10vw;
        position: absolute;
        right: -1.5px;
        bottom: -1.5px;


        text-align: center;
        color: rgb(255, 111, 111);
        font-family: helvetica;
        font-size: 4vw;
        font-weight: 600;
        padding-top: 2.5vw;

        /*display: block;*/
    }

    .colorsrandom1 {

        width: 12.5%;
        height: 60%;
        background-color: rgb(221, 221, 221);
        border: 1.5px solid rgb(255, 111, 111);
        position: absolute;
        z-index: -10;
        right: 0px;
        cursor: pointer;
        bottom: 15vh;
        top: unset;
    }

    #randompicto {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3vh;
        height: 3vh;
        fill: rgb(255, 111, 111);
    }

    .oops {
        display: none;
    }

    .moreinfo {
        background-color: rgb(221, 221, 221);
        border: 1.5px solid rgb(255, 111, 111);
        width: 35%;
        height: 6vw;
        position: absolute;
        right: -1.5px;


        text-align: center;
        color: rgb(255, 111, 111);
        font-family: helvetica;
        font-size: 2.5vw;
        font-weight: 600;
        padding-top: 1.5vw;

        /*display: block;*/
    }

    .headerrandomvalue {

        position: fixed;
        top: 400px;
        right: 20px;
        font-size: 15px;
        font-family: Helvetica, sans-serif;
        color: rgb(255, 0, 0);
        display: none;
    }


    .faceside {
        height: calc(50% - 10px);
        width: calc(100% - 20px);
        left: -100%;
        border-top: 10px solid rgb(221, 221, 221);
        transition: ease-in-out 0.5s, bottom 0.2s cubic-bezier(0.450, 1.130, 0.610, -0.240), background-color 1s;

    }

    .infoultraman {
        height: 50%;
        width: 100%;

    }

    .infoultraman.showInfo {
        left: 0%;
    }

    .faceside2 {
        position: fixed;
        bottom: 10px;
        right: -100%;
        width: 100%;
        height: calc(45% - 20px);
        background-color: rgb(255, 111, 111);


        transition: ease-in-out 0.5s, bottom 0.2s cubic-bezier(0.450, 1.130, 0.610, -0.240), background-color 1s;
    }

    .faceside2.showUltraFight {

        right: 10px;
        width: calc(100% - 20px);

    }

    .ultraman {
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 10vh - 20px);
        right: 10px;
        bottom: 0px;
        overflow: scroll;
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
        padding: 10px;
        padding-left: 25vw;
        padding-top: 10px;
        background-color: rgb(255, 111, 111);
    }

    .headerinfo {
        width: calc(100% - 20px);
        height: 10%;
        position: fixed;

        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
    }

    .uinfo {
        text-align: left;
        text-indent: -23vw;
        font-family: helvetica;
        font-size: 3vw;
        color: rgb(221, 221, 221);
        text-align: justify;

    }

    .uinfo2 {
        text-align: left;
        padding-top: 10px;
        text-indent: -23vw;
        font-family: helvetica;
        font-size: 3vw;
        color: rgb(221, 221, 221);
        text-align: justify;

    }

    .uinfo3 {
        text-align: left;
        padding-top: 10px;
        text-indent: -23vw;
        font-family: helvetica;
        font-size: 3vw;
        color: rgb(221, 221, 221);
        text-align: justify;

    }

    .uinfo4 {
        text-align: left;
        padding-top: 10px;
        text-indent: -23vw;
        font-family: helvetica;
        font-size: 3vw;
        color: rgb(221, 221, 221);
        text-align: justify;
    }

    .goback {
        background-color: rgb(221, 221, 221);
        border: 1.5px solid rgb(255, 111, 111);
        width: 20%;
        height: 5vw;
        position: absolute;
        right: -1.5px;


        text-align: center;
        color: rgb(255, 111, 111);
        font-family: helvetica;
        font-size: 4vw;
        font-weight: 600;
        padding-top: 0.3vw;

        /*display: block;*/
    }

    .fight {
        position: absolute;
        text-align: center;
        width: 100%;
        font-family: helvetica;
        font-size: 1.5vh;
        color: rgb(255, 111, 111);
        font-weight: bolder;
    }

    .fightinfo {
        position: absolute;
        text-align: center;
        width: 100%;
        top: 1.5vh;
        font-family: helvetica;
        font-size: 1.5vh;
        color: rgb(255, 111, 111);
        font-weight: 400;
    }

    .rightside {
        position: relative;
        font-family: helvetica;
        font-size: 1.5vh;
        padding-right: 10px;
        color: rgb(255, 111, 111);
        text-align: right;
        padding-top: 3.5vh;
        width: 50%;
        height: 100%;
    }

    .leftside {
        position: relative;
        font-family: helvetica;
        font-size: 1.5vh;
        padding-left: 10px;
        color: rgb(255, 111, 111);
        padding-top: 3.5vh;
        width: 50%;
        height: 100%;
    }


    .rightlive {

        position: absolute;
        background-color: rgb(184, 255, 91);

        width: 93%;
        height: 20%;
        bottom: 10px;
        right: 10px;
        transition: width 0.3s ease-in-out;
    }

    .leftlive {
        position: absolute;
        background-color: rgb(184, 255, 91);

        width: 93%;
        height: 20%;
        bottom: 10px;
        left: 10px;
        transition: width 0.3s ease-in-out;
    }








    #b1 {

        background-color: rgb(255, 111, 111);
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;


    }

    #b2 {


        background-color: rgb(89, 0, 0);
        border-bottom: 1.5px rgb(255, 111, 111) solid;


    }

    #b3 {


        background-color: rgb(163, 255, 127);
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
    }

    #b4 {

        background-color: rgb(30, 68, 30);
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;

    }

    #b5 {

        background-color: rgb(255, 246, 113);
        border-bottom: 1.5px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
    }

    #b6 {

        background-color: rgb(123, 117, 50);
        border-bottom: 1.5px rgb(255, 111, 111) solid;

    }

    #b7 {

        background-color: rgb(175, 175, 175);
        border-right: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
        border-bottom: 1.5px rgb(255, 111, 111) solid;
    }

    #b8 {

        background-color: rgb(86, 86, 86);
        border-bottom: 1.5px rgb(255, 111, 111) solid;

    }

    #b9 {

        background-color: rgb(120, 197, 255);
        border-bottom: 0px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;


    }

    #b10 {

        background-color: rgb(43, 74, 89);
        border-bottom: 0px rgb(255, 111, 111) solid;


    }

    #b11 {

        background-color: rgb(255, 212, 142);
        border-bottom: 0px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
    }

    #b12 {

        background-color: rgb(111, 72, 24);
        border-bottom: 0px rgb(255, 111, 111) solid;
        border-right: 1.5px rgb(255, 111, 111) solid;

    }

    #b13 {

        background-color: rgb(191, 139, 221);

        border-right: 1.5px rgb(255, 111, 111) solid;
    }

    #b14 {

        background-color: rgb(78, 47, 97);


    }

    #b15 {

        background-color: rgb(134, 240, 201);
        border-right: 1.5px rgb(255, 111, 111) solid;
        border-left: 1.5px rgb(255, 111, 111) solid;
    }

    #b16 {

        background-color: rgb(32, 69, 56);

    }
}








/* STACY HORN


@media only screen and (max-width: 1300px) { 
     quand la fenêtre fait 1300px ou moins  
    .cell-2:nth-child(3n+3) {
        display: none;
        nth-child(3n+3) 
    }
}

@media only screen and (max-width: 1300px) { 
     quand la fenêtre fait 1300px ou moins  
    .info-1 {
        font-size: 3vw;
        top: 8%;
    }
    
    .info-2 {
        font-size: 3vw;
        bottom: 8%;
    }
    
    .info-3 {
        height: 83.5%;
        bottom: 8.3%;
    }
}

@media only screen and (max-width: 850px) { 
    
    .info-1 {
        font-size: 5vw;
        top: 49%;
        width: 50%;
        left: 3.5%;
    }
    
    .info-2 {
        left: 3.5%;
        font-size: 5vw;
        bottom: 6.5%;
        width: 50%;
    }
    
    .info-3 {
        height: 40%;
        top: 6.8%;
        left: 3.5%;
        
        width: 92.5%;
        
        
    }
}

@media only screen and (max-width: 850px) { 
    .text-footer-left {
        right: 1.5%;
        font-size: 4vw;
    }
    .text-footer-right {
        left: 1.5%;
        font-size: 4vw;
    }

    .header {
        height: 5.5%;
    }

    .footer {
        height: 5.5%;
    }
}

@media only screen and (max-width: 850px) { 
    .text-final{
        padding-left: 7%;
        padding-right: 7%;
        font-size: 63px;
        top: 39%;
    }
}

@media only screen and (max-width: 850px) { 
     .container-3{
        flex-direction: column-reverse;
    } 
   
    .color-head{
         height: 40%; 
        position: fixed;
        top: 8%;
         left: 3.5%; 
        width: 100%;
        
    }

    .bulles{
        
        top: 50%;
        height: 100%;
        bottom: 8%;
        width: 100%;
        left: 3.5%;
        
    }

    .container-3 {
        display: block;
        height: 5000px;
    }

    .zone-vide {
        height: 450px;
    }
  
    
}

 @media only screen and (max-width: 1080px) { 
    .container-3{
        flex-direction: column-reverse;
    }
} 





@media only screen and (max-width: 850px) { 
    
    .bulles{
        height: 5000px;
    }

    
   
    .bulle-1 {
        
        
        display: none;
    }

    .bulle-1-res{
        display: inline;
    }
    
    .bulle-2 {
        
        
        display: none;
    }

    .bulle-2-res{
        display: inline;
    }
    .bulle-3 {
        
        
        display: none;
    }

    .bulle-3-res{
        display: inline;
    }
    .bulle-4 {
        
        
        display: none;
    }

    .bulle-4-res{
        display: inline;
    }
    .bulle-5 {
        
        
        display: none;
    }

    .bulle-5-res{
        display: inline;
    }
    .bulle-6 {
        
        
        display: none;
    }

    .bulle-6-res{
        display: inline;
    }
    .bulle-7 {
        
        
        display: none;
    }

    .bulle-7-res{
        display: inline;
    }
    .bulle-8 {
        
        
        display: none;
    }

    .bulle-8-res{
        display: inline;
    }
    .bulle-9 {
        
        display: none;
    }

    .bulle-9-res{
        display: inline;
    }
    .bulle-10 {
        
        display: none;
    }

    .bulle-10-res{
        display: inline;
    }
    
}



@media only screen and (min-width: 850px) { 
    .cache {
        display: none;
    }
}*/