/* https://colorhunt.co/palette/1e201e3c3d37697565ecdfcc */
/* https://colorhunt.co/palette/343434e6b31efcfaf1cacaca */
@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');


:root{
    --errColor: hsl(340, 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%);
}


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


.glassBack{
    height: 75vh;
    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 1s cubic-bezier(0, 0.167, 0, 1.374), glassIntroMover 2s ease-in-out, glassMover 10s ease infinite alternate;

    z-index: -10;

    margin-left: auto;
    margin-right: auto;
}
@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);
    }
}
.YB{
    position: relative;
    background-color: var(--riazi);
    height: 200px;
    width: 200px;
    border-radius: 50%;
    filter: blur(20px);
    animation: YBINTRO 5s ease, YBMOVE 5s cubic-bezier(1, 0.0, 0, 1) infinite alternate;

    z-index: -20;
}
@keyframes YBINTRO {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes YBMOVE{
    from{
        bottom: 57vh;
        left: 15vw;
        background-color: var(--riazi);
    }
    to{
        bottom: 57vh;
        left: 70vw;
        background-color: var(--tajrobi);
    }
}
/* .BB{

} */
body{
    font-family: Orbitron, "IBM Plex Sans Arabic";
    background-color: var(--bgColor);
    color: var(--txtColor);
    font-size: 4rem;
    letter-spacing: 2px;
    perspective: 30rem;
    overflow-y: hidden;
}
/* @starting-style{
    .title{
        opacity: 0;
        transform: translateY(-100px) ;
    }
    .titleW{
        opacity: 0;
    }
} */
@keyframes startTitle {
    0%{
        opacity: 0;
        top: -10px;
    }
    100%{
        opacity: 100%;
        top: 0px;
    }
}
.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;
    }
}
.title{
    position: relative;
    transition: 3s ease-in-out;
    justify-self: center;
    margin-bottom: 8rem;
    align-self: center;
    text-shadow: 0 0 20px var(--shadowColor);
    animation: startTitle 2s ease-in-out, text-shadowAnim 2s infinite alternate ease-in-out, text-moveAnim 10s infinite alternate ease-in-out;
    font-weight: 300;
    font-size: 6vh;
}
@keyframes text-shadowAnim {
    0%{
        text-shadow: 0 0 20px var(--shadowColor);
    }
    100%{
        text-shadow: 0 0 60px var(--shadowColor);
    }
}
@keyframes text-moveAnim {
    0%{
        transform: rotate3d(0, 0, 0, 5deg);
    }
    50%{
        transform: rotate3d(1, 0, 0, 5deg);
    }
    100%{
        transform: rotate3d(0, 1, 0, 10deg);
    }
}
.titleW{
    animation: startTitleW 10s ease-in-out;
    transition: 2s ease-in;
    justify-self: center;
    align-self: center;
    color: rgba(236, 223, 204, 0.2);
    text-shadow: 0 0 10px rgba(236, 223, 204, 0.5);
    font-weight: 400;
}
@keyframes startTitleW {
    0%{
        opacity: 0;
        top: 40px;
    }
    100%{
        opacity: 100%;
        top: 0px;
    }
}
.err{
    position: relative;
    top: 15vh;
    letter-spacing: 0px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--errColor);
    text-shadow: 0 0 20px var(--errColor);
    display: flex;
    text-align: center;
    justify-content: center;
    animation: startErr 1s ease;
}
@keyframes startErr {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes errAnim {
    to{
        color: rgba(255, 0, 0, 0.5);
    }
}
form{
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
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);
}
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{
    position: relative;
    top: 10vh;
    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;
}
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;
}
.as{
    font-size: 1rem;
    color: var(--errColor);
}
.tip{
    position: relative;
    transform: translateY(20vh);
    letter-spacing: 0px;
    bottom: 5vh;
    font-size: 1rem;
    animation: tipS 5s ease-in-out;
    transition: 1s ease-in;
    justify-self: center;
    text-align: center;
    align-self: center;
    color: var(--farsiColor);
    text-shadow: 0 0 1px var(--farsiColor);
    font-weight: 300;
}
.mel{
    font-size: 1rem;
    color: var(--farsiColor);
    letter-spacing: 1px;
    animation: startMel 3s ease;
}
@keyframes startMel {
    from{
        position: relative;
        opacity: 0;
        top: -2rem;
    }
    to{
        position: relative;
        opacity: 1;
        top: 0rem;
    }
}
@keyframes tipS {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@media (width<=1000px){
    .glassBack{
        margin-top: 17vh;
        height: 63vh;
        width: 90%;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        
        animation: glassIntro 1s cubic-bezier(0, 0.167, 0, 1.374), glassIntroMover 2s ease-in-out;
    }

    input{
        filter: none;
        backdrop-filter: none;
        box-shadow: 0 0 8px;
        -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;
    }
    .title{
        position: relative;
        top: 0rem;
        font-size: 2rem;
        animation: startTitlePhone 2s ease-in-out, text-shadowAnim 2s infinite alternate ease-in-out, text-moveAnim 10s infinite alternate ease-in-out;

        margin-bottom: 4rem;
    }
    .as{
        margin-top: 1.2rem;
        margin-left: 1rem;
        font-size: 0.8rem;
    }
    .YB{
        height: 100px;
        width: 100px;
        animation: YBINTRO 5s ease, YBMOVEPHONE 5s cubic-bezier(1, 0.0, 0, 1) infinite alternate;
    }
    .tip{
        bottom: 8vh;
    }
}
@keyframes YBMOVEPHONE {
    from{
        bottom: 43vh;
        left: 15vw;
        background-color: var(--riazi);
    }
    to{
        bottom: 43vh;
        left: 70vw;
        background-color: var(--tajrobi);
    }
}
@keyframes startTitle {
    0%{
        opacity: 0;
        top: -10px;
    }
    100%{
        opacity: 100%;
        top: 2px;
    }
}