/* 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.7);
    --shadowColor: hsl(0, 0%, 40%);
    --riazi : hsl(60, 100%, 80%);
    --tajrobi: hsl(195, 100%, 76%);
}

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


body{
    font-family: Orbitron, "IBM Plex Sans Arabic";
    background-color: var(--bgColor);

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

    animation: glassIntro 2s ease, glassIntroMover 2s ease-in-out;
}
@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: var(--txtColor);

    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;

    margin-right: auto;
    margin-left: auto;
}
.exitHolder{
    display: flex;
    justify-content: center;
    align-items: center;
}
.exitA{
    position: relative;
    left: 1rem;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 600;
    text-shadow: 0 0 0px var(--errColor);
    text-align: center;
    color: var(--errColor);
    
    font-size: 0.8rem;
}
.mother{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 0 0 20px 0 #121212;
    width: 80%;
    justify-self: center;
    justify-content: center;
    align-items: center;
    
    padding: 2rem 1rem;
    margin: 0 auto 2rem auto;
}
.top3Holder{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@keyframes aJs1Slide {
    from{
        position: relative;
        left: 5rem;
    }
    to{
        position: relative;
        left: 0rem;
    }
}
@keyframes aJs2Slide {
    from{
        z-index: 100;
        scale: 90%;
    }
    to{
        z-index: 100;
        scale: 100%;
    }
}
@keyframes aJs3Slide {
    from{
        position: relative;
        right: 5rem;
    }
    to{
        position: relative;
        right: 0rem;
    }
}
.aJs1{
    background-color: var(--bgColor);
    scale: 90%;
    animation: aJs1Slide 1s;
}
.aJs2{
    background-color: var(--bgColor);
    animation: aJs2Slide 1s;
}
.aJs3{
    background-color: var(--bgColor);
    scale: 95%;
    animation: aJs3Slide 1s;
}
.aJs1:hover, .aJs1:focus{
    scale: 100%;
}
.aJs3:hover, .aJs3:focus{
    scale: 100%;
}
.aJs1:hover .plateMadar1, .aJs1:focus .plateMadar1{
    left: 0;
    right: 2rem;
}
.aJs2:hover .plateMadar2, .aJs2:focus .plateMadar2{
    /* position: relative; */
    scale: 110%;
}
.aJs3:hover .plateMadar3, .aJs3:focus .plateMadar3{
    right: 0;
}
.plateMadar1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    background-color: var(--bgColor);
    position: relative;
    z-index: 1;
    left: 2rem;
    padding: 0 4rem;
    padding-bottom: 4rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px var(--shadowColor);
    transition: 0.5s;
}
.plateMadar2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    background-color: var(--bgColor);
    position: relative;
    z-index: 3;
    /* left: 2rem; */
    padding: 0 4rem;
    padding-bottom: 4rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px var(--shadowColor);
    transition: 0.5s;
}
.plateMadar3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    background-color: var(--bgColor);
    position: relative;
    z-index: 2;
    right: 1rem;
    padding: 0 4rem;
    padding-bottom: 4rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px var(--shadowColor);
    transition: 0.5s;
}
.rating{
    width: 100%;
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.ratingsvg{
    transition: 0.5s;
    fill: none;
    stroke: var(--farsiColor);
    stroke-width: 1px;
    position: relative;
    bottom: .2rem;
}
.ratingDisplay{

}
.othersPlate{
    width: 90%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    border-radius: 25px;
    box-shadow: 0 0 10px var(--shadowColor);
}
.othersPlate:hover, .othersPlate:focus{
    box-shadow: 0 0 4px var(--shadowColor);
}
.digeRight{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.pfpPlate{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
}
.insidePfpPlate{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    border-radius: 50%;
}
.nearRightPlate{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.setareHolder{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    height: 35px;
    padding: 0 1rem;
    box-shadow: 0 0 2px var(--shadowColor);
}
.digeLeft{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-left: 15rem;
}
.umadePlate{
    display: flex;
    flex-direction: column;
    width: 85%;
    border-radius: 10px;
    justify-content: center;
    align-items: center;

    padding: 0 0.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px #000000;
}
.umadeTop{
    height: 10%;
    width: 100%;
    font-size: 0.7rem;
    text-align: start;
    letter-spacing: 1px;
    text-shadow: 0 0 10px;
}
.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: 2rem;
}
.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.1);
    justify-self: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8.1px);
    -webkit-backdrop-filter: blur(8.1px);
    border: 1px solid rgba(236, 223, 204, 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{
    height: 10%;
    width: 100%;
    text-align: start;
    font-size: 0.7rem;
    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;
}
.tamumKardam:hover, .tamumKardam:focus{
    text-shadow: 0 0 0px ;
}
.aybaba{
    background-color: #000000;
}



































.ann{
    justify-self: center;
    display: flex;
    height: 5rem;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.annTxt{
    font-size: 2.5rem;
}
.topName{
    text-align: center;
    text-shadow: 0 0 1px 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: 3.3rem;
    color: var(--farsiColor);
    text-shadow: 0 0 2px var(--farsiColor);
    font-weight: 200;
    animation: startFarsi 3s ease-in-out;
    letter-spacing: 0;
}
@keyframes startFarsi {
    from{
        opacity: 0;
        bottom: 2.5rem;
    }
    to{
        opacity: 1;
        bottom: 3.3rem;
    }
}
@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);
    }
} */
@media (max-width: 1000px){
    .top3Holder{
        flex-direction: column;
    }
    .aJs1{
        scale: 100%;
        order: 3;
    }
    .plateMadar1{
        position: static;
    }
    .aJs2{
        order: 1;
        margin-bottom: 1rem;
    }
    .aJs2:hover .plateMadar2, .aJs2:focus .plateMadar2{
        scale: 100%;
    }
    .plateMadar2{
        position: static;
    }
    .aJs3{
        scale: 100%;
        margin-bottom: 1rem;
        order: 2;
    }
    .plateMadar3{
        position: static;
    }
    .othersPlate{
        width: 80%;
        flex-direction: column;
        justify-content: center;
        align-items: space-between;
        padding: 0 2rem;
        border-radius: 25px;
        box-shadow: 0 0 10px var(--shadowColor);
    }
    .digeLeft{
        align-items: center;
        margin-left: 0;
    }
    .digeLeft > h4{
        margin: 1rem 0;
    }
    .digeLeft > h4:first-child{
        margin: 3rem 0 1rem 0;
    }
    .digeLeft > h4:nth-child(2){
        font-size: 0.9rem;
    }
    .digeLeft > h4:last-child{
        margin: 1rem 0 3rem 0;
        font-size: 0.9rem;
    }
    .glassBack{
        margin-top: 5vh;
        width: 90%;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: blur(11.5px);
        
        animation: glassIntro 2s ease, glassIntroMover 2s ease-in-out;
    }
    .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{
        bottom: 8vh;
    }

    .othersPlate.rew{
        margin-bottom: 2rem;
    }
}
@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;
    }
}


/* h1:not(.topName){
    text-shadow: 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);
} */