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

:root {
    font-size: 16px;
}

html, body {
    direction: rtl; 
    text-align: right;  
    color: white;
    min-width: 320px;
}

/* ---------- links ---------- */
a {
    text-decoration: none;
    transition: border-color 0.1s ease;
}
a:link {
    color: var(--link_color);
}
a:visited {
    color: inherit;
    text-decoration: none;
}
a:focus {
    outline: none;  
    text-decoration: none;
}
a:focus-visible {
    outline: 1px solid var(--on_hover);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
a:hover {
    text-decoration: none;
    color: var(--link_hover);
}
a:active {
    text-decoration: none;
}

/* ---------- details ---------- */
details summary {
    cursor: pointer;
}
/* Chrome, Edge, Safari */
details > summary::-webkit-details-marker {
    display: none;
}
/* Firefox */
details > summary {
    list-style: none;
}

h2 {
   white-space: nowrap;
}










input[type="radio"] {
    width: auto;      /* Let browser default size apply */
    height: auto;     /* Let browser default size apply */
    transform: none;  /* Remove any scaling */
}


/* ---------- scrollbar ---------- */
/* Width of the scrollbar */
::-webkit-scrollbar {
  width: 6px; /* vertical scrollbar */
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: none;
  border-radius: 5px;
}

/* Handle (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #858685;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d0d0d0;
}

img {
    cursor: pointer;
}