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

/*
==========================
    Fonts
==========================
*/

@font-face {
    font-family: 'vazir';
    src: url('../fonts/vazir/Farsi-Digits-Without-Latin/Vazir-Bold-FD-WOL.woff2') format('woff2'),
        url('../fonts/vazir/Farsi-Digits-Without-Latin/Vazir-FD-WOL.woff') format('woff'),
        url('../fonts/vazir/Farsi-Digits-Without-Latin/Vazir-FD-WOL.ttf') format('truetype');
}

/*
==========================
    Variables
==========================
*/

:root {
    --ff-primary: "vazir", sans-serif;
}

body {
    font-family: var(--ff-primary);
    font-size:1.1rem;
    background: url(../photo/background_small.webp) center/cover fixed no-repeat;
    height: 100vh;
    position: relative;
}

div {
    width: 100%;
}

.form_div form{
    position:absolute;
    padding:30px 20px;
    background-color:white;
    border-radius:1rem;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#form_login{
    text-align:right;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8)
}

#form_login:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,1)
}

#user_name{
    padding: 10px 38px;
    border-radius: 0.75rem;
    border-color:red;
}

#password {
    padding: 10px 38px;
    border-radius: 0.75rem;
    border-color:red;
}

#submit_btn {
    position: relative;
    padding: 10px 100px;
    border-radius: 0.75rem;
    border-color:red;
}

@media only screen and (min-width: 768px) {
    body {
        background: url(../photo/background_small.webp) center/cover fixed no-repeat;
    }

}

@media only screen and (min-width: 1024px) {
    body {
        background: url(../photo/background_big.webp) center/cover  no-repeat;
    }
    .form_div h1 {
        left: 55%;
    }
    .form_div form {
        left: 55%;
        
    }
}