/* 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%);
}

.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: row-reverse;
    justify-content: space-evenly;

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

    text-align: center;
}
.tamumKardamX:hover, .tamumKardamX:focus{
    text-shadow: 0 0 0px;
    box-shadow: 0 0 0 0;
}
@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{
    padding-bottom: 1rem;

    width: 70%;
    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;
}
@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{
    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;
}
@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;
}
.mel{
    font-size: 1rem;
    color: var(--farsiColor);
    letter-spacing: 1px;
    animation: startMel 3s ease;
}
/* @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 rgba(255, 255, 255, 0.3);
}
.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;
}
input{
    padding: 2rem 0;
    letter-spacing: 2px;
    width: 70%;
    font-size: 1.2rem;
    text-align: center;
    border: none;
    border-radius: 4px;
    font-family: Orbitron;
    transition: 0.1s linear;
    background-color: rgba(252, 250, 241, 0.16);
    box-shadow: 0 0 20px 0 var(--shadowColor);
    color: var(--txtColor);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    margin-bottom: 5rem;
}
input:hover, input:focus{
    border: none;
    outline: none;
    box-shadow: 0 0 5px 0 hsl(120, 3%, 5%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
  appearance: none; 
  margin: 0;
  padding: 0;
}
button{
    font-size: 4vh;
    border: none;
    border-radius: 4px;
    font-family: Orbitron;
    transition: 0.1s ease-in-out;

    background-color: rgba(252, 250, 241, 0.16);
    box-shadow: 0 0 10px 0 var(--shadowColor);
    color: var(--txtColor);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
button:hover, button:focus{
    background-color: rgba(248, 243, 236, 0.4);
    box-shadow: 0 0 2px 0 var(--shadowColor);
    cursor: pointer;
}
form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.err{
    letter-spacing: 0px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--errColor);
    text-shadow: 0 0 1px var(--errColor);
    display: flex;
    text-align: center;
    justify-content: center;
    /* animation: startErr 1s ease; */
}
#resendP:hover, #resendP:focus{
    cursor: pointer;
}
@media (1000px<width){
    .glassBack{
        animation: none;
    }
}
@media (width<=1000px){
    .glassBack{
        margin-top: 5vh;
        width: 90%;
        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{
        position: static;
        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;
    }
    input{
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    input:hover, input:focus{
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    button{
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    
}
@media (max-width: 1000px) {

    html, body {
        overflow-x: hidden;
    }

    body {
        letter-spacing: 1px;
        background: radial-gradient(circle, #fff 0%, #ccc 100%);
    }

    .glassBack {
        margin-top: 5vh;
        width: 90%;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);

        /* iOS blur fix */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        animation: glassIntro 1s ease;
    }

    .topRow {
        grid-template-columns: 15% 70% 15%;
        width: 95%;
    }

    .topName {
        font-size: 1.1rem;
    }

    .exitA {
        font-size: 0.7rem;
        position: static;
    }

    .mother {
        width: 90%;
        padding: 0.5rem;
    }

    .annTxt {
        font-size: 1.1rem;
    }

    .farsi {
        font-size: 0.8rem;
        bottom: 1rem;
    }

    /* Input + buttons mobile behavior */
    input {
        width: 90%;
        padding: 1.3rem 0;
        font-size: 1rem;
        margin-bottom: 3rem;
        box-shadow: 0 0 10px var(--shadowColor);

        background-color: rgba(252, 250, 241, 0.16);

        /* Prevent iOS blur lag */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    input:hover,
    input:focus {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 0 5px 0 hsl(0, 0%, 20%);
    }

    button {
        font-size: 1rem;
        padding: 0.7rem 1rem;
        box-shadow: 0 0 10px var(--shadowColor);

        /* iOS blur fix */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .tamumerHolder {
        width: 90%;
        padding: 0.8rem 0;
        box-shadow: 0 0 10px #000;
    }

    .tamumKardam {
        font-size: 1.1rem;
    }

    .tamumKardamX {
        font-size: 0.6rem;
        padding: 0.8rem;
    }

    .ong {
        width: 100%;
        padding: 0;
        position: relative;
        bottom: 2rem;
    }

    .mel {
        font-size: 0.9rem;
        text-align: center;
    }

    .err {
        font-size: 1rem;
        margin-top: 2rem;
    }

    .timeHolder {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

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