:root{
    --color-main: #1581BF
}
@font-face {
    font-family: main ;
    src: url('Vazir-Regular-FD.woff');
}

html {
  scroll-behavior: smooth;
}

body{
    font-family: main;
    font-size: 15px;
    direction: rtl;
    padding: 0px;
    margin: 0px;
}

.width
{
    max-width: calc(100% - 20px);
    width: 1000px;
    margin: auto;
}

header
{
    border-bottom: 5px solid var(--color-main);
    margin-bottom: 10px;
    padding: 10px 0px;
}

header .width{
    display: flex;
    align-items: center;
}


header h1{
    margin: 0px;
    margin-right: 20px;
    padding: 0px;
    display: inline-block;
}


header img{
    height: 80px;;
}

.main
{
    display: flex;
    align-items: start;
}

nav
{
    background-color: #f4f4f4;
    position: sticky;
    top: 10px;
    border-radius: 15px;
    width: 300px;
}

nav a
{
    color: #1d1d1d;
    text-decoration: none;
}

main
{
    margin-right: 20px;
    flex-grow: 1;
}


section
{
    line-height: 225%;
    text-align: justify;
    margin-bottom: 50px;
}

section h2
{
    padding: 0px;
    margin: 0px;
    color: var(--color-main);
    scroll-margin-top: 10px; /* ارتفاع هدر */
}

section h2::before
{
    content: " ◈ ";
    font-size: 1.25rem;;
}













code {
  display: block;
  direction: ltr;
  text-align: left;

  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;

  background: #e5e7eb;        /* dark editor */
  color:   #0f172a;
  padding: 16px;
  border-radius: 8px;

   

}



code.json {
  white-space: pre;           /* مهم‌ترین */
  overflow-x: auto;

  tab-size: 2;
}

code:hover
{
    background-color: #f4f4f4;

}

.copy
{
    background-color: #e5e7eb;
    color: #1d1d1d;
    border-radius: 8px;
    padding: 2px 10px;
    text-decoration: none;
    font-size: 0.90rem;
    float: left;
    margin-top: 3px;
}

.copy:hover
{
    background-color: #f4f4f4;
}