/* https://colorhunt.co/palette/1e201e3c3d37697565ecdfcc */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
/* weight 300 */

:root{
    --errColor: hsl(340, 100%, 50%);
    --sucColor: hsl(167, 100%, 50%);
    --bgColor: #FCFAF1;
    --txtColor: hsl(0, 0%, 20%);
    --farsiColor: hsla(0, 0%, 20%, 0.5);
    --muteColor: hsla(0, 0%, 20%, 0.3);
    --shadowColor: hsl(0, 0%, 40%);
    --riazi : hsl(60, 100%, 80%);
    --tajrobi: hsl(195, 100%, 76%);
}

.logoImg{
    margin: 0 0;
    width: 140px;
    height: 140px;

    position: relative;
    top: -2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle{
    position: absolute;
    /* border-radius: 50%; */
    filter: drop-shadow(0 0 10px #333333);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    box-sizing: border-box;
}
.green{
    width: 140px;
    height: 140px;
    border: none;

    position: relative;
    top: 0.3rem;
    left: -.5rem;
    transform: rotate(90deg);

    background-image: url('');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;    

    animation: triRotate 1s cubic-bezier(0.19,1.00,0.22,1.00), opa 1s ease-out;
}
@keyframes triRotate {
    from{
        width: 100px;
        height: 100px;
        top: .4rem;
        left: .2rem;
        transform: rotate(0deg);
    }
    to{
        width: 140px;
        height: 140px;
        top: 0.3rem;
        left: -.55rem;
        transform: rotate(90deg);
    }
}
.blue{
    width: 40px;
    height: 40px;
    border: none;

    background-image: url('');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.red{
    width: 15px;
    height: 15px;
    border: none;

    background-image: url('');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.tamumerHolder{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 1rem 0;
    border-radius: 10px;
    transition: 0.2s;
    box-shadow: 0 0 10px #000000;
    padding: 1rem 0;
}
.tamumerHolder:hover, .tamumerHolder:focus{
    box-shadow: 0 0 30px hsl(167, 100%, 50%);
    .tamumKardam{
        color: hsl(167, 20%, 50%);
    }
}
.tamumKardam{
    transition: 0.2s;
    font-size: 1.5rem;
    font-weight: 800;

    color: var(--txtColor);
}
.tamumKardam:hover, .tamumKardam:focus{
    text-shadow: 0 0 0px ;
}

.ong{
    width: 100%;
    
    display: flex;
    flex-direction: column;
}
.hesabHolder{
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    margin: 1rem 0;
}
.tamumKardamX{
    transition: 0.2s;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
    
    color: var(--txtColor);
    box-shadow: 0 0 10px 0 var(--shadowColor);
    border-radius: 10px;
    padding: 1rem;
    margin: 1.5rem;

    text-align: center;
}
.tamumKardamX:hover, .tamumKardamX:focus{
    box-shadow: 0 0 0 0;
    .pSuc{
        text-shadow: 0 0 2px var(--sucColor);
    }
}
@media (width<1000px) {
    /* .tamumKardamX{
        font-size: 0.5rem;
    } */
}

.off{
    color: var(--muteColor);
    box-shadow: 0 0 10px 0 var(--muteColor);
    border-radius: 10px;
    padding: 1rem;
}

.off:hover, .off:focus{
    color: var(--muteColor);
    text-shadow: 0 0 0px;
    box-shadow: 0 0 10px 0 var(--muteColor);
}

.glassBack{
    display: flex;
    flex-direction: column;
    align-items: center;

    align-self: center;
    width: 70%;
    height: 80%;
    justify-self: center;
    background: rgba(252, 250, 241, 0.16);
    border-radius: 16px;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);

    animation: opa 1s ease, glassIntro 2s ease, glassIntroMover 2s ease-in-out, glassMover 10s ease infinite alternate;

    z-index: -10;

    transition: 0.2s ease;
}
@keyframes glassIntro {
    from{
        opacity: 0;
        position: relative;
        bottom: 1rem;
    }
    to{
        opacity: 1;
        position: relative;
        bottom: 0;
    }
}
@keyframes glassIntroMover {
    0%{
        transform: rotate3d(0, 0, 0, 0deg);
    }
    50%{
        transform: rotate3d(1, 0, 0, 1deg);
    }
    100%{
        transform: rotate3d(-1, 0, 0, 0deg);
    }
}
@keyframes glassMover {
    0%{
        transform: rotate3d(0, 0, 0, 0deg);
    }
    50%{
        transform: rotate3d(1, 0, 0, 2deg);
    }
    100%{
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes opa {
    from{
        opacity: 0;
    }
    to{
        opacity: 100%;
    }
}


body{
    display: flex;
    justify-content: center;
    align-items: flex-start;

    min-height: 100vh;
    width: 100%;
    overflow: hidden;

    font-family: Orbitron, "IBM Plex Sans Arabic";
    background-color: var(--bgColor);
    
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 100%);

    color: var(--txtColor);
    letter-spacing: 2px;
    perspective: 30rem;

    transition: 0.2s ease;
}
@keyframes starter {
    from{
        position: relative;
        opacity: 0;
        top: 1rem;
    }
    to{
        position: relative;
        opacity: 1;
        top: 0;
    }
}
a{
    text-decoration: none;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    color: #ECDFCC;

    transition: 0.1s linear;
}
a:hover, a:focus{
    text-shadow: 0 0 0px #ECDFCC;
}
/* @starting-style{
    .title{
        opacity: 0;
        transform: translateY(-100px) ;
    }
    .titleW{
        opacity: 0;
    }
} */
@keyframes startTitle {
    0%{
        opacity: 0;
        top: -10px;
    }
    100%{
        opacity: 100%;
        top: 0px;
    }
}
.topRow{
    display: grid;
    width: 90%;
    grid-template-columns: 10% 80% 10%;
    justify-self: center;
    align-items: center;
}
.exitHolder{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.exitA{
    position: relative;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 600;
    text-align: center;
    
    text-shadow: 0 0 0px var(--errColor);
    font-weight: 100;
    color: var(--errColor);
    
    font-size: 0.8rem;

}
.mother{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 0 8px 0 var(--shadowColor);
    width: 80%;
    justify-self: center;
    justify-content: center;
    align-items: center;

    padding: 0 1rem 1rem 1rem;

    z-index: 0;
}
.topG{
    background: rgba(252, 250, 241, 0.16);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
    animation: topGIntro 2s;
}
@keyframes topGIntro {
    from{
        opacity: 0;
        position: relative;
        bottom: 100rem;
    }
    to{
        opacity: 1;
        position: relative;
        bottom: 0rem;
    }
}
.umadePlate{
    display: flex;
    flex-direction: column;
    width: 95%;
    border-radius: 10px;
    justify-content: center;
    align-items: center;

    padding: 0 0.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px var(--shadowColor);
}
.umadeTop{
    height: 10%;
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 1px, 1px 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 1px hsla(0, 0%, 0%, 0.2), -1px 0 1px hsla(0, 0%, 0%, 0.2), 0px -1px 1px hsla(0, 0%, 0%, 0.2);
    border-bottom: 1px solid var(--txtColor);
}
.midPart{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.umadTime{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    justify-self: flex-start;

    border-radius: 10px;
}
/* POSTITION NOTE */
.ruzHolder{
    position: relative;
    top: 2.3rem;
}
.ruz{
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
}
.timeHolder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    background: rgba(0, 0, 0, 0.01);
    justify-self: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8.1px);
    -webkit-backdrop-filter: blur(8.1px);
    border: 1px solid hsl(0, 0%, 20%, 0.1);
    z-index: -1;
    
    border-radius: 10px;

    padding: 0 0.5rem;
}
/* POSITION NOTE */
.umadeTime{
    position: relative;
    top: 1rem;
    font-size: 0.9rem;
}
.umadeFTime{
    font-size: 0.9rem;

}
.umadeAntiSpecial{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: end;
}
.umadeSubject{
    text-align: end;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.umadeMab{
    text-align: end;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.botPart{
    margin-top: 0.4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.umadeDesc{
    letter-spacing: 1px;
    font-size: 0.7rem;
    text-align: center;
}
.tamumerHolder{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 1rem 0;
    border-radius: 10px;
    transition: 0.2s;
    box-shadow: 0 0 10px #000000;
    padding: 1rem 0;
}
.tamumerHolder:hover, .tamumerHolder:focus{
    box-shadow: 0 0 30px hsl(167, 100%, 50%);
    .tamumKardam{
        color: hsl(167, 20%, 50%);
    }
}
.tamumKardam{
    transition: 0.2s;
    font-size: 1.5rem;
    font-weight: 800;

    color: var(--txtColor);
}
.tamumKardam:hover, .tamumKardam:focus{
    text-shadow: 0 0 0px ;
}
.aybaba{
    background-color: #000000;
}



































.ann{
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.annTxt{
    text-shadow: 0 0 1px var(--shadowColor);
}
.topName{
    text-align: center;
    text-shadow: 0 0 5px var(--shadowColor);
    position: relative;
    top: -5rem;

    animation: opa 1s ease-in-out;
}
.ai{
    animation: ai 4s ease-in-out 2 alternate;
    animation-delay: 0.5s;
}
@keyframes ai {
    from{
        text-shadow: 0 0 5px var(--shadowColor);
        font-weight: 700;
    }
    to{
        text-shadow: 0 0 2px var(--shadowColor);
        font-weight: 200;
    }
}
.topHolder{
    background: rgba(236, 223, 204, 0.1);
    justify-self: center;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8.1px);
    -webkit-backdrop-filter: blur(8.1px);
    border: 1px solid rgba(236, 223, 204, 0.1);
    z-index: 2;

    width: 70%;
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem;

    margin-bottom: 4rem;

    animation: text-moveAnim 20s ease-in-out infinite alternate;
}
.codeShower{
    color: rgba(236, 223, 204, 0.6);
    margin-bottom: 2rem;
}
.infoHolder{
    display: flex;
    flex-direction: column;
}
.info{
    margin-bottom: 0;
}
.routeHolder{
    display: flex;
    flex-direction: column;
    width: 80%;
    justify-self: center;
    justify-content: center;
    align-items: center;

    box-shadow: 0 0 20px 0 #000000;
    padding: 1rem;
    border-radius: 30px;
}
.uppRow{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.taskHolder{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* border: 1px solid rgba(236, 223, 204, 0.4); */
    border-radius: 20px;
    
}
.farsi{
    position: relative;
    bottom: 1rem;
    color: var(--farsiColor);
    animation: startFarsi 3s ease-in-out;
    letter-spacing: 0;
}
@keyframes startFarsi {
    from{
        opacity: 0;
        bottom: 1rem;
    }
    to{
        opacity: 1;
        bottom: 2rem;
    }
}
@keyframes text-shadowAnim {
    0%{
        text-shadow: 0 0 30px rgba(236, 223, 204, 0.5);
    }
    100%{
        text-shadow: 0 0 60px rgba(236, 223, 204, 0.5);
    }
}
@keyframes text-moveAnim {
    0%{
        transform: rotate3d(0, 0, 0, 10deg);
    }
    25%{
        transform: rotate3d(0, 1, 0, 10deg);

    }
    50%{
        transform: rotate3d(0, 1, 0, -10deg);
    }
    75%{
        transform: rotate3d(0, 1, 0, -10deg);
    }
    100%{
        transform: rotate3d(0, 1, 0, 10deg);
    }
}

@keyframes startTitleW {
    0%{
        opacity: 0;
        top: 40px;
    }
    100%{
        opacity: 100%;
        top: 0px;
    }
}

@keyframes startErr {
    from{
        opacity: 0;
        text-shadow: 0 0 30px rgba(255, 0, 0, 1);
    }
    to{
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 0, 0, 0);
    }
}
@keyframes errAnim {
    to{
        color: rgba(255, 0, 0, 0.2);
    }
}

/* .YB{
    z-index: -1;
    position: relative;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    filter: blur(100px);
    background-color: hsla(60, 100%, 90%, 0.5);
    animation: ybgo 20s ease-in-out infinite alternate
}
@keyframes ybgo {
    0%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(50vw, -50vh);
    }
    100%{
        transform: translate(70vw, 0vh);
    }
}
.BB{
    z-index: -1;
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    filter: blur(100px);
    background-color: hsla(180, 100%, 90%, 0.5);
    animation: ball 20s ease-in-out infinite alternate
}
@keyframes ball {
    0%{
        transform: translate(0vw, 0vw);
    }
    50%{
        transform: translate(50vw, -50vh);
    }
    100%{
        transform: translate(0vw, 0vh);
    }
} */


.tip{
    letter-spacing: 0px;
    animation: tipS 5s ease-in-out;
    transition: 1s ease-in;
    display: flex;
    justify-self: center;
    text-align: center;
    align-self: center;
    color: var(--farsiColor);
    text-shadow: 0 0 1px var(--farsiColor);
    font-weight: 300;
}
.pSuc{
    transition: 0.2s ease;

    font-size: 1rem;
    font-weight: 400;
    text-shadow: 0 0 1px var(--sucColor);
    color: hsla(167, 100%, 40%, 0.4);
    margin-top: 0;
    margin-bottom: 0;

    animation: bump 0.4s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1);
}
@keyframes bump{
    from{
        position: relative;
        opacity: 0;
        top: 1rem;
    }
    to{
        position: relative;
        opacity: 1;
        top: 0;
    }
}
@media (1000px<width){
    .glassBack{
        animation: none;
    }
}
@media (width<=1000px){
    .glassBack{
        margin-top: 5vh;
        width: 90%;
        height: 70%;

        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: blur(11.5px);
        
        animation: glassIntro 2s ease;
    }
    .timeHolder{
        backdrop-filter: none;
        -webkit-backdrop-filter: blur(11.5px);
    }
    .title{
        position: relative;
        top: 0rem;
        font-size: 1.5rem;
/* OPTIMIZE        animation: startTitlePhone 2s ease-in-out, text-shadowAnim 2s infinite alternate ease-in-out, text-moveAnim 10s infinite alternate ease-in-out; */

    }
    .exitA{
        left: 1rem;
    }
    .err{
        top: 16vh;
    }
    input{
        width: 90%;
    }
    .YB{
        height: 100px;
        width: 100px;
        /* animation: YBINTRO 5s ease, YBMOVEPHONE 5s cubic-bezier(1, 0.0, 0, 1) infinite alternate; */
    }
    .tip{
        font-size: 0.6rem;
        margin: 1rem 0;
    }

    
}
@keyframes YBMOVEPHONE {
    from{
        bottom: 33vh;
        left: 15vw;
        background-color: var(--riazi);
    }
    to{
        bottom: 33vh;
        left: 70vw;
        background-color: var(--tajrobi);
    }
}
@keyframes startTitle {
    0%{
        opacity: 0;
        top: -10px;
    }
    100%{
        opacity: 100%;
        top: 0px;
    }
}