*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Vazirmatn',sans-serif;
    overflow:hidden;
    background:#081018;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.bg-animation{
    position:fixed;
    inset:0;

    background:
    linear-gradient(
    -45deg,
    #00e6c3,
    #1ec7ff,
    #0d1b2a,
    #00ffd5);

    background-size:400% 400%;
    animation:bgMove 12s ease infinite;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.container{
    position:relative;
    z-index:10;
    text-align:center;
    padding:20px;
}

.logo-wrapper{
    position:relative;
    width:clamp(120px,30vw,170px);
    height:clamp(120px,30vw,170px);
    margin:auto;
}

.logo{
    width:100%;
    height:100%;
    object-fit:contain;
    animation:float 4s ease-in-out infinite;
}

.glow{
    position:absolute;
    inset:0;
    background:#28EBCF;
    border-radius:50%;
    filter:blur(70px);
    opacity:.4;
    animation:pulse 3s infinite;
}

@keyframes pulse{
    50%{
        transform:scale(1.2);
        opacity:.7;
    }
}

@keyframes float{
    50%{
        transform:translateY(-15px);
    }
}

.title{
    color:white;
    font-size:clamp(32px,8vw,52px);
    margin-top:25px;
    letter-spacing:8px;
}

.typing{
    color:#c9d6df;
    margin-top:10px;
    font-size:18px;
    overflow:hidden;
    white-space:nowrap;
    border-left:2px solid #28EBCF;
    width:0;
    margin-inline:auto;

    animation:
    typing 4s steps(30,end) forwards,
    blink .7s infinite;
}

@keyframes typing{
    to{
        width:270px;
    }
}

@keyframes blink{
    50%{
        border-color:transparent;
    }
}

.card{
    margin-top:35px;

    backdrop-filter:blur(20px);
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);

    padding:30px;

    border-radius:30px;

    width:min(420px,90vw);

    box-shadow:
    0 20px 50px rgba(0,0,0,.25);
}

.rocket{
    font-size:50px;
    animation:float 3s infinite;
}

.card h2{
    color:white;
    margin-top:15px;
    font-size:34px;
}

.card p{
    color:#dbe5eb;
    margin-top:12px;
    line-height:32px;
}

/* 403 PAGE */

.error-code{
    color:white;
    font-size:clamp(80px,18vw,170px);
    font-weight:700;
    line-height:1;
    margin-top:20px;

    text-shadow:
    0 0 20px rgba(40,235,207,.4),
    0 0 60px rgba(40,235,207,.3);
}

.icon{
    font-size:55px;
    animation:float 3s infinite;
}

.btn{
    display:inline-block;

    margin-top:25px;

    padding:14px 28px;

    background:#28EBCF;

    color:#081018;

    text-decoration:none;

    font-weight:700;

    border-radius:14px;

    transition:.3s;
}

.btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 10px 30px rgba(40,235,207,.45);
}

@media (max-width:480px){

    .card{
        padding:24px;
    }

    .card h2{
        font-size:28px;
    }

    .card p{
        font-size:15px;
        line-height:28px;
    }

    .typing{
        font-size:15px;
    }
}