@font-face {
        font-family: 'persian'; /* یک نام دلخواه برای فونت خود انتخاب کنید */
        src: url(Font/SHBlabeloo.ttf) format('truetype');
        }
        @font-face {
        font-family: 'upsans';
        src: url(Font/upsans.woff) format('woff');
}
        * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
        }
        body{
            font-family: upsans ,sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
            text-align: center;
            position: relative;
            background-image: url(../css/background/footer.png);
            /* background-size: cover; */
            background-repeat: no-repeat;
            background-position: center;
            padding: 50px;
        }
        .page-404{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.066);
            backdrop-filter: blur(5px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
            padding: 35px 110px;
            border: 1px solid #fff;
            border-radius: 20px;
            z-index: 1;
        }
        .oops-text{
            font-family: persian;
            font-size: 14rem;
            font-weight: bold;
            color: #fff;
            margin: 0;
        }
        .page-404 p{
            font-size: 20px;
            color: #fff;

        }
        .bac{
            background: #0000004d;
            border-radius: 20px;
            padding-bottom: 5px;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            padding: 10px 20px;
        }
        .bac>a{
            display: inline-block;
            font-size: 20px;
            text-decoration: none;
            background-color: #070738;
            padding: 10px 20px;
            color: #fff;
            border: 3px solid #ffffff;
            border-radius: 30px;
        }
        .bac>h2 a{
            color: #fff;
            text-decoration: none;
            font-size: medium;
        }
        .page-404>h2 a:hover{
            color: #75af7c;
            text-decoration: underline;
        }
        .bak{
            position: absolute;
            z-index: 0;
            font-size: 470px;
            color: hsl(221.54deg 19.37% 69.73%);
        }
        /* RESPONSIVE */
        @media(max-width:768px){
                 body{background-size: cover;}

                 .page-404{padding: 0; height: 350px;}

            .page-404 p{
                font-size: 14px;
            }
            .oops-text{
                font-size: 4rem;
            }
            .bac>h2 a{
                font-size: 14px;
                
            }
            .bac>a{
                font-size: 14px;
                position: absolute;
                margin-top: 120px;
            }
            .bak{
                font-size: 180px;
            }
            .bac{
                margin: 10px;
                padding: 0 5px;
                width: max-content;
            }
        }

/* رسپانسیو RESPONSIVE */