@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.woff') format('woff');
}

body {
    font-family: 'Vazir' !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

:root {
    /* Main colors */
    --color-bg: #0d1117;
    --color-surface: #161b22;
    --color-surface-alt: #21262d;
    --color-accent: #58a6ff;

    /* Supporting colors */
    --color-text: #c9d1d9;
    --color-text-white: #ffffff;
    --color-text-muted: #8b949e;

    /*border color*/
    --color-border: #30363d;

    /* Effects */
    --color-accent-soft: rgba(88, 166, 255, 0.1);
    --color-accent-hover: rgba(88, 166, 255, 0.08);

    /* Success color for alert */
    --color-success: #3fb950;
    --color-success-bg: rgba(46, 160, 67, 0.15);
    --color-success-border: rgba(46, 160, 67, 0.4);
}


.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
}

form{
    margin: 0;
}

header{
    direction: ltr;
    max-width: 1200px;
    position: relative;

}

.logo img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


.navbar a{
    text-decoration: none;
    color: var(--color-text-muted);
}


.navbar a:hover{
    color: var(--color-text-white);
}

.signin{
    padding: 8px;
    border-radius: .5rem;
    background: var(--color-surface-alt);
}


.navbar-space{
    border-bottom: 1px dashed #4a4747;
    max-width: 1200px;
    margin: auto;
    opacity: .4;
}


.toggle{
    font-size: 1.5rem;
    display: none;
}

footer {
    border-top: 1px dashed #4a4747;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 20px 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}



@media (max-width: 678px){
    .toggle{
        display: block;
    }

    .navbar{
        position: absolute;
        top: 99%;
        left: 0; right: 0;
        display: flex;
        flex-direction: column;
        align-items: start;
        z-index: 1000;
        background: var(--color-bg);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: .3s ease;

    }

    .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .navbar a{
        width: 90%;
        margin-bottom: 1rem;

    }

    .navbar .logout-link-button{
        margin-bottom: 1rem;
    }
}