/* defaults */

html,
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    text-transform: bolder;
}

a :hover {
    z-index: 10000000;
}

.hidden {
    display: none;
}

/* */

* {
    box-sizing: border-box;
}

body.switch-on .infoultraman {
    position: fixed;
    top: 0px;
    left: 50%;
    width: 50%;
    height: 100%;
    background-color: aqua;
    padding: 10px;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: rgb(221, 221, 221);
}

.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;
}

.headerText1 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    font-weight: 600;
    left: calc(50% + 5px);
}

.headerText2 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 1.9vh;
    left: calc(50% + 5px);
}

.headerText3 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 3.9vh;
    left: calc(50% + 5px);
}

.headerText4 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 5.8vh;
    left: calc(50% + 5px);
}

.headerText5 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 7.8vh;
    left: calc(50% + 5px);
}

.headerultra1 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    font-weight: 600;
    left: 9px;
}

.headerultra2 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 1.9vh;
    left: 9px;
}

.headerultra3 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 3.9vh;
    left: 9px;
}

.headerultra4 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 5.8vh;
    left: 9px;
}

.headerultra5 {
    font-size: 1.5vh;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
    position: absolute;
    top: 7.8vh;
    left: 9px;
}

.headerrandomvalue {

    position: fixed;
    top: 90px;
    right: 20px;
    font-size: 15px;
    font-family: Helvetica, sans-serif;
    color: rgb(255, 111, 111);
}

.settings {

    position: fixed;
    width: calc(50% - 15px);
    height: calc(90% - 30px);
    bottom: 10px;

}

.monsters {

    position: fixed;
    width: calc(50% - 15px);
    height: calc(90% - 30px);
    
    right: 10px;
    bottom: 10px;
    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);
    /* height: 0px; */
    transition: ease-in-out 0.5s, bottom 0.2s cubic-bezier(0.450, 1.130, 0.610, -0.240), background-color 1s;

}
.monsters.showUltraFight {

    position: fixed;
    width: calc(50% - 15px);
    height: calc(90% - 30px);
    
    right: calc(50% + 5px);
    bottom: 10px;
    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);
    /* height: 0px; */
    transition: ease-in-out 0.5s, bottom 0.2s cubic-bezier(0.450, 1.130, 0.610, -0.240), background-color 1s;
    cursor: pointer;
}

.damaged {
    bottom: 20px !important;
    background-color: red !important;
}

.face {
    opacity: 0;
}

.shape {


    opacity: 0;

}

.show {
    opacity: 1;
}

/* #shape01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-47%);
    height: 120%;
    width: 120%;
    overflow: hidden;
    mix-blend-mode: difference;
    
} */

.faces {
    position: relative;

    height: 100%;
}

.faces svg {
    position: absolute;
    mix-blend-mode: difference;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.shapes {
    position: absolute;
    width: 100%;

    height: 100%;
}

.shapes svg {
    position: absolute;
    mix-blend-mode: difference;
    height: 100%;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%) scale(1.1, 1.1);


}





#logo {
    height: 90%;
    position: absolute;
    left: 10px;
    top: 3px;
    right: unset;

    fill: rgb(255, 111, 111);

}



/* The slider itself */
.slider {

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


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

}

.slidershape {
    align-items: center;

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

}

#rangeValue {

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

}

#rangeValue2 {

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

}

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

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

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

.gridboutons {

    width: calc(50% - 15px);
    height: 78%;
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 10px;
    left: 10px;
    border: 1.5px rgb(255, 111, 111) solid;
    cursor: pointer;

}




.colorsrandom1 {
    z-index: unset;
    width: 4.5vw;
    height: 4.9vw;
    background-color: rgb(221, 221, 221);
    border: 1.5px solid rgb(255, 111, 111);
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;

}

.colorsrandom1:hover {
    background-color: rgb(255, 111, 111);
    border: 1.5px solid rgb(221, 221, 221);
    border-top: none;
}



.colorsrandom1:hover #randompicto {
    fill: rgb(221, 221, 221);
}

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





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


}

#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;

}

#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: 1.5px rgb(255, 111, 111) solid;
    border-right: 1.5px rgb(255, 111, 111) solid;


}

#b10 {

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


}

#b11 {

    background-color: rgb(255, 212, 142);
    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;
}

#b12 {

    background-color: rgb(111, 72, 24);
    border-bottom: 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);

}

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


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

    /*display: block;*/
}

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


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

    /*display: block;*/
}

.goback:hover {
    background-color: rgb(255, 111, 111);

    color: rgb(221, 221, 221);
    cursor: pointer;
}

/*.monsters:hover .ready{
        display: block;
    }*/

.moreinfo:hover {
    background-color: rgb(255, 111, 111);

    color: rgb(221, 221, 221);
    cursor: pointer;
}

.ready:hover {
    background-color: rgb(255, 111, 111);
    border: 1.5px solid rgb(221, 221, 221);

    color: rgb(221, 221, 221);
    cursor: pointer;
}


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


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

    /*display: block;*/
}

.VS {
    position: absolute;
    font-family: helvetica;
    font-size: 1vw;
    font-style: italic;
    font-weight: 600;
    color: rgb(255, 111, 111);
    bottom: 0px;
    left: 18.5vw;
}

.infoultraman {
    position: fixed;
    top: 0px;
    bottom: unset;
    left: 100%;
    width: 50%;
    height: 100%;
    background-color: rgb(221, 221, 221);
    padding: 10px;
    transition: ease-in-out 0.5s;
}

.infoultraman.showInfo {
    left: 50%;
}


.showmenu {
    left: 50%;
    transition: ease-in-out 1s;
}

.hidemenu {
    left: 100%;
    transition: ease-in-out 1s;
}

.headerinfo {
    width: calc(50% - 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;
}

.ultraman {
    position: absolute;
    width: calc(100% - 20px);
    height: calc(90% - 30px);
    right: 10px;
    bottom: 10px;
    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: 10vh;
    padding-top: 10px;
    background-color: rgb(255, 111, 111);

}

.faceside {
    position: fixed;
    bottom: 10px;
    left: -50%;
    width: calc(50% - 10px);
    height: calc(90% - 30px);
    background-color: rgb(255, 111, 111);

    overflow: hidden;
    transition: left ease-in-out 0.5s;

}

.faceside.showInfo {
    left: 10px;

}

.faceultraman {
    position: relative;

    height: 100%;
}



.shapeultraman {
    position: absolute;
    width: 100%;

    height: 100%;
}

#ultrashape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    /* width: 102%; */
    height: 100%;


}

#ultraface {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 102%; */
    height: 100%;

}







.faceside2 {
    position: fixed;
    bottom: 10px;
    right: -50%;
    width: calc(50% - 15px);
    height: calc(90% - 30px);
    background-color: rgb(255, 111, 111);
    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;
    overflow: hidden;
    transition: ease-in-out 0.5s, bottom 0.2s cubic-bezier(0.450, 1.130, 0.610, -0.240), background-color 1s;
    cursor: pointer;
}


.faceultraman2 {
    position: relative;

    height: 100%;
}



.shapeultraman2 {
    position: absolute;
    width: 100%;

    height: 100%;
}

#ultrashape2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    /* width: 102%; */
    height: 100%;


}

#ultraface2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 102%; */
    height: 100%;

}










.faceside2.showUltraFight {
    
    right: 10px;

    
}



.uinfo {
    text-align: left;
    text-indent: -9.1vh;
    font-family: helvetica;
    font-size: 2vh;
    color: rgb(221, 221, 221);
    text-align: justify;

}

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

}

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

}

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

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

    top: calc(-10% - 10px);
    left: 0px;
    margin: 10px;
    transition: ease-in-out 1s;
    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(221, 221, 221);
    flex-wrap: wrap;
    display: flex;
}

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

.leftside {
    font-family: helvetica;
    font-size: 1.5vw;
    padding-left: 10px;
    color: rgb(255, 111, 111);

    width: 50%;
    height: 100%;
}

.rightlive {

    position: absolute;
    background-color: rgb(16, 230, 20);
    
    width: 48%;
    height: 20%;
    bottom: 10px;
    right: 10px;
    transition: width 0.3s ease-in-out;
}

.leftlive {
    position: absolute;
    background-color: rgb(16, 230, 20);
    
    width: 48%;
    height: 20%;
    bottom: 10px;
    left: 10px;
    transition: width 0.3s ease-in-out;
}

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

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

.final {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -100%;
    left: 0px;
    background-color: rgb(255, 111, 111);
    text-align: center;
    font-family: helvetica;
    font-size: 4.8vh;
    color: rgb(221, 221, 221);
    padding-top: 45vh;
    font-weight: bolder;
    transition: top ease-in-out 2s;
}
.reload {
    
    position: relative;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: helvetica;
    font-size: 3vh;
    color: rgb(221, 221, 221);
    
    font-weight: 400;
    transition: top ease-in-out 2s;
}

.oops {

    left: 60%;
    font-family: helvetica;
    font-size: 2vw;
    font-weight: 600;
    color: rgb(221, 221, 221);
    position: fixed;
    margin-top: 60%;
    mix-blend-mode: difference;
    display: block;

}

/* 
.displayon {
    display: block;
} */