@font-face {
  font-family: "iransans";
  src: url("../fonts/IRANSANS.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "gurmukhi";
  src: url("../fonts/ADOBEGURMUKHI-REGULAR.OTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root{
  --body-background: #00021cea;
  --body-text-color:  #e6eaf5;
  --scrollbar-background: rgba(255, 255, 255, 0.05);
  --scrollbar: #6467a7;
  --webkit-scrollbar-thumb: #78a6ff;
  --header-bg: rgba(40, 42, 60, 0.35);
  --menu-bg: rgb(15, 16, 28);
  --menu-toggle-bg: #293a4f;
  --header-shadow:0 0 20px rgba(0, 0, 0, 0.6);
  --brand-bg: linear-gradient(90deg, #e6eaf5, #aab3c9);
  --menue-items-li: #2e7dff;
  --light-toggle: yellow;
  --lesson-content: #191c042f;
  --content-title:rgb(237, 237, 237);
  --menu-title-bg: #37384dbf;
  --menu-title-box-shadow: #0b081dd6;
  --submenu-text-color: #fcffdc;
  --submenu-bg: #1a1a1ad9;
  --fancy-line-bg: linear-gradient(to right, #2e213e00, #2e213e42, #2e213e93);
  --console-text-color: white;
  --console-numbers: rgb(225, 255, 180);
  --console-light-yellow: rgb(237, 237, 131);
  --console-yellow: yellow;
  --console-string: rgb(114, 114, 114);
  --console-blue: rgb(80, 147, 222);
  --console-light-blue: rgb(151, 205, 255);
  --console-purple: rgb(232, 108, 232);
  --console-modules: rgb(56, 255, 179);
  --console-unused-var: rgb(116, 129, 168);
  --console-comment: rgb(83, 154, 74);
  --inline-code-bg: rgba(98, 218, 255, 0.129);
  --inline-code-text: rgb(255, 219, 142);
  --page-nav-bg: #1a1a1a;
  --page-nav-border: #91c1cb;
  --page-nav-text-hover: #aa7dff;
  --page-nav-border-hover: #aa7dff58;
  --page-nav-shadow-hover:
    0px 0px 4px #aa7dff58,
    0px 0px 8px #aa7dff58,
    0px 0px 16px #aa7dff58,
    0px 0px 32px #aa7dff58;
  --main-text-color: rgb(229, 229, 236);
  --this-lesson-title-header-bg: rgba(0, 0, 0, 0.826);
  --this-lesson-title-bosy-bg: #1a1a1ad1;

  --footer-bg: linear-gradient(
    to bottom,
    #1c1e3600 0%,
    #1c1e36 30%,
    #1c1e36 100%
  );
  --footer-code-header: #37384d;
  --footer-console-body: #1a1a1a;

  --floating-menu-bg: linear-gradient(135deg, #26485a46 0%, #2c2362ad 100%);

  --code-block-header-bg: #37384dbd;
  --code-block-header-lang: #a0a8fe;
  --code-block-body-bg: #1a1a1a94;
  --code-block-showResult: antiquewhite;
  --show-content-hover: aquamarine;
  --code-block-header-icon: #a0a8fe;
  --code-line-block: #ada5a53a;
  --more-bg: #373851;
  --more-text: aquamarine;

  --image-opacity:opacity(75%);
}

body.light{
  --body-background: #f8fafc;
  --body-text-color:  #1e293b;
  --scrollbar-background: rgba(0, 0, 0, 0.05);
  --scrollbar: #cbd5e1;
  --webkit-scrollbar-thumb: #94a3b8;
  --header-bg: rgba(232, 239, 238, 0.5);
  --menu-bg: rgb(247, 249, 249);
  --menu-toggle-bg: #dadfe4;
  --header-shadow:0 0 20px rgba(132, 132, 132, 0.6);
  --brand-bg: linear-gradient(90deg, #1e293b, #475569);
  --menue-items-li: #3b82f6;
  --light-toggle: #f59e0b;

  --top-hashore: repeating-linear-gradient(
    45deg,
    #c3bd005c 0,
    #bd810059 1px,
    transparent 2px,
    transparent 6px
  );

  --lesson-content: #edf3f34b;
  --content-title:#0f172a;
  --menu-title-bg: #c7cfd8a7;
  --menu-title-box-shadow: rgba(0, 0, 0, 0.05);
  --submenu-text-color: #334155;
  --submenu-bg: #dae0e56b;
  --fancy-line-bg: linear-gradient(to right, #e2e8f000, #cbd5e160, #e2e8f0);
  --console-text-color: #1e293b;
  --console-numbers: rgb(52, 180, 105);
  --console-light-yellow: rgb(174, 154, 4);
  --console-yellow: rgb(0, 81, 255);
  --console-string: rgb(114, 114, 114);
  --console-blue: rgb(80, 147, 222);
  --console-light-blue: rgb(0, 97, 187);
  --console-purple: rgb(153, 31, 194);
  --console-modules: rgb(81, 184, 144);
  --console-unused-var: rgb(116, 129, 168);
  --console-comment: rgb(10, 83, 0);
  --inline-code-bg: #eaeef27e;
  --inline-code-text: #db2777;
  --page-nav-bg: #f1f5f9;
  --page-nav-border: #cbd5e1;
  --page-nav-text-hover: #7c3aed;
  --page-nav-border-hover: #7c3aed58;
  --page-nav-shadow-hover: 0px 0px 4px #7c3aed58, 0px 0px 8px #7c3aed58;
  --main-text-color: #334155;
  --this-lesson-title-header-bg: #c7cfd8a7;
  --this-lesson-title-bosy-bg: #dae0e56b;

  --footer-bg: linear-gradient(to bottom, #ffffff00 0%, #ffffff 40%, #ccdbe8 100%);
  --footer-code-header: #c7cfd8a7;
  --footer-console-body: #dae0e56b;

  --floating-menu-bg: linear-gradient(135deg, rgba(241, 219, 219, 0.886) 0%, #b4c0d0da 100%);

  --code-block-header-bg: #c7cfd8a7;
  --code-block-header-lang: #1e293b;
  --code-block-body-bg: #dae0e56b;
  --code-block-showResult: antiquewhite;
  --show-content-hover: aquamarine;
  --code-block-header-icon: #a0a8fe;
  --code-line-block: #ada5a53a;
  --more-bg: #373851;
  --more-text: aquamarine;

  --image-opacity:opacity(100%);
}

.sun {
  display: block;
  cursor: pointer;
}
.moon {
  display: none;
  cursor: pointer;
}
body.light .sun {
  display: none;
}
body.light .moon {
  display: block;
}

.main-title {
  font-family: "iransans";
  font-size: x-large;
  color: #29c840;
  margin: 0;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: 1px dashed #29c840;
}

.subtitle {
  font-size: medium;
  font-weight: 100;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: var(--body-background);
  padding: 0;
  margin: 0;
  color: var(--body-text-color);
}

p{
  padding: 0;
  margin: 0;
}

/* side menu */
.side-menu{
  font-family: "iransans";
  text-align: justify;
  line-height: 2; 
  border-radius: 30px 0 0 0;
  font-size: 12px;
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -342px;
  width: 300px;
  height:1 00%;
  background: var(--menu-bg);
  box-shadow: -3px 0 10px rgba(0,0,0,0.2);
  transition: 0.4s;
  padding: 20px;
  border: 1px solid rgb(120, 182, 218);
}

.rotate-90{
  rotate: 90deg;
}

.side-menu-scroll{
  max-height: 85vh;
  overflow: auto;
  padding-left: 8px;
}

.side-menu.active{
right:0;
}

.menu-toggle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:absolute;
  right:100%;
  top:40%;
  background-color:var(--menu-toggle-bg);
  color:var(--body-text-color);
  width: 25px;
  height: 90px;
  padding: 18px 0px;
  cursor:pointer;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  clip-path:polygon(
    0% 5%,
    100% 0%,
    100% 100%,
    0% 95%
  );
  border-radius: 15px 2px 2px 15px;
  border-top:5px solid rgb(120, 182, 218);
  border-bottom:5px solid rgb(120, 182, 218);
  border-left: 2px solid rgb(120, 182, 218);
}

.side-menu-title{
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

/* inner animation */
.animate-item {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease-in-out;
}

.animate-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-background);
  border-radius: 500px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--scrollbar-background);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--webkit-scrollbar-thumb);
}

/* header */
header {
  z-index: 1;
  position: fixed;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--header-bg);
  box-shadow: var(--header-shadow);
  height: 55px;
  width: 75%;
  margin: 20px auto;
  border-radius: 30px;
  padding: 0 20px;
  backdrop-filter: blur(5px);
}

.brand {
  font-weight: bold;
  font-size: 1.4rem;
  font-family: "iransans";
  background: var(--brand-bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.header-icon {
  width: 40px;
  height: 40px;
}

.menue-titles {
  display: flex;
  align-items: center;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menue-items-li {
  font-family: "iransans";
  transition: 0.3s ease;
}

.menue-items-li:hover {
  color: var(--menue-items-li);
  cursor: pointer;
  text-shadow:
    0 0 5px var(--menue-items-li),
    0 0 12px var(--menue-items-li);
}

/* .light:hover {
  color: var(--light-toggle);
  filter: drop-shadow(0 0 15px var(--light-toggle));
} */

/* copy message */
.copy-message {
  font-family: "iransans";
  font-size: medium;
  position: fixed;
  top: 80px;

  left: 50%;
  transform: translateX(-50%);

  background-color: rgba(117, 247, 221, 0.786);
  color: #fff;

  z-index: 1000;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  text-align: center;

  opacity: 0;
  transition: opacity 0.3s ease;
}

/* page body layout */
.mybody {
  margin: 30px;
  margin-top: 80px;
  display: flex;
  flex-direction: row-reverse;
  transition:all 0.5s ease-in-out;
  width: auto;
}

.mybody-head-1 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  border-radius: 20px 20px 0 0;
  background-image: var(--top-hashore);
  height: 20px;
}
.mybody-head-2 {
  position: absolute;
  right: 0;
  top: 30px;
  width: 100%;
  background-image: var(--top-hashore);
  height: 10px;
}

.hashore {
  margin: 0 8px;
  width: 15px;
  border-radius: 20px;
  background-image: repeating-linear-gradient(
    45deg,
    #888888 0px,
    #888888 2px,
    transparent 1px,
    transparent 5.5px
  );
  height: 100vh;
  position: sticky;
  top: 80px;
}

.lesson-content {
  padding-top: 60px;
  position: relative;
  font-family: "iransans";
  font-size: 10px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: 0;
  border-radius: 0 0 30px 30px;
  width: 100%;
  background-color: var(--lesson-content);
  overflow-x: hidden;      /* ← اضافه کن */
  word-wrap: break-word;   /* ← اضافه کن */
  max-width: 100%;         /* ← اضافه کن */
  box-sizing: border-box;
}

.content-title {
  text-align: justify;
  color: var(--content-title);
  font-family: "iransans";
  font-size: large;
  padding-right: 10px;
}



.lesson-icon {
  width: 25px;
  height: 25px;
}

.lesson-icon- {
  transition: all 0.2s ease-in-out;
}

.lesson-icon--:hover .lesson-icon- {
  fill: var(--menue-items-li);
  transition: all 0.2s ease-in-out;
}
/* color:  #3BA3FF; */
/* color:  #FFD84A; */
/* color:  #00F5D4; */
/* color:  #FF7A59; */
/* color:  #7B2CFF; */
/* color:  #B4F000; */
/* color:  #FF5C8A; */
/* color:  #38BDF8; */
/* color:  #F6C945; */
/* color:  #C77DFF; */
.keep-code {
  display: inline-block;
}

.caption-content {
  line-height: 1.9;
  font-size: medium;
  text-align: justify;
}

.lesson-content-image{
  filter: var(--image-opacity);
  margin: 0 auto;
  max-width: 400px;
  height: auto;
  display: block;
  border-radius: 30px;
  transition: all 0.4s ease-in-out;
}

.lesson-content-image:hover{filter: opacity(100%); transform: scale(1.03);}

.list-circle-style::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  margin-left: 12px;
  vertical-align: middle;
  margin-right: 8px;
}

.atomic-warning{
  padding-right: 15px;
  padding-left: 15px;
  border: 1px dashed #ff9d0031;
  border-right: 3px solid #ff9e00;
  background-color: #e1ff0010;
  border-radius: 10px;
}

.atomic-warning::before{
    content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/atomic-warning.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  vertical-align: middle;
}

/* menu container */
.menue-list {
  padding-left: 6px;
  position: sticky;
  top: 100px;
  min-width: 270px;
  width: max-content;
  max-height: 90vh;
  overflow-y: auto;
}

/* steps */
.steps {
  font-family: "iransans";
  font-size: large;
  text-align: center;
  padding-bottom: 15px;
}

/* menu title */
.menu-title {
  font-family: "iransans";
  background-color: var(--menu-title-bg);
  box-shadow: 0px 5px 20px var(--menu-title-box-shadow);
  border-radius: 20px;
  margin: 2px;
  margin-bottom: 8px;
  padding: 5px 5px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.menu-title- {
  display: flex;
  align-items: center;
}

.left-arrow {
  width: 20px;
  height: 20px;
  transition: 0.3s ease;
}

/* hide checkbox */
.menu-checkbox {
  display: none;
}

/* closed submenu */
.submenu {
  line-height: 3;
  font-family: monospace;
  color: var(--submenu-text-color);
  max-height: 0;
  overflow: hidden;
  background-color: var(--submenu-bg);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* new wrapper for each menu item */
.menu-item-parent {
  list-style: none;
  margin-bottom: 8px;
}

/* open state for submenu */
.menu-item-parent.open .submenu {
  max-height: 1000px;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid rgba(182, 181, 181, 0.749);
}

/* remove bottom-radius when open */
.menu-item-parent.open .menu-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  border: 1px solid rgba(182, 181, 181, 0.749);
  border-bottom: 0;
}

/* rotate icon on open */
.menu-item-parent.open .left-arrow {
  transform: rotate(90deg);
}



/* default*/
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  color: inherit;
}
a:focus {
  outline: none;
}

.code-inline {
  background-color: #97844319;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 8px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  list-style: none;
}

.option-01::before {
  content: "[1] ";
}
.option-02::before {
  content: "[2] ";
}
.option-03::before {
  content: "[3] ";
}
.option-04::before {
  content: "[4] ";
}
.option-05::before {
  content: "[5] ";
}
.option-06::before {
  content: "[6] ";
}
.option-07::before {
  content: "[7] ";
}
.option-08::before {
  content: "[8] ";
}
.option-09::before {
  content: "[9] ";
}
.option-10::before {
  content: "[10] ";
}
.option-11::before {
  content: "[11] ";
}
.option-12::before {
  content: "[12] ";
}
.option-13::before {
  content: "[13] ";
}
.option-14::before {
  content: "[14] ";
}
.option-15::before {
  content: "[15] ";
}
.option-16::before {
  content: "[16] ";
}
.option-17::before {
  content: "[17] ";
}
.option-18::before {
  content: "[18] ";
}
.option-19::before {
  content: "[19] ";
}
.option-20::before {
  content: "[20] ";
}
.option-21::before {
  content: "[21] ";
}
.option-22::before {
  content: "[22] ";
}
.option-23::before {
  content: "[23] ";
}


.option-01:hover {
  color: #ff4fd8;
  cursor: pointer;
}
.option-02:hover {
  color: #9a5bff;
  cursor: pointer;
}
.option-03:hover {
  color: #4cff89;
  cursor: pointer;
}
.option-04:hover {
  color: #3ba3ff;
  cursor: pointer;
}
.option-05:hover {
  color: #ffd84a;
  cursor: pointer;
}
.option-06:hover {
  color: #00f5d4;
  cursor: pointer;
}
.option-07:hover {
  color: #ff7a59;
  cursor: pointer;
}
.option-08:hover {
  color: #7b2cff;
  cursor: pointer;
}
.option-09:hover {
  color: #ffb3c1;
  cursor: pointer;
}
.option-10:hover {
  color: #80ffdb;
  cursor: pointer;
}
.option-11:hover {
  color: #ff9e00;
  cursor: pointer;
}
.option-12:hover {
  color: #6eeb83;
  cursor: pointer;
}
.option-13:hover {
  color: #9d4edd;
  cursor: pointer;
}
.option-14:hover {
  color: #f72585;
  cursor: pointer;
}
.option-15:hover {
  color: #4cc9f0;
  cursor: pointer;
}
.option-16:hover {
  color: #ffcbf2;
  cursor: pointer;
}
.option-17:hover {
  color: #bde0fe;
  cursor: pointer;
}
.option-18:hover {
  color: #c8ff7a;
  cursor: pointer;
}
.option-19:hover {
  color: #ff8fa3;
  cursor: pointer;
}
.option-20:hover {
  color: #72efdd;
  cursor: pointer;
}
.option-21:hover {
  color: #9bf6ff;
  cursor: pointer;
}
.option-22:hover {
  color: #faa307;
  cursor: pointer;
}
.option-23:hover {
  color: #b388eb;
  cursor: pointer;
}


.option-01 a {
  display: inline-block;
  height: 100%;
}
.option-02 a {
  display: inline-block;
  height: 100%;
}
.option-03 a {
  display: inline-block;
  height: 100%;
}
.option-04 a {
  display: inline-block;
  height: 100%;
}
.option-05 a {
  display: inline-block;
  height: 100%;
}
.option-06 a {
  display: inline-block;
  height: 100%;
}
.option-07 a {
  display: inline-block;
  height: 100%;
}
.option-08 a {
  display: inline-block;
  height: 100%;
}
.option-09 a {
  display: inline-block;
  height: 100%;
}
.option-10 a {
  display: inline-block;
  height: 100%;
}
.option-11 a {
  display: inline-block;
  height: 100%;
}
.option-12 a {
  display: inline-block;
  height: 100%;
}
.option-13 a {
  display: inline-block;
  height: 100%;
}
.option-14 a {
  display: inline-block;
  height: 100%;
}
.option-15 a {
  display: inline-block;
  height: 100%;
}
.option-16 a {
  display: inline-block;
  height: 100%;
}
.option-17 a {
  display: inline-block;
  height: 100%;
}
.option-18 a {
  display: inline-block;
  height: 100%;
}
.option-19 a {
  display: inline-block;
  height: 100%;
}
.option-20 a {
  display: inline-block;
  height: 100%;
}
.option-21 a {
  display: inline-block;
  height: 100%;
}
.option-22 a {
  display: inline-block;
  height: 100%;
}
.option-23 a {
  display: inline-block;
  height: 100%;
}


.active-01 {
  color: #ff4fd8;
}
.active-02 {
  color: #9a5bff;
}
.active-03 {
  color: #4cff89;
}
.active-04 {
  color: #3ba3ff;
}
.active-05 {
  color: #ffd84a;
}
.active-06 {
  color: #00f5d4;
}
.active-07 {
  color: #ff7a59;
}
.active-08 {
  color: #7b2cff;
}
.active-09 {
  color: #ffb3c1;
}
.active-10 {
  color: #80ffdb;
}
.active-11 {
  color: #ff9e00;
}
.active-12 {
  color: #6eeb83;
}
.active-13 {
  color: #9d4edd;
}
.active-14 {
  color: #f72585;
}
.active-15 {
  color: #4cc9f0;
}
.active-16 {
  color: #ffcbf2;
}
.active-17 {
  color: #bde0fe;
}
.active-18 {
  color: #c8ff7a;
}
.active-19 {
  color: #ff8fa3;
}
.active-20 {
  color: #72efdd;
}
.active-21 {
  color: #9bf6ff;
}
.active-22 {
  color: #faa307;
}
.active-23 {
  color: #b388eb;
}

/*color: #3BA3FF;
  color: #FFD84A;
  color: #00F5D4;
  color: #FF7A59;
  color: #7B2CFF;
  color: #B4F000;
  color: #FF5C8A;
  color: #38BDF8;
  color: #F6C945;
  color: #C77DFF;
  color: #FFB3C1;
  color: #80FFDB;
  color: #FF9E00;
  color: #6EEB83;
  color: #9D4EDD;
  color: #F72585;
  color: #4CC9F0;
  color: #FFCBF2;
  color: #BDE0FE;
  color: #C8FF7A;
  color: #FF8FA3;
  color: #72EFDD;
  color: #9BF6FF;
  color: #FAA307;
  color: #B388EB;
*/
.fancy-line {
  border: none;
  height: 2px;
  background: var(--fancy-line-bg);
  border-radius: 2px;
}

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

.code-icon {
  width: 45px;
}

/* text colors */
.white{
  font-family: monospace;
  color: var(--console-text-color);
  white-space: pre;
}
.light-green{
  font-family: monospace;
  color: var(--console-numbers);
  white-space: pre;
}
.light-yellow {
  font-family: monospace;
  color: var(--console-light-yellow);
  white-space: pre;
}
.yellow {
  font-family: monospace;
  color: var(--console-yellow);
  white-space: pre;
}
.dark-orange {
  font-family: monospace;
  color: rgb(222, 128, 56);
  white-space: pre;
}
.dark-gray {
  font-family: monospace;
  color: var(--console-string);
  white-space: pre;
}
.blue {
  font-family: monospace;
  color: var(--console-blue);
  white-space: pre;
}
.light-blue {
  font-family: monospace;
  color: var(--console-light-blue);
  white-space: pre;
}
.purple{
  font-family: monospace;
  color: var(--console-purple);
  white-space: pre;
}
.mediumspringgreen{
  font-family: monospace;
  color: var(--console-modules);
  white-space: pre;
}
.unused-blue{
  font-family: monospace;
  color: var(--console-unused-var);
  white-space: pre;
}
.r-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(255, 52, 34);
}
.y-underline{
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(197, 168, 0);
}
.comment{
  font-family: monospace;
  color: var(--console-comment);
  white-space: pre;
}

/* code style */
.code {
  background-color: var(--inline-code-bg);
  border-radius: 10px;
  padding-right: 8px;
  padding-left: 8px;
  font-family: monospace;
  font-size: 13px;
  display: inline-block;
  color: var(--inline-code-text);
}

/* falling codes */
.falling-codes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.falling-snippet {
  position: absolute;
  top: -80px;
  animation: fall 3s linear infinite;
  opacity: 0.85;
}

.snippet-inner {
  display: inline-block;
  transform: rotate(90deg);
  font-family: monospace;
  font-size: 14px;
  color: #00ff88;
  text-shadow: 0 0 8px #00ff88;
}

/* pages navigation */
.pages-navigation {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
}

.pages-navigation-top {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.nav-right-arrow {
  width: 20px;
  height: 20px;
}

.nav-box {
  display: flex;
  align-items: center;
  gap: 5px;
  direction: ltr;
  font-family: "iransans";
  font-size: medium;
  background-color: var(--page-nav-bg);
  padding: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid var(--page-nav-border);
  border-radius: 20px;
  transition: all 0.2s ease-in-out;
}

.left-nav-box {
  padding-right: 17px;
}

.right-nav-box {
  padding-left: 17px;
}

/* color:  #3BA3FF;
  color:  #FFD84A;
  color:  #00F5D4;
  color:  #FF7A59;
  color:  #7B2CFF;
  color:  #B4F000;
  color:  #FF5C8A;
  color:  #38BDF8;
  color:  #F6C945;
  color:  #C77DFF; */
.nav-box:hover {
  color: var(--page-nav-text-hover);
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--page-nav-shadow-hover);
  border: 1px solid var(--page-nav-border-hover);
  transition: all 0.2s ease-in-out;
}

.nav-box:hover .nav-right-arrow {
  stroke: var(--page-nav-text-hover);
  transition: all 0.s ease-in-out;
}

@keyframes fall {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(120vh);
    opacity: 0;
  }
}

/* phone view */
@media (max-width: 640px) {
  header {
    width: 90%;
    padding: 0 12px;
  }
  .brand {
    font-size: 1rem;
  }
  ul {
    font-size: 0.8rem;
  }
}

/* tablet view */
@media (max-width: 1024px) {
  .menue-list {
    display: none;
  }
  .hashore-left {
    display: none;
  }
  .lesson-content {
    margin: 0;
  }
}

@media (max-width:768px){
    .mybody{
    margin-right: 2px;
    margin-left: 2px;
    overflow-x: hidden;
  }
  .side-menu{
    display: block;
  }
}

@media (min-width:768px){
  .side-menu{
    display: none;
  }
}

@media (max-width:430px){
  .lesson-content-image{
    max-width: 250px;
  }
}

p{
  color: var(--main-text-color);
}