*{
    margin: 0;
    overflow: hidden;
}

body{
    background-color: #000000;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    max-width:500px;
    margin-left: auto;
    margin-right: auto;
    env(safe-area-inset-top);
    env(safe-area-inset-left);
    env(safe-area-inset-right);
    env(safe-area-inset-bottom);
}
.main{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logoBox{
    transition: opacity 1500ms;
    position: absolute;
    background-color: #000000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.conteinerlogo{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}

.logo{
    transition: opacity 400ms;
    position: absolute;
    height: 20vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 50;
}
.startScreen{
    /*display: none;*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 40;
}
img{
    width: 100%;
    height: auto;
    margin:auto;
    opacity: 60%;
}
.startimg{
    position: absolute;
    z-index: 39;
    height: 100%;
}
.form {
    position: absolute;
    margin-top: 40vh;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    z-index: 40;
}
.StarTexte{
    margin: 5px;
    font-family:'Russo One', sans-serif;;
    font-size: 150%;
}
.help{
    color: white;
    text-align: center;
    font-size: 0.6em;
    margin-top: 1px;
    font-family:'Russo One', sans-serif;
}
button{
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    background-color: #000000;
    color: #c2c1c0;
    border-color: #c2962b;
    border-radius: 10px 2px 10px 2px;
    font-size: 1.5em;
    font-family:'Russo One', sans-serif;
    padding: 10px;
    transform: skewX(-15deg);
}
button:active{
    box-shadow: 0px 0px 10px 5px #47AACA inset;
}
input{
    width: 40%;
    margin: auto;
    margin-top: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #9b9b9b78;
    font-size: 2em;
    font-family:'Russo One', sans-serif;
    color: white;
    text-align: center;
    border-radius: 10px 5px 10px 5px;
    transform: skewX(-15deg);
}
.Navigator{
    /*display: none;*/
    position: absolute;
    width: 100%;
    height: 90%;
    background-color: #000000;
    display: flex;
    justify-content: start;
    align-items: center;
    z-index: 30;
    flex-direction: column;
}
.logoNavigator{
    width: 50%;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.FloorsBox{
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.floors {
    perspective: 500px;
    width: 300px;
    height: 340px;
}
.scheme_info{
    position: relative;
    height: 330px;
}

/*floors*/
.base{
    perspective-origin: center top;
    transform-style: preserve-3d;
    position: absolute;
    margin: auto;
}
.f1{
   transition: opacity 500ms, transform 1s, rotate 1s;
    -webkit-transform: rotateX(55deg) translateZ(0px) translateY(-30px) rotateZ(10deg);
    z-index: -10;
    opacity: 0.7;
    animation-duration: 2s;
}
.f2 {
    transition: opacity 500ms, transform 1s, rotate 1s;
    transform: rotateX(55deg) translateZ(25px) translateY(-30px) rotateZ(10deg);
    z-index: -5;
    opacity: 0.7;
    animation-duration: 2500ms;
}
.f3 {
    transition: opacity 500ms, transform 1s, rotate 1s;
    transform: rotateX(55deg) translateZ(50px) translateY(-30px) rotateZ(10deg);
    z-index: 1;
    opacity: 0.7;
    animation-duration: 3000ms;

}
.ice{
    transition: opacity 500ms, transform 1s, rotate 1s;
    transform: rotateX(55deg) translateY(-30px) rotateZ(10deg);
    z-index: -10;
    opacity: 0.7;

}


.arrow{
    position: absolute;
    transform-origin: center;
    width: 7%;
    z-index: 5;
    opacity: 0;
    -webkit-opacity: 0;
    offset-path: path("M206.1,284.7l4.6,10.8c0,0,56.5-29.8,56.5-78.1s-1-168.5-1-168.5L254,48.7");

    animation: ArrowMove 2s linear;

}
.arrowPlane{
    width: 100%;
    height: 100%;
    z-index: 50;
}
.line{
    position: absolute;
    stroke-width:5;
    z-index: 102;

}

.scheme_info {
    position: relative;
    height: 40%;
}

.number {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.str1{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20%;
    opacity: 0;
    -webkit-opacity: 0;
}
.str2{
    display: flex;
    justify-content: center;
    height: 12vh;
    font-size: 7vh;
    font-style: italic;
    opacity: 0;
    -webkit-opacity: 0;
}
.str3{
    position: relative;
    color: #FFFFFF;
    height: 10vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 5px;
}


.up {
    width: 100%;
    height: 100%;
}
.left {
    width: 100%;
    height: 100%;
}
.right {
    width: 100%;
    height: 100%;
}
.textMid{
    font-family: 'Russo One', sans-serif;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.textDow{
    transition: opacity 500ms;
    margin: 5px;
    font-family: 'Russo One', sans-serif;
    font-size: 100%;
}
.buttonRelaod {
    color: black;
    background-color: white;
    width: auto;
    height: auto;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    transform: skewX(-15deg);
    font-size: 1.2em;
    z-index: 5;
}

/*svg*/
.ARst0{fill:#ED1C24;}
.ARst1{fill:url(#SVGID_1_);}
.ARst2{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.ARst3{fill:#DF272D;}
.st0{fill-rule:evenodd;clip-rule:evenodd; fill-opacity:0.902;}
.st1{fill-rule:evenodd;clip-rule:evenodd; fill-opacity:0.6;}
.st2{fill-rule:evenodd;clip-rule:evenodd; fill-opacity:0.302;}




.plst0{fill:none;stroke-width:5;stroke-miterlimit:10;}
.Logost{fill:#FEFEFE;}

.alert{
    position: absolute;
    background-color: #942326;
    z-index: 60;
}

.sectorNumber{
    transition: transform 3s;
    position: absolute;
    color: white;
    margin: auto;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Russo One', sans-serif;
    text-align: center;
    font-size: 220%;
    z-index: 10;
}

#createSector{
    transition: opacity 500ms, transform 500ms;
    animation: sectorm 800ms linear;
    animation-iteration-count:infinite;
    filter: blur(1px);
    opacity: 1;
    -webkit-opacity: 1;
    z-index: 105;
}

.floordown{
    font-size: 30pt;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    flex-direction: column;
    font-family: 'Russo One', sans-serif;
}

.floorup{
    font-size: 30pt;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    flex-direction: column;
    font-family: 'Russo One', sans-serif;
}


/*animation*/
@-webkit-keyframes startIce {
    0%{
        transform: rotateX(55deg) translateY(-30px) translateZ(600px);
    }

}
@-webkit-keyframes starfloor {
    0%{
        transform: rotateX(55deg) translateY(-30px) translateZ(600px) rotateZ(10deg);
    }


}
@-webkit-keyframes sectorm {
    50%{
        opacity: 0.6;
        -webkit-opacity: 0.6;
    }
}


#arrow{
    opacity: 0;
    -webkit-opacity: 0;
    /*offset-anchor: 10px 10px;*/

}

@-webkit-keyframes ArrowMove {
    0% {
        opacity: 1;
        -webkit-opacity: 1;
        offset-distance: 0%;
    }
    100%{
        opacity: 1;
        -webkit-opacity: 1;
    }
}


@media (max-height: 668px){
    .floors {
        perspective: 500px;
        width: 230px;
        height: 270px;
        aspect-ratio: 3/4;
    }
    .sectorNumber{
        transition: transform 3s;
        position: absolute;
        color: white;
        margin: auto;
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Russo One', sans-serif;
        text-align: center;
        font-size: 100%;
        z-index: 10;
    }

}

.downNumber{
    width: 100%;
    text-align: center;
    font-size: 100%;
}
.upNumber{
    width: 100%;
    text-align: center;
    font-size: 100%;
}
.upText{
    font-size: 10pt;
    width: 100%;
    height: 20%;
    text-align: center;
}
.downText{
    font-size: 10pt;
    width: 100%;
    height: 20%;
    text-align: center;
}

.error{

    transition: opacity 1000ms, transform 800ms;
    position: absolute;
    background-color: #242424;
    width: 80%;
    height: 10%;
    max-height: 70px;
    z-index: 100;
    border-radius: 5px 5px 5px 5px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    box-shadow: 5px 5px 10px #000;
    transform: translateY(-300px);
    opacity: 0;
}
.errorText{
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font-family: 'Russo One', sans-serif;
    font-size: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.arrow2{
    z-index: 120;
}