:root
{
    --bgColor: #FCFAF1;
    --txtColor: hsl(0, 0%, 20%);
    --borderColorLight: rgba(0, 0, 0, 0.1);
    --borderColor: rgba(0, 0, 0, 0.3);
    --errColor: hsl(340, 100%, 50%);
    --sucColor: hsl(183, 100%, 50%);
    --farsiColor: hsla(0, 0%, 20%, 0.7);
    --muteColor: hsla(0, 0%, 20%, 0.6);
    --shadowColor: hsla(183, 100%, 40%, 0.4);
}

html
{
    scroll-behavior: smooth !important;
}
body
{
    background-color: var(--bgColor);
    background: radial-gradient(circle,rgb(252, 252, 255) 0%, rgb(255, 255, 255) 100%);

    overflow-x: hidden;
    overflow-y: hidden;

    height: 90vh;

    color: var(--txtColor);

    font-family: "Cascadia_Mono", "Orbitron", "IBM Plex Sans Arabic";
}
a
{
    text-decoration: underline;
    color: hsla(184, 100%, 100%, 0.8);

    transition: 0.2s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}
a:hover, a:focus
{
    filter: blur(1px);
    opacity: 80%;
}
input{
    padding: 1rem 0;
    width: 90%;
    max-width: 300px;
    font-size: 1rem;
    text-align: center;
    text-align-last: center;
    border: none;
    border-radius: 10px;
    background-color: rgba(252, 250, 241, 0.16);
    border: 1px solid var(--borderColor);
    color: var(--txtColor);
    font-family: "Cascadia_Mono", "Orbitron", "IBM Plex Sans Arabic" !important;

    transition: 0.2s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}
input:hover, input:focus{
    border: 1px solid var(--borderColorLight);
    outline: none;
}
button{
    font-size: 1rem;
    border: none;
    border-radius: 10px;

    
    padding: 1rem;
    font-family: "Cascadia_Mono", "Orbitron", "IBM Plex Sans Arabic";

    border: 1px solid var(--borderColor);
    color: var(--txtColor);

    transition: 0.2s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}
button:hover, button:focus{
    border: 1px solid var(--borderColorLight);
    cursor: pointer;
}

#overlay
{
    position: fixed;
    inset: 0;
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;
    
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    opacity: 0%;
    pointer-events: none;

    transition: 0.2s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}
#overlayText
{
    font-size: 2rem;
    font-weight: 200;

    transform: translateY(10px);
    filter: blur(10px);

    transition: 0.2s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1);
}

.hoverCursor:hover, .hoverCursor:focus
{
    cursor: pointer;
}

.header
{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 60px;

    font-size: 1.5rem;
    font-weight: 200;
    
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--borderColorLight);

    display: flex;
    justify-self: center;
    align-items: center;
    justify-content: center;

    position: sticky;
    top: 0;
}
.headerDiv1
{
    height: 100%;
    width: 10%;

    display: flex;
    justify-content: center;
    align-items: center;
}
.txtHead
{
    opacity: 0% !important;
    scale: 80% !important;
    filter: blur(10px) !important;
}
h1, h2
{
    font-weight: 800;
}
#txtHeading
{
    transition: 1s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1) !important;
}
.headerDiv1Text
{
    font-size: 3rem;

    text-decoration: none;
    color: var(--txtColor);

    font-weight: 500;

    margin-bottom: 1rem;
}
.headerDiv1Text:hover, .headerDiv1Text:focus
{
    cursor: pointer;
}
.headerDiv2
{
    height: 100%;
    width: 100%;
    
    padding-right: 1rem;
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mainMid
{
    position: relative;
    inset: 0;
    margin:  auto;
    width: 70%;
    max-width: 700px;

    border-radius: 10px;
    box-shadow: 0 0 4px 0 var(--muteColor);

    padding: 1rem 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.mainMidDiv
{
    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
}
.mainMidDiv1
{
    inset: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mainMidDiv1P
{
    margin-right: 0.6rem;
}
.mainMidDiv2
{
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#jsBtn
{
    background-color: transparent !important;
}
.mainMidBtnDiv
{
    margin-top: 2rem;

    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainMidErrDiv
{
    margin-top: 1rem;

    display: flex;
    text-wrap-mode: nowrap;
    justify-content: center;
    align-items: center;
}
.err
{
    font-size: 0;
    color: var(--errColor);

    transition: 0.5s linear(0, 0.067, 0.1294, 0.1877, 0.2421, 0.2929, 0.3402, 0.3844, 0.4257, 0.4641, 0.5, 0.5335, 0.5647, 0.5939, 0.6211, 0.6464, 0.6701, 0.6922, 0.7128, 0.7321, 0.75, 0.7667, 0.7824, 0.7969, 0.8105, 0.8232, 0.8351, 0.8461, 0.8564, 0.866, 0.875, 0.8834, 0.8912, 0.8985, 0.9053, 0.9116, 0.9175, 0.9231, 0.9282, 0.933, 0.9375, 0.9417, 0.9456, 0.9492, 0.9526, 0.9558, 0.9588, 0.9615, 0.9641, 0.9665, 0.9688, 0.9708, 0.9728, 0.9746, 0.9763, 0.9779, 0.9794, 0.9808, 0.9821, 0.9833, 0.9844, 0.9854, 0.9864, 0.9873, 0.9882, 0.989, 0.9897, 0.9904, 0.991, 0.9916, 0.9922, 0.9927, 0.9932, 0.9937, 0.9941, 0.9945, 0.9948, 0.9952, 0.9955, 0.9958, 0.9961, 0.9964, 0.9966, 0.9968, 0.997, 0.9972, 0.9974, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9984, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 1); 
}

.textGo
{
    opacity: 0% !important;
    filter: blur(10px) !important;
}
.textGo1
{
    opacity: 0% !important;
    filter: blur(10px) !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.prans
{
    transition: 1s linear(0, 0.0071, 0.0269, 0.0571, 0.0958, 0.141, 0.1912, 0.2448, 0.3007, 0.3577, 0.4148, 0.4712, 0.5263, 0.5794, 0.6303, 0.6784, 0.7236, 0.7656, 0.8045, 0.84, 0.8724, 0.9015, 0.9275, 0.9505, 0.9706, 0.9881, 1.003, 1.0156, 1.0261, 1.0346, 1.0413, 1.0464, 1.05, 1.0524, 1.0537, 1.0541, 1.0537, 1.0526, 1.0509, 1.0488, 1.0463, 1.0436, 1.0407, 1.0376, 1.0345, 1.0314, 1.0284, 1.0254, 1.0226, 1.0198, 1.0172, 1.0148, 1.0125, 1.0104, 1.0085, 1.0068, 1.0052, 1.0038, 1.0026, 1.0015, 1.0006, 0.9998, 0.9991, 0.9986, 0.9981, 0.9977, 0.9975, 0.9973, 0.9972, 0.9971, 0.9971, 0.9971, 0.9972, 0.9973, 0.9974, 0.9975, 0.9977, 0.9978, 0.998, 0.9981, 0.9983, 0.9985, 0.9986, 0.9988, 0.9989, 0.9991, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1.0001, 1.0001, 1.0001, 1);
}

:root{

    --bgColor:#eef6ff;
    --cardBg:rgba(255,255,255,0.78);

    --blue:#38bdf8;

    --textColor:#0b1b2b;
    --muteColor:#5f7d95;

    --borderColorLight:#bfe6ff;

    --shadowColor:#9ddcff;


    --errColor: hsl(340, 100%, 50%);

    --dalalBg:#7dd3fc;
}

body{
    background:
        radial-gradient(circle at 15% 10%, rgba(56,189,248,0.18), transparent 32%),
        radial-gradient(circle at 85% 85%, rgba(125,211,252,0.16), transparent 30%),
        linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
    color:var(--textColor);
    font-family: "Cascadia_Mono", "Orbitron", "IBM Plex Sans Arabic";
}

.header{
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(191,230,255,0.9);
    box-shadow:0 0 8px rgba(56,189,248,0.08);
}

.headerDiv1Text{
    color:#0ea5e9;
    text-shadow:0 0 8px rgba(56,189,248,0.25);
}

.headerDiv2Div1{
    background:rgba(255,255,255,0.72);
    border:1px solid var(--borderColorLight);
    box-shadow:0 0 16px rgba(56,189,248,0.08);
}

.headerDiv2Div1Text{
    color:var(--textColor);
}

.headerDiv2Div0Div1,
.headerDiv2Div0Div2{
    background:rgba(255,255,255,0.72);
    border:1px solid var(--borderColorLight);
    box-shadow:0 0 8px rgba(56,189,248,0.10);
}

.search{
    background:transparent;
    color:var(--textColor);
}

.search::placeholder{
    color:var(--muteColor);
}

div[style*="border: 1px solid var(--borderColorLight)"]{
    background:rgba(255,255,255,0.5);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25);
}

.resBox{
    background:linear-gradient(145deg, rgba(255,255,255,0.88), rgba(239,248,255,0.72));
    border:1px solid #bfe6ff !important;
    box-shadow:
        0 0 12px rgba(56,189,248,0.08),
        0 0 0 1px rgba(255,255,255,0.6) inset;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.resBox:hover{
    box-shadow:
        0 0 8px rgba(56,189,248,0.18),
        0 0 16px rgba(56,189,248,0.12);
}

.resBox p,
.resBox h2,
.resBox h3{
    color:var(--textColor);
}

.resBox p[style*="color: var(--muteColor)"],
p[style*="color: var(--muteColor)"],
h3[style*="color: var(--muteColor)"]{
    color:var(--muteColor) !important;
}


h2[style*="background-color: var(--dalalBg)"]{
    background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
    color:#ffffff;
    box-shadow:0 0 8px rgba(56,189,248,0.20) !important;
}

a{
    color:#0ea5e9;
    text-decoration:none;
}

.footerHolder p{
    color:var(--textColor);
}
/* floating action buttons */
div[style*="border-radius: 50%; background: linear-gradient(45deg, var(--sucColor) 0%, var(--blue) 100%)"],
div[style*="border-radius: 50%; background: linear-gradient(0deg, var(--sucColor) 0%, var(--blue) 100%)"],
div[style*="border-radius: 50%; background: linear-gradient(0deg, var(--sucColor) 0%, var(--errColor) 100%)"]{
    box-shadow:0 0 12px 0 rgba(56,189,248,0.18);
}

/* MOBILE */
@media (max-width: 1000px)
{
    .headerDiv1
    {
        width: 40%;
    }
    .headerDiv1Text
    {
        font-size: 2.5rem;
        margin-top: 1rem;
    }
    .mainMidDiv1
    {
        align-items: flex-end;
    }
}